Error message

  • Deprecated function: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in _filter_pubdlcnt() (line 50 of /home/mamast08nv/public_html/sites/all/modules/pubdlcnt/pubdlcnt.module).
  • Deprecated function: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in _filter_pubdlcnt() (line 50 of /home/mamast08nv/public_html/sites/all/modules/pubdlcnt/pubdlcnt.module).
  • Deprecated function: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in _filter_pubdlcnt() (line 50 of /home/mamast08nv/public_html/sites/all/modules/pubdlcnt/pubdlcnt.module).
  • Deprecated function: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in _filter_pubdlcnt() (line 50 of /home/mamast08nv/public_html/sites/all/modules/pubdlcnt/pubdlcnt.module).
  • Deprecated function: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in _filter_pubdlcnt() (line 50 of /home/mamast08nv/public_html/sites/all/modules/pubdlcnt/pubdlcnt.module).
  • Deprecated function: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in _filter_pubdlcnt() (line 50 of /home/mamast08nv/public_html/sites/all/modules/pubdlcnt/pubdlcnt.module).
  • Deprecated function: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in _filter_pubdlcnt() (line 50 of /home/mamast08nv/public_html/sites/all/modules/pubdlcnt/pubdlcnt.module).
  • Deprecated function: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in _filter_pubdlcnt() (line 50 of /home/mamast08nv/public_html/sites/all/modules/pubdlcnt/pubdlcnt.module).
  • Deprecated function: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in _filter_pubdlcnt() (line 50 of /home/mamast08nv/public_html/sites/all/modules/pubdlcnt/pubdlcnt.module).
  • Deprecated function: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in _filter_pubdlcnt() (line 50 of /home/mamast08nv/public_html/sites/all/modules/pubdlcnt/pubdlcnt.module).
  • Deprecated function: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in _filter_pubdlcnt() (line 50 of /home/mamast08nv/public_html/sites/all/modules/pubdlcnt/pubdlcnt.module).
  • Deprecated function: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in _filter_pubdlcnt() (line 50 of /home/mamast08nv/public_html/sites/all/modules/pubdlcnt/pubdlcnt.module).
  • Notice: Undefined offset: 1 in nice_menus_block_view() (line 306 of /home/mamast08nv/public_html/sites/all/modules/nice_menus/nice_menus.module).
Bài viết hướng dẫn về thuộc tính transition css3, thuộc tính này làm cho hiệu ứng Dropdown (xổ xuống) theo kiểu trượt xuống (Scroll) trong bài Css3 DropdownMenu...Và không để các bạn đợi lâu, mình và các bạn cùng tìm hiểu về thuộc tính này nha.
Trước khi tìm hiểu tác dụng của nó, ta đi vào định nghĩa và cấu trúc về nó.
 
- ĐN: Thuộc tính Transition xác định một hiệu ứng chuyển tiếp khi có một hành động.
- Cấu trúc:

tag
{
  transition: giá trị;
 -moz-transition: giá trị;
-webkit-transition: giá trị;
-o-transition: giá trị;
}

Trong đó:

● -moz-transition hỗ trợ cho firefox.
● -webkit-transition hỗ trợ cho Google Chrome và Safari.
● -o-transition hỗ trợ cho Opera.
 
Và để rõ hơn về Transition, các bạn xem bảng giá trị sau.
 
Transition CSS3
Để hiểu rõ tác dụng của Transition, ta xem ví dụ sau.

Soạn thảo một đoạn code HTML đơn giản như sau:

<html>
   <head></head>
 <body>
   <p>Đây là hiệu ứng Transition</p>
 </body>
</html>

 và khi chưa có CSS, thì nó như thế này

            Đây là hiêu ứng Transition


và sau khi có CSS có chứa thuộc tính Transition

.p{
    background: #cc0000;
    transition: height 2s;
    -moz-transition: height 2s;
    -webkit-transition: height 2s;
    -o-transition: height 2s;
    height: 23px;
    width: 120px;
}
p:hover {
    height: 100px;
}

Tham khảo tài liệu html css ở mục chia sẻ

Tin tức khác:

 + Học thiết kế web

 + Đào tạo wordpress

 + Đào tạo quản trị web tại Hà Nội

 

 + Khóa học đồ họa in ấn