CSS3 – Transition

#Demon Warlock

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.

#Demon Warlock

Tôi được sinh ra ở Việt Nam, nhưng hiện tại đang sống và làm việc tại Mỹ. Ngành tôi học không có liên quan gì đến thiết kế web. Nhưng đây là sở thích từ ngày còn là sinh viên du học, do vậy bây giờ dù cho đang đi làm nhưng tôi vẫn thích dùng thời gian rảnh rỗi của mình để học về thiết kế web. Như các bạn, tôi cũng việc mày mò tự học và khám phá.

# gửi LỬA

Hãy giúp cho tác giả thêm máu lửa và cảm hứng khi sáng tác với 20k

# thảo luận

Muốn giỏi phải học, muốn học thì phải hỏi. Do đó, trong quá trình học hỏi và nghiên cứu, bạn sẽ luôn có những thắc mắc. Chính vì thế, hãy cùng tham gia thảo luận với nhau để tìm ra câu trả lời thích hợp. Bạn có thể thảo luận ngay trong topic này, hoặc tham gia vào cộng đồng Izwebz Group trên Facebook, hay có thể gửi thư riêng cho tác giả “Demon Warlock”.

  • http://www.nvt.com Mr Tri

    Cái Mask để làm trong cái bản đồ ấy bác DW, ví như mình rà chuột vào tỉnh Thanh hóa thì vùng thanh hóa sáng lên, kích vào nó sẽ link tới gì đó,
    tạo cái mask để che và làm mờ các khu vực ko phải là thanh hóa. theo ý của mình thì áp dụng vào trường hợp đó

  • http://www.izwebz.com Demon Warlock

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

  • http://forum.livesupport.vn Nguyen Ngoc Long

    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

  • http://vnbuys.com loc.pham

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

  • nhtera

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

  • http://vnbuys.com loc.pham

    :(

    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

  • http://vnbuys.com loc.pham

    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

  • http://bearsharks.com Clackken Smith

    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ì ^^

  • AlanSmith

    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ó.

  • http://skyvnn.net Long Vn

    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

  • nguyen quang dao

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

  • Trung Hiếu

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

    • http://www.nvt.com Mr Tri

      Nó là tên của 1 loại Hiệu ứng, bác vào powerpoint, kích phải lên nền trang chọn Slide Transition nó sẽ cho bạn 1 loạt cách hiệu ứng, trong đó có hiệu ứng ease-out, ease-in, box-in, box-out….xem sẽ bít

#