Đến với bài viết hôm nay mình xin chia sẻ cho các bạn một icon thường rất hay sử dụng trong các trang web, đó là file icon.Có thể các bạn thường thấy các file chỉ tạo trên nền ảnh, bằng Photoshop,... chứ không phải trong lập trình CSS3.Bây giờ Các bạn sẽ được thấy tạo file icon này hoàn toàn được làm bằng CSS3 mà không phải sử dụng bất kì một file hình ảnh nào.
HTML
Chúng ta sẽ chỉ cần một đoạn html đơn giản như sau :
1
| <div></div> |
CSS
Và đây là đoạn css3 giúp chúng ta tạo icon như sau :
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
| body { background: #222;}div { width: 200px; height: 240px; line-height: 60px; background: #eee; text-align: center; font-size: 480px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; overflow: hidden;}div:before { content: "---"; display: block;}div:after { content: ""; display: block; position: absolute; top: 0; right: 0; width: 0; height: 0; border: solid 80px transparent; border-left: none; border-top: none; border-bottom: solid 80px #ccc; background: #222;} |
Để có thể xem icon này hoàn chỉnh nhất, các bạn nên xem ở trình duyệt Chrome. Thật đơn giản phải không các bạn, mình hy vọng là qua bài viết ngắn ngủi này, các bạn sẽ học thêm về cách sử dụng những thuộc tính mới của CSS3 và nhất là có thể áp dụng icon này vào chính trang web hay blog mà các bạn đang sở hữu.
0 nhận xét:
Đăng nhận xét