Trong bài post này sẽ giới thiệu cũng tool, site generator, những snippet css 3 hữu ích mà thường xuyên dùng tới.
Một yêu cầu bắt buộc với người viết css và css3 là khả năng tương thích các trình duyệt khác nhau và tương thích version của từng trình duyệt ( -webkit , -moz , -ms... )
--> việc sử dụng các site generator đã trợ giúp cho bạn giải quyết vấn đề này.
Cá Site generator được giới thiệu ở đây sẽ làm nhiệm vụ là tự động sinh ra các css3 code qua việc lựa chọn các tùy chọn, tham số trên giao diện của site, việc sau đó của bạn là chỉ copy code đã được sinh ra và sử dụng trong site của mình mà thôi.
http://css3generator.com/
Site đầu tiên cần phải kể đến là css3generator.com. Site chỉ sinh CSS3 Code ( không sinh html ), cho phép preview , hiển thị các browser và min version tương tích.
Bạn có thể style cho
- Border : bo góc và đổ bóng ( border-radius , border-shadow)
- Text : đổ bóng ( text-shadow)
- Layout : các hàng cột ( multiple columns)
- Effect : transitions , transform , gradients
- .....
http://css3please.com/
site này cung cấp các class trong một script đã được tác giả viết, bạn khai báo thuộc tĩnh class trong các HTML Element và trỏ tới các class tương ứng trong script này để sử apply chúng.
http://layerstyles.org/builder.html
Site này thì cho phép kết hợp nhiều styles cho một Element cùng một lúc : shadow , border , background
JUST LIKE YOUR FAVORITE GRAPHICS EDITOR
BUT IN YOUR BROWSER. AND IT CREATES CSS.
--> cho phép style : shadow , border , gradient
http://css-tricks.com/examples/ButtonMaker/ [ Button Generator ]
Site này khác hoàn toàn các site trên, nó cho phép bạn tạo style <a> tag thành các Buttons rất đẹp , không image.
--> click lên button vừa tạo được để lấy css code. nó sinh ra một class .button --> trỏ thuộc tính class của <a> tag tới .button này ok.
--> Cho phép down script để dùng offline.
http://www.csstablegenerator.com/ [ Table Generator ]
site cho phép chọn các option --> sẽ sinh ra css code riêng và html code riêng.
Note : nhược điểm của thằng này là html code ko chuẩn convention.
tablestyler.com [ Table Generator ]
Một Site khá ngon, html và css riêng rẽ, html code tuân thủ convention. Style cả thanh phân trang.
tham khảo :
Gradient effect
Border Shadow
Border radius
Selector
CSS Table Design http://coding.smashingmagazine.com/2008/08/13/top-10-css-table-designs/
download link :
css table template
CSS Table Gallery : http://icant.co.uk/csstablegallery/tables/99.phpdownload link :
css table template
--> gồm các template đã viết sẵn chỉ việc down và chọn dùng.
CSS3 Cheat Sheet
No comments:
Post a Comment