Ngày hôm nay chúng ta sẽ đi vào tìm những thiết kế material design đẹp bằng HTML, CSS, Javascript cho thiết kế và phát triển website nha.
Các Ví Dụ Material Design
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.
Cách Tạo Material Design Card
Kết quả bạn xem hình ảnh bên dưới nhé!
See the Pen Article Tiles by Max Kurapov (@mkurapov) on CodePen.
Thiết Kế Material Design Tab
Kết quả bạn xem hình ảnh bên dưới nhé!
See the Pen Tabs Modal by Andy Tran (@andytran) on CodePen.
Cách Tạo Material Design Input
Kết quả bạn xem hình ảnh bên dưới nhé!
See the Pen Material Compact Login Animation by Yusuf Bakır (@yusufbkr) on CodePen.
Thiết Kế Material Design Cho Card UI
Kết quả bạn xem hình ảnh bên dưới nhé!
See the Pen Recipe Card by Max (@iMax723) on CodePen.
Thiết Kế Material Design Cho Checkbox Và Radio Input
Kết quả bạn xem hình ảnh bên dưới nhé!
See the Pen Material Inspired Checkboxes and Radio Groups by Buddy Reno (@BuddyLReno) on CodePen.
Xây Dựng Material Design Cho Card CSS
Kết quả bạn xem hình ảnh bên dưới nhé!
See the Pen Client Testimonial by Maciej Leszczyński (@asistapl) on CodePen.
Tạo Material Card UI Bằng HTML CSS
Kết quả bạn xem hình ảnh bên dưới nhé!
See the Pen News Cards - CSS only by Aleksandar Čugurović (@choogoor) on CodePen.
Thiết Kế Material Design Animation Cho Icon
Kết quả bạn xem hình ảnh bên dưới nhé!
See the Pen Expanding Card | Material Design by Joe Harry (@woodwoerk) on CodePen.
Xây Dựng Input Material Design
Kết quả bạn xem hình ảnh bên dưới nhé!
See the Pen Nice, compliant input boxes by Andrew Tunnecliffe (@atunnecliffe) on CodePen.
Cách Tạo Material Design Radio Button CSS
Kết quả bạn xem hình ảnh bên dưới nhé!
See the Pen Material Design radio button (CSS only) by Bazyli Cyran (@sajran) on CodePen.
Thiết Kế Form Material Design CSS
Kết quả bạn xem hình ảnh bên dưới nhé!
See the Pen Full CSS Material design form by DEMODE Alexandre (@Alex-D) on CodePen.
Cách Tạo Material Design Shadow
Kết quả bạn xem hình ảnh bên dưới nhé!
See the Pen Material Design Box Shadows by Samuel Thornton (@sdthornton) on CodePen.
Giao Diện Material Design Menu
Kết quả bạn xem hình ảnh bên dưới nhé!
See the Pen #1 Burger Menu inspired by Material Design by Victor Freire (@victorfreire) on CodePen.
Tạo Animation Material Design Cho Đường Dẫn
Kết quả bạn xem hình ảnh bên dưới nhé!
See the Pen Material design transition by David Marland (@djmarland) on CodePen.
Cách Tạo Material Design Dropdown CSS
Kết quả bạn xem hình ảnh bên dưới nhé!
See the Pen Material Design CSS Only Dropdown Menu by Ben Mildren (@mildrenben) on CodePen.
Thiết Kế Material Design Navigation
Kết quả bạn xem hình ảnh bên dưới nhé!
See the Pen Material design navigation by Lewi Hussey (@Lewitje) on CodePen.
Giao Diện Material Design Form Đăng Ký
Kết quả bạn xem hình ảnh bên dưới nhé!
See the Pen Material design sign up form by KovJonas (@KovJonas) on CodePen.
Tạo Material Design Button
Kết quả bạn xem hình ảnh bên dưới nhé!
See the Pen Materialize Button by g3offrey (@legeoffrey) on CodePen.
Xây Dựng Công Cụ Chọn Màu Theo Kiểu Material Design
Kết quả bạn xem hình ảnh bên dưới nhé!
See the Pen Material Design Color Scale by Yusuf Bakır (@yusufbkr) on CodePen.
Thiết Kế Responsive Timeline Theo Material Design
Kết quả bạn xem hình ảnh bên dưới nhé!
See the Pen Responsive Material Design Timeline by haycuoilennao19 (@haycuoilennao19) on CodePen.
Tạo Popup Bằng Material Design Popup
Kết quả bạn xem hình ảnh bên dưới nhé!
See the Pen Material Design Popup by Patrick Stillhart (@arcs) on CodePen.
Tạo Material Design Component
Kết quả bạn xem hình ảnh bên dưới nhé!
See the Pen Material Design Chips by Morten Sørensen (@moso) on CodePen.
Giao Diện Material Design UI Cho Audio Player
Kết quả bạn xem hình ảnh bên dưới nhé!
See the Pen Material Design UI Audio Player by Michael Zhigulin (@michael-zhigulin) on CodePen.
Tạo Card Theo Kiểu Material Design
Kết quả bạn xem hình ảnh bên dưới nhé!
See the Pen Material Design Cards by Vince Brown (@vincebrown) on CodePen.
Thiết Kế Upload File Theo Google Material Design
Kết quả bạn xem hình ảnh bên dưới nhé!
See the Pen Google Material Design Input File by Josantonius (@Josantonius) on CodePen.
Tạo Blockquote Material CSS
Kết quả bạn xem hình ảnh bên dưới nhé!
See the Pen Material Design Blockquote by Michael Mammoliti (@MichaelMammoliti) on CodePen.
Tạo Hiệu Ứng Chuyển Động Card Theo Material Design
Kết quả bạn xem hình ảnh bên dưới nhé!
See the Pen Material Design - Transformation by Erik Hellman (@ehellman) on CodePen.
Google Material Design Input Boxes
Kết quả bạn xem hình ảnh bên dưới nhé!
See the Pen Google Material Design Input Boxes by Chris Sev (@chris__sev) on CodePen.
Material Design navigation bar
Kết quả bạn xem hình ảnh bên dưới nhé!
See the Pen Material Design - Sidebar (Profile menu) by Sergey Kupletsky (@zavoloklom) on CodePen.
Material Design Hamburger
Kết quả bạn xem hình ảnh bên dưới nhé!
See the Pen Material Design Hamburger by Chris Draycott-Wheatley (@chrisdwheatley) on CodePen.
Material Login Form
Kết quả bạn xem hình ảnh bên dưới nhé!
See the Pen Material Login Form by Andy Tran (@andytran) on CodePen.
Material design buttons
Kết quả bạn xem hình ảnh bên dưới nhé!
See the Pen Material design buttons by Michaela (@Fischaela) on CodePen.
Responsive Modal Design
Kết quả bạn xem hình ảnh bên dưới nhé!
See the Pen Responsive Modal Design by Ettrics (@ettrics) on CodePen.
Google Material Design
Kết quả bạn xem hình ảnh bên dưới nhé!
See the Pen Google Material Design by Ray Ch (@iraycd) on CodePen.
Material select box
Kết quả bạn xem hình ảnh bên dưới nhé!
See the Pen Material Design <select> element, css only by Victor Meyer (@pudgereyem) on CodePen.
Material design card css
Kết quả bạn xem hình ảnh bên dưới nhé!
See the Pen Material VCard by Rian Ariona (@ariona) on CodePen.
Material Registration Form
Kết quả bạn xem hình ảnh bên dưới nhé!
See the Pen Material Registration Form - Pure CSS Material Components by Bence Szabo (@finnhvman) on CodePen.
Material Design CSS Only Tabs
Kết quả bạn xem hình ảnh bên dưới nhé!
See the Pen Material Design CSS Only Tabs by Ben Mildren (@mildrenben) on CodePen.
Material login form template
Kết quả bạn xem hình ảnh bên dưới nhé!
See the Pen Concept Material Login Form by İbrahim ÖZTÜRK (@ibrahimozturkme) 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 thiết kế material design đẹp và 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ẻ!
