post image

CSS3 – Transition

CSS3 tuy chưa được chính thức sử dụng rộng rãi nhưng những gì mà nó có thể làm được quả là rất đáng mong đợi. Về mặt nguyên lý thì có vẻ sự ra đời của CSS3 đã phần nào lấn sân của Javascript. Bởi vì người ta nói rằng HTML dùng để thể hiện nội dung, CSS dùng để trình bày cấu trúc và Javascript thì tương tác với người dùng. Nhưng những tính năng mới của CSS3 như transition và animation phần nào đã làm thay đổi nguyên lý này.

Hiện tại khi sử dụng Javscript người lập trình bao giờ cũng phải tính đến điều kiện trình duyệt của người dùng không bật Javascript. Nhưng nếu trong tương lai (hy vọng không xa) chúng ta có thể tạo ra những hiệu ứng động đơn giản mà không cần sự hỗ trợ của Javascript thì cũng rất tiện chứ sao. Trong bài này tôi sẽ cùng bạn khám phá một vài trong rất nhiều những cách sử dụng transition khác nhau của CSS3.

Lưu ý: Bởi vì CSS3 vẫn đang trong quá trình phát triển do vậy để làm theo học xem ví dụ bài này bạn phải có trình duyệt Safari của Apple hoặc Chrome của Google.

Thời lượng: 31:05

Download định dạng .avi chất lượng cao: MediaFire

Dung lượng: 151MB

«

»

11 Comments

( Comment bài này )
  1. Trung Hiếu says:

    Anh DW cho em hỏi trong CSS3 thì ease-out có nghĩa là gì vậy?

  2. nguyen quang dao says:

    Pác DW cho em hỏi cái thuộc tính opacity dùng để làm zì thế ?

  3. Long Vn says:

    opacity là thuộc tính làm trong suốt ,nó làm mờ bức hình đi 1 khoản nào đó
    Giá trị của nó là 1 (hiển thị 100%) và giảm dần từ 1 > 0.1

    Theo giải thích của em là thế không thể hay hơn được nếu được thì bác có thể xem thêm ở đây

    http://www.w3schools.com/Css/css_image_transparency.asp

    Và cám ơn bác DW đã viết bài này ,rất hay và bổ ích :D

  4. AlanSmith says:

    Sao không làm 1 forum để mọi người vào thảo luận nhỉ . làm Forum chỉ có PHP , HTML , CSS , JavaScrip, jQuery nhỉ. Chứ comment vậy muốn đưa ra vấn đê để thạo luận cũng khó.

  5. Bạn có thể đưa ra tại đây được mà, nếu thảo luận quá dài bạn có thể send file rồi giải thích ^^. Forum chỉ tổ nặng chứ được rì ^^

  6. loc.pham says:

    Bác viết rất hay nhưng bác có thể làm 1 video Tutorials về Image Sprites đc ko bác :(
    .

    khi sử dụng image sprites xong nó sẽ có hình như thế này nó bao gồm cả hover và active

  7. loc.pham says:

    :(

    Ko đưa đc Ảnh vô Comment :(

    Ảnh BT khi chưa dùng image sprites

    http://i407.photobucket.com/albums/pp157/gacon2287/tab.png

    Ảnh sau khi dùng Image Sprites

    http://i407.photobucket.com/albums/pp157/gacon2287/1-7.png

  8. nhtera says:

    @loc.pham có video tutorial về image sprite rồi mà http://www.izwebz.com/video-tutorials/cach-su-dung-sprite-image/

  9. loc.pham says:

    he he em nhìn ko thấy :P thanks bác

  10. Bài viết này quá hay, làm cho em hiểu thêm về CSS3. Nhưng không biết anh có bài viết nào nói về HTML5 không

  11. Sẽ có trong những ngày sắp tới CSS3 phải đi kem với HTML5 rồi.

  1. BB
  2. BB
  3. BB

arrow

Lưu ý khi post comment:

  • Không "bóc tem" topic
  • Dùng lời lẽ có văn hoá và lịch sự
  • Xem trang FAQs trước khi hỏi
  • Bạn có thể dùng thẻ HTML như:<strong>, <em>, <a>
  • Wrap code trong dấu `backtick` (dấu trên phím Tab)

Chọn kiểu gõ: Tự động TELEX VNI Tắt