Ngày hôm nay chúng ta sẽ tiếp tục đi vào tìm hiểu những thủ thuật CSS (phần 2) giúp bạn có thể dễ dàng hơn trong việc phát triển và thiết kế web nhé!
Bài Tập Thiết Kế Web Bằng HTML Đơn Giản
Nếu bạn muốn xem lại phần 1 thì có thể truy cập ở đây nhé!
Hiệu Ứng Chuyển Động Text
Và phía dưới là đoạn mã trên Codepen nhé!
See the Pen Pure CSS Text animation by Mamun Khandaker (@kh-mamun) on CodePen.
Hiệu ứng đánh chữ bằng CSS
Và phía dưới là đoạn mã trên Codepen nhé!
See the Pen Text slider with typing animation in pure CSS by Adam Lewiński (@alewinski) on CodePen.
CSS Text Reveal
Và phía dưới là đoạn mã trên Codepen nhé!
See the Pen Pure CSS Text Reveal by Mattia Astorino (@equinusocio) on CodePen.
Hiệu Ứng Chuyển Động Cho Menu
Và phía dưới là đoạn mã trên Codepen nhé!
See the Pen Animate menu CSS by Joël Lesenne (@joellesenne) on CodePen.
Thanh Tiêu Đề Overlay
Và phía dưới là đoạn mã trên Codepen nhé!
See the Pen Pure CSS Navigation Overlay by Alessandro Calvaresi (@boxabrain) on CodePen.
Tooltip CSS
Và phía dưới là đoạn mã trên Codepen nhé!
See the Pen Pure CSS Tooltip by Cristina Silva (@cristina-silva) on CodePen.
Pure CSS Accordion
Và phía dưới là đoạn mã trên Codepen nhé!
See the Pen Pure CSS Accordion by Eduardo Moreno (@emoreno911) on CodePen.
Thiết Kế Bảng CSS
Và phía dưới là đoạn mã trên Codepen nhé!
See the Pen Pure CSS Table Highlight (vertical & horizontal) by Alexander Erlandsson (@alexerlandsson) on CodePen.
Hiệu Ứng Pop-up/Overlay
Và phía dưới là đoạn mã trên Codepen nhé!
See the Pen Daily UI #016 | Pop-up/Overlay by Julie Park (@juliepark) on CodePen.
Thiết Kế Checkbox Bằng CSS
Và phía dưới là đoạn mã trên Codepen nhé!
See the Pen Pure CSS Custom Checkbox by Nikko Aboy (@nikkz) on CodePen.
Pure CSS Segmented Controls
Và phía dưới là đoạn mã trên Codepen nhé!
See the Pen Pure CSS Segmented Controls by François St-Germain (@fstgerm) on CodePen.
Hiệu Ứng Hover Cho Chữ CSS
Và phía dưới là đoạn mã trên Codepen nhé!
See the Pen Info on hover without JS by Guus Lieben (@guuslieben) on CodePen.
Tạo tab Bằng CSS
Và phía dưới là đoạn mã trên Codepen nhé!
See the Pen Pure css responsive tabs by Martin Gajdičiar (@Fallupko) on CodePen.
Hiệu Ứng Chuyển Động Gradient Text
Và phía dưới là đoạn mã trên Codepen nhé!
See the Pen Pure CSS Gradient Text Animation Effect by Casey Callow (@caseycallow) on CodePen.
Hiệu Ứng Hover Blur
Và phía dưới là đoạn mã trên Codepen nhé!
See the Pen Pure CSS Blur Hover Effect by Matthew Craig (@mcraig218) on CodePen.
Hiệu Ứng Folded-corner
Và phía dưới là đoạn mã trên Codepen nhé!
See the Pen Pure CSS folded-corner effect by Ravinthranath (@ravinthranath) on CodePen.
CSS Multi-Level Accordion
Và phía dưới là đoạn mã trên Codepen nhé!
See the Pen CSS Multi-Level Accordion by Nathan Long (@nathanlong) on CodePen.
Hiệu Ứng Chuyển Động Select Box
Và phía dưới là đoạn mã trên Codepen nhé!
See the Pen Pure CSS Select Box With Direction Aware Hover Effect by Himalaya Singh (@himalayasingh) on CodePen.
Hiệu Ứng Cho Menu Dropdown
Và phía dưới là đoạn mã trên Codepen nhé!
See the Pen #CodePenChallenge: Menu by Hakkam Abdullah (@Moslim) on CodePen.
Hiệu Ứng Cho Đường Dẫn (Link)
Và phía dưới là đoạn mã trên Codepen nhé!
See the Pen Pure CSS Magic Line Navbar by Rock Starwind (@RockStarwind) on CodePen.
Responsive Pure Css Tabs
Và phía dưới là đoạn mã trên Codepen nhé!
See the Pen Responsive pure css tabs by Prakash (@imprakash) on CodePen.
Tổng kết:
Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn những thủ thuật CSS hữu ích dành cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!
