Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Những Project HTML CSS Cho Developer (Phần 2)

Những Project HTML CSS Cho Developer (Phần 2)


Ngày 30 Tháng 9 Năm 2020

Những Thủ Thuật CSS Giúp Bạn Thiết Kế Web Tốt Hơn (Phần 2)

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é!

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

CSS Text animation

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.

Nguồn

Hiệu ứng đánh chữ bằng CSS

CSS Text animation

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.

Nguồn

CSS Text Reveal

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.

Nguồn

Hiệu Ứng Chuyển Động Cho Menu

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.

Nguồn

Thanh Tiêu Đề Overlay

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.

Nguồn

Tooltip CSS

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.

Nguồn

Pure CSS Accordion

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.

Nguồn

Thiết Kế Bảng CSS

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.

Nguồn

Hiệu Ứng Pop-up/Overlay

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.

Nguồn

Thiết Kế Checkbox Bằng CSS

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.

Nguồn

Pure CSS Segmented Controls

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.

Nguồn

Hiệu Ứng Hover Cho Chữ CSS

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.

Nguồn

Tạo tab Bằng CSS

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.

Nguồn

Hiệu Ứng Chuyển Động Gradient Text

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.

Nguồn

Hiệu Ứng Hover Blur

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.

Nguồn

Hiệu Ứng Folded-corner

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.

Nguồn

CSS Multi-Level Accordion

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.

Nguồn

Hiệu Ứng Chuyển Động Select Box

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.

Nguồn

Hiệu Ứng Cho Menu Dropdown

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.

Nguồn

Hiệu Ứng Cho Đường Dẫn (Link)

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.

Nguồn

Responsive Pure Css Tabs

Hiệu Ứng Cho Đường Dẫn (Link)

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.

Nguồn

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ẻ!

Load WooCommerce Stores in 249ms!