Bài đăng

Đang hiển thị bài đăng từ tháng 5 14, 2015

Tạo style đẹp cho Breadcrumb Links với các thuộc tính CSS3

Hình ảnh
Với tất cả các phát triển của CSS và CSS3 trong những năm gần đây, chúng ta đã đạt đến một điểm mà rất nhiều các kỹ thuật mã hóa cũ mà liên quan đến hình ảnh nền có thể được tạo ra hoàn toàn bằng các  thuộc tính CSS . Trong hướng dẫn này, chúng ta sẽ xem xét việc tạo ra một loạt các liên kết  điều hướng “breadcrumb link”  trong một phong cách thiết kế phẳng mà không có sự cần thiết cho các  “sliding doors background image” . Tạo style đẹp cho Breadcrumb Links với CSS3 Các liên kết breadcrumb chúng ta sẽ tạo được phong cách với hình dạng chữ V để ủng hộ ý tưởng nội dung khoan xuống. Trước đó một nền PNG hình ảnh sẽ được sử dụng để tạo ra hình dạng chữ V này, nhưng với sự giúp đỡ của các kỹ thuật không giới hạn thông minh tác dụng tương tự có thể được tạo ra hoàn toàn bằng thuộc tính của CSS3. VIEW DEMO <div id="crumbs"> <ul> <li><a href="#">Breadcrumb</a></li> </ul> </div> Chúng ta sẽ bắt đầu bằng cách bổ

The Shapes of CSS – Tạo các khối hình học bằng CSS

Hình ảnh
Hôm nay trong lúc lên mạng search thử từ khóa "Triangle CSS" xem có gì hay ho không, tôi đã bắt gặp bài viết này, xin được chia sẻ lại với các bạn. Hi vọng nó sẽ giúp bạn hiểu hơn về cách tạo ra một số hình khối hình học bằng CSS. Chắc chắn bạn sẽ phải thích thú, ngạc nhiên bởi có rất nhiều hình "kỳ quái" lại có thể tạo ra được chỉ bằng CSS3 như: Hình tròn, hình oval, hình quả trứng, hình trái tim, trăng khuyết, ruy-băng, hình âm-dương, tam giác, ngũ giác, lục giác, bát giác, hình ngôi sao,… The Shapes of CSS – Tạo các khối hình học bằng CSS The shapes of css – tạo các khối hình học bằng css View Demo     Download Files Một số ví dụ tiêu biểu: Hình tròn 1 2 3 4 5 6 7 8 9 10 # circle { width : 100px ; height : 100px ; background : red ; -moz-border-radius : 50px ; -webkit-border-radius : 50px ; border-radius : 50px ; }   /* Cleaner, but slightly less support: use "50%" as value */ Hình Oval 1 2 3 4 5 6 7 8 9