Hướng dẫn tạo Menu Icon với HTML và CSS - How t
Menu Icon thường được sử dụng nhiều trong khi thiết kế thanh navigation cho website. Thiết kế một menu icon sẽ làm cho website của chúng ta đẹp hơn, khoa học và hiện đại hơn rất nhiều. Vậy làm sao để thiết kế được một menu icon? Hôm nay, mình cùng các bạn sẽ tìm hiểu nhé. Menu Icon là một biểu ...
Bài 05: Cách viết Responsive với SASS CSS - CSS Responsive Web Design
SASS là một bộ thư viện dùng để biên dịch từ mã SASS sang mã CSS, hay nó còn có một cái tên khác đó là CSS Compiler. Việc sử dụng SASS để viết CSS sẽ mang đến hiệu quả khá cao, dễ dàng nâng cấp và bảo trì. Đi kèm với SASS thì ta thêm một thư viện nữa đó là LESS, tuy nhiên hiện tại mình thấy ...
Bài 04: Video học làm Responsive CSS căn bản - CSS Responsive Web Design
Mình đã viết được ba bài làm nền cho video này nên trước xem video này bạn hãy xem ba bài đó trước, hãy đọc sơ qua chứ không cần phải đọc kỹ nhé :). Trong video này mình sẽ hướng dẫn làm một layout đơn giản và sử dụng lệnh @media để thiết lập CSS cho nhiều loại thiết bị khác nhau. 1. Sử dụng ...
Bài 03: Sử dụng Javascript tạo Responsive cho Website - CSS Responsive Web Design
Việc sử dụng @media để tạo responsive là quá bình thường và đơn giản rồi, tuy nhiên khi sử dụng @media thì chúng ta gặp một vấn đề đó là với những trình duyệt không sử dụng CSS3 thì bạn không thể sử dụng @media được, lúc này bạn có thể sử dụng Javascript để thay thế. Trước khi làm ví dụ thì ...
Bài 02: Sử dụng @Media CSS tạo Responsive cho Website - CSS Responsive Web Design
Trong bài này mình sẽ giới thiệu tới các bạn một thuộc tính trong CSS3 dùng để tạo responsive đó là thuộc tính @media. 1. @media CSS là gì? @media CSS là một tính năng mới của CSS3, tính năng này cho phép ta tùy chỉnh CSS cho nhiều thiết bị khác nhau từ máy tính cho đến điện thoại smart phone ...
Bài 01: CSS Responsive Web Design là gì? - CSS Responsive Web Design
Từ thời 2011 thì khái niệm Responsive Web Design rất là mới mẻ và rất ít website sử dụng nó, mình nhớ hồi đó tập cắt CSS thì được một người đi trước gợi ý cho từ khóa này và cũng có tìm hiểu + thực hành, tuy nhiên vì thời sinh viên nên cũng không tìm hiểu sâu hơn. Nay Responsive Wed Design ...
ạo hiệu ứng mặt trời mọc với HTML và CSS - Học CSS3 căn bản & nâng cao
Các bạn thân mến, trong bài trước Zaidap.com đã hướng dẫn các bạn cách tạo mưa rơi với HTML và CSS. Chắc hẳn rằng nhiều bạn rất thích thú với những hiệu ứng này. Hôm nay, Zaidap.com tiếp tục hướng dẫn các bạn tạo hiệu ứng mặt trời mọc nhé 1. Phần ...
Hiệu ứng bóng đổ với thuộc tính box-shadow của CSS3 - Học CSS3 căn bản & nâng cao
Hôm nay mình sẽ chia sẻ với các bạn cách tạo hiệu ứng bóng đổ cho khung, button đơn giản bằng cách sử dụng thuộc tính box-shadow trong CSS3. Thuộc tính box-shadow của CSS: Cú pháp thuộc tính box-shadow gồm 4 tham số như sau: ...
ạo hiệu ứng mưa với HTML và CSS - Học CSS3 căn bản & nâng cao
Một trang web nếu hiển thị được các hiệu ứng thời tiết nắng, mưa, gió thì sẽ rất sinh động. Hôm nay, Zaidap.com sẽ hướng các bạn tạo hiệu ứng mưa như hình 1. Phần HTML Phần bố cục chia làm 2 mảng chính: đám mây và giọt mưa. <!DOCTYPE ...
ạo đồng hồ treo tường với HTML và CSS - Học CSS3 căn bản & nâng cao
Hầu như mỗi nhà đều có một chiếc đồng hồ treo tường, và trang web cũng tương tư. Nó giống như một ngôi nhà riêng của chúng ta trang mạng. Do vậy việc thiết kế nên chiếc đồng hồ cũng rất cần thiết. Hôm nay, các bạn sẽ cùng Zaidap.com thao tác để tạo chiếc đồng hồ bên dưới 1. Phần HTML Phần ...
ạo hiệu ứng trò chơi pacman với HTML và CSS - Học CSS3 căn bản & nâng cao
Những thế hệ 8x, 9x chắc hẳn không ai không biết đến trò chơi Pacman nổi tiếng. Cứ mỗi dịp hè về, ở xóm lại tụ tập quanh các quán game. Ngày nay, với công nghệ phát triển gần như trò chơi này đã rơi vào quên lãng. Hôm nay, Zaidap.com sẽ hướng dẫn các bạn tạo lại hình ảnh Pacman quen thuộc như ...
ạo thanh tìm kiếm co dãn với HTML và CSS - Học CSS3 căn bản & nâng cao
Ngày nay, việc tìm kiếm dữ liệu rất phổ biến. Hầu hết các trang web đều hỗ trợ thanh tìm kiếm. Do vậy, thiết kế và tạo hiệu ứng bắt mắt cho thanh tìm kiếm cũng góp phần không nhỏ trong việc xây dựng một trang web hiện đại. Hôm nay, Zaidap.com sẽ hướng dẫn các bạn cách tạo một thanh tìm kiếm đơn ...
ạo hiệu ứng khói với HTML và CSS - Học CSS3 căn bản & nâng cao
Trong một số giao diện đặc biệt, chúng ta sẽ cần tạo ra những hiệu ứng chuyên biệt. Hôm nay, Zaidap.com xin giới thiệu đến mọi người hiệu ứng tạo khói. Sau bài viết này mọi người có thể tạo được hiệu ứng như hình bên dưới 1. Phần HTML Vẫn là thẻ div chính cho phần bố cục, thêm vào đó là ...
ạo menu mờ với HTML và CSS - Học CSS3 căn bản & nâng cao
Menu là phần cốt yếu của bất cứ trang web nào. Ngay từ lần ghé thăm đầu tiên, thì một menu đẹp sẽ đem lại ấn tượng tốt đến người dùng, giúp họ dễ dàng nhận ra trang web của bạn. Hôm nay, Zaidap.com sẽ hướng dẫn các bạn cách tạo một menu mờ như hình bên dưới ...
ạo thanh Loading xoay với HTML và CSS - Học CSS3 căn bản & nâng cao
Con xoay hay còn gọi là spinner là một hiệu ứng không thể thiếu trong web hiện đại. Gần như bất cứ trang web nào cũng sử dụng hiệu ứng này, nhất là sau các thao tác đăng nhập hoặc đăng ký. Mục đích nhằm mang lại sự tương tác giữa web với người dùng tốt hơn. Trong bài viết này, Zaidap.com sẽ hướng ...
ạo thanh loading ngang với HTML và CSS - Học CSS3 căn bản & nâng cao
Thanh loading là một phần không thể thiếu trong các web hiện nay. Trong bài viết này, Zaidap.com sẽ giới thiệu cách tạo một thanh loading ngang với hiệu ứng đẹp chỉ dùng HTML và CSS. Sau bài viết này chúng ta học được cách tạo ra thanh loading như hình. 1. Phần HTML Trước tiên cần phải có ...
CSS3 Emphasis Marks - Học CSS3 căn bản & nâng cao
Các bạn thân mến, chúng ta lại gặp nhau. Hôm nay, Zaidap.com xin gửi đến các bạn chủ đề về "Emphasis Marks" trong CSS. Đối với trình nâng cao thì đây cũng là một chủ đề thú vị. Nào chúng ta hãy bắt đầu tìm hiểu nhé. 1. Giới thiệu Emphasis marks trong CSS Trước khi bạn học một kiến thức gì, thì ...
ìm hiểu object-fit trong CSS3 - Học CSS3 căn bản & nâng cao
Các bạn thân mến, hôm nay chúng ta lại gặp nhau. Một trang web không thể thiếu hình ảnh minh họa, việc xử lý chúng tuân theo nhưng bố cục chung cũng tạo nên vấn đề mà chúng ta cần phải giải quyết. Zaidap.com xin gửi đến các bạn cách xử lý hình ảnh trong những tình huống phải thay đổi lại kích thước ...
CSS3 - Hiệu ứng Animation - Học CSS3 căn bản & nâng cao
Các bạn thân mến, chắc hẳn rằng nhiều bạn cũng thắc mắc làm sao có thể tạo được những hiệu ứng đẹp chỉ với HTML và CSS. Hôm nay, thông qua bài học này Zaidap.com hy vọng mang đến cho các bạn những kiến thức đầy đủ nhất. 1. Animation là gì? Animation dịch ra tiếng Việt nghĩa là hiệu ứng chuyển ...
Học CSS3 - 2D Transforms - Học CSS3 căn bản & nâng cao
CSS3 2D Transforms là những thuộc tính dùng để xử lý hiệu ứng di chuyển 2D (không gian hai chiều), ví dụ bạn có thể dụng CSS3 để quay một thẻ HTML một góc 180 độ, hay kéo nhỏ kéo to khi hover chuột vào đối tượng HTML, .. Thì tất cả những hiệu ứng như vậy trong không gian hai chiều ta gọi là 2D ...
