21 Code Thiết Kế Web Bằng Html CSS

21 Code Thiết Kế Web Bằng Html CSS


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

Bài Tập Thiết Kế Web Bằng HTML Đơn Giản

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

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