Tìm hiểu về CSS Gradient (Phần 1)

Chào các bạn! Bài viết hôm nay mình xin phép đi sâu vào vấn đề tìm hiểu CSS gradient. Cụm từ gradient này chắc cũng không lạ lẫm gì với các bạn nữa. Khi sử dụng gradient, bạn sẽ thấy được sự mượt mà khi giao thoa của 2 hoặc nhiều màu sắc. Lấy ví......

Tìm hiểu nhanh về CSS3 Animation

Chào các bạn! Với mức độ phổ biến của CSS3 hiện nay thì việc sử dụng Animation sẽ không còn gì xa lạ nữa. Tuy nhiên để biết chi tiết từng giá trị và vận dụng chúng thì chắc ít người đi tìm hiểu. Ngay cả bản thân mình khi sử dụng animation thì cũng......

Chỉnh sửa css trên các browser bằng Media Query, không cần thông qua javascript

Chào các bạn! Đọc tiêu đề bài viết này chắc các bạn cũng hiểu luôn nội dung của bài viết này là sẽ viết về cái gì rồi nhỉ. Có lẽ bất kỳ ai là 1 developer sẽ không ít lần đau đầu với việc fix bug css trên các browser khác nhau nhỉ? Thực......

Xử lý text trong CSS như thế nào?

Chào các bạn! Đã bao giờ các bạn đau đầu trong việc xử lý text dài ngắn hay không? Chẳng hạn có một số trường hợp như thế này: Text nó cứ kéo dài mãi, bị tràn sang cả khu vực khác, muốn nó tự nhảy xuống dòng mà không được? Muốn ẩn bớt text......

20 CSS Javascript Price Range Slider Examples

Chào các bạn! Cái tên price range slider như không còn xa lạ gì với các bạn nữa rồi nhỉ. Gần như lúc nào price range slider cũng xuất hiện trong các site ecommerce giúp người dùng có thể thuận lợi tìm kiếm sản phẩm cho mình với mức giá phù hợp với túi tiền......

15 demo CSS tuyệt đẹp cho Pagination

Chào các bạn! Pagination không còn là điều gì xa lạ với các bạn nữa. Bất cứ 1 website nào cũng có sự hiện diện pagination. Tuy nhiên, xét về thực tế mình thấy style của pagination đang sử dụng khá đơn giản: tròn hoặc vuông hoặc không có background, border luôn. Các bạn có......

Tìm hiểu và vận dụng pseudo (pseudo-element) trong css – phần 2

Chào các bạn! Trong bài trước mình đã giới thiệu với các bạn về định nghĩa, cách sử dụng cũng như 1 vài loại pseudo-classes hay dùng nhất. Bài này mình sẽ giới thiệu về pseudo-elements trong css. 1. Định nghĩa và cấu trúc của pseudo-element Pseudo-element trong CSS được dùng để định dạng một......

Tìm hiểu và vận dụng pseudo (pseudo-class) trong css – phần 1

Chào các bạn! Nhìn tiêu đề bài viết có lẽ sẽ có khá nhiều bạn thắc mắc về khái niệm pseudo trong css. Nó là cái gì? Mình đã từng sử dụng nó hay chưa? Nó được sử dụng như thế nào? Bài viết này sẽ giải thích qua về khái niệm cho các bạn......

CSS3 Emphasis Marks

Các bạn thân mến, chúng ta lại gặp nhau. Hôm nay, freetuts 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é.

...

Tìm hiểu object-fit trong CSS3

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. Freetuts 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 ảnh gốc.

...

CSS3 – Hiệu ứng Animation

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 freetuts hy vọng mang đến cho các bạn những kiến thức đầy đủ nhất.

...

Margin collapsing trong CSS

Trong CSS đôi lúc sẽ xảy ra trường hợp đặc biệt là các giá trị của thuộc tính margin chồng lấn các giá trị lên nhau. Nó sẽ lấy giá trị lớn nhất giữa hai gia trị của thuộc tính margin. Hôm nay, freetuts sẽ hướng dẫn các bạn các trường hợp đặc biệt của thuộc tính margin này.

...

Tạo hiệu ứng mặt trời mọc với HTML và CSS

Các bạn thân mến, trong bài trước freetuts đã 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, freetuts tiếp tục hướng dẫn các bạn tạo hiệu ứng mặt trời mọc nhé

...

Tạo hiệu ứng mưa với HTML và CSS

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, freetuts sẽ hướng các bạn tạo hiệu ứng mưa như hình

...

Tạo đồng hồ treo tường với HTML và CSS

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 freetuts thao tác để tạo chiếc đồng hồ bên dưới

...

Tạo hiệu ứng trò chơi pacman với HTML và CSS

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, freetuts sẽ hướng dẫn các bạn tạo lại hình ảnh Pacman quen thuộc như hình bên dưới

...

Tạo thanh tìm kiếm co dãn với HTML và CSS

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, freetuts sẽ hướng dẫn các bạn cách tạo một thanh tìm kiếm đơn giản mà hiệu quả như hình

...

Tạo hiệu ứng khói với HTML và CSS

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, freetuts 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

...

Tạo menu mờ với HTML và CSS

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.

...

Tạo thanh Loading xoay với HTML và CSS

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, Freetuts sẽ hướng dẫn các bạn tạo ra con xoay chờ như hình bên dưới. Nào chúng ta...