Sunday, 16/12/2018
News
Home » Tutorial - Series » Tạo Breadcrumb bằng CSS3

Tạo Breadcrumb bằng CSS3

Xem thêm bài viết Breadcrumb là gì?

Trong bài viết này mình sẽ hướng dẫn các bạn tạo một Breadcrumb Navigation đơn giản bằng các hiệu ứng CSS3.

Làm gì thì làm, xem demo cho nó hấp dẫn trước cái đã :D

breadcrumb-previewDemo CSS3 Breadcrumb

Mình sẽ hướng dẫn các bạn 2 phần, một phần sử dụng hình ảnh background và một phần không.

Đầu tiên là tạo Code HTML với nội dung:

Ở trên mình dùng một lớp DIV với ID là breadcrumb.

Tiếp theo là Code CSS với nội dung:

Ở hàng thứ 17, mình sử dụng thẻ background với img là bg-crumbs.png để làm hình nền dấu mũi tên.

Vậy là chúng ta đã hoàn thiện một breadcrumb rồi đó. Rất đơn giản phải không nào.

Tuy nhiên nếu chúng ta không sử dụng background thì sao. Nhưng đối với CSS3 thì không cần phải sử dụng ảnh nền mà chúng ta có thể dùng các hiệu ứng của CSS3 luôn.

Sử dụng Code HTML với nội dung như sau:

Trong ví dụ này mình dùng DIV với ID là breadcrumb2 để tránh trùng với ví dụ trên.

Tiếp theo là Code CSS gồm cả 2 phần bên dưới.

Phần này là tạo bố cục cơ bản

Phần này là tạo hiệu hứng Borders và Shadows sử dụng CSS3

 Download Demo

1 Star2 Stars3 Stars4 Stars5 Stars6 Stars7 Stars8 Stars9 Stars10 Stars (2 votes, average: 9.00 out of 10)
Loading...

Leave a Reply

Your email address will not be published. Required fields are marked *

*

:cuoi: :hix: :hihihi: :kiss: :sexy: :dotay: :ngacnhien: :oh: :love: more »