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é!
Những Thủ Thuật CSS Giúp Bạn Thiết Kế Web Tốt Hơn (Phần 2)
Nếu bạn muốn xem lại phần 1 thì có thể truy cập ở đây nhé!
Trước khi đi vào ví dụ thì mình có một số chú ý sau là để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x hay nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Nếu file là SCSS thì bạn có thể chuyển sang CSS ở đây nhé : SCSS to CSS. Nếu file là Pug thì bạn có thể chuyển sang HTML ở đây nhé : Pug to HTML. Nếu chúng ta muốn xem các nguồn được sử dụng trong Codepen để bạn thiết lập ở dưới máy tính thì nhấp vào chữ Resources ở dưới cùng bên trái của Codepen để xem các đường dẫn CDN nha.
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ẻ!