• fans
  • 1036 reader
  • followers

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

Demon Warlock Website facebook twitter user_email

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

  • 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

Newbie

Các series nên xem trên izwebz cho newbie

Khi vào izwebz chắc nhiều bạn cho rằng các bài viết trên izwebz đều không có hệ thống gì cả? Thực chất, các bài biết đều đi theo một series của riêng nó, ví dụ như PHP, HTML & CSS, PSD2HTML, Photoshop, illustrator,… Trong bài viết này, mình sẽ tổng hợp lại các series bài viết cần thiết cho một newbie.

Izwebz facebook group

Social connect

Recent Comments

Archives