Programming, Network, Office, Hardware, Software, Design, Photography.. I am just a GEEK
Related Articles
Trong thiết kế website để có một sản phẩm hoàn hảo không thể thiếu giao diện đẹp mắt. Hôm nay, mình sẽ hướng dẫn cách tạo Ribbon cho website bằng HTML & CSS.
Ribbon ở đây mình sẽ làm là ở góc trên bên phải của div.
Mã HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
<div class="offer offer-radius offer-primary"> <div class="shape"> <div class="shape-text"> Made in <br> <span>Thailand</span> </div> </div> <div class="offer-content"> <div class="col-md-3 col-xs-6 col-xs-12"> <div class="box box-success"> <a href="https://viet-trade.org/vn/brand/ling-long" title="Lốp xe Ling long Thailand"> <img src="https://viet-trade.org/public/images/upload/ling-long.jpg" width="100%" height="100%"> </a> </div> </div> <div class="col-md-3 col-xs-6 col-xs-12"> <div class="box box-success"> <a href="https://viet-trade.org/vn/brand/infinity" title="Lốp xe Infinity Thailand"> <img src="https://viet-trade.org/public/images/upload/infinity.jpg" width="100%" height="100%"> </a> </div> </div> <div class="col-md-3 col-xs-6 col-xs-12"> <div class="box box-success"> <a href="https://viet-trade.org/vn/brand/leao" title="Lốp xe Leao Thailand"> <img src="https://viet-trade.org/public/images/upload/leao.jpg" width="100%" height="100%"> </a> </div> </div> <div style="clear:both"></div> <div class="col-md-3 col-xs-6 col-xs-12"> <div class="box box-success"> <a href="https://viet-trade.org/vn/brand/zhongce" title="Lốp xe Zhongce Thailand"> <img src="https://viet-trade.org/public/images/upload/zhongce.jpg" width="100%" height="100%"> </a> </div> </div> <div class="col-md-3 col-xs-6 col-xs-12"> <div class="box box-success"> <a href="https://viet-trade.org/vn/brand/westlake" title="Lốp xe Westlake Thailand"> <img src="https://viet-trade.org/public/images/upload/westlake.jpg" width="100%" height="100%"> </a> </div> </div> <div class="col-md-3 col-xs-6 col-xs-12"> <div class="box box-success"> <a href="https://viet-trade.org/vn/brand/goodride" title="Lốp xe Goodride Thailand"> <img src="https://viet-trade.org/public/images/upload/goodride.jpg" width="100%" height="100%"> </a> </div> </div> <div class="col-md-3 col-xs-6 col-xs-12"> <div class="box box-success"> <a href="https://viet-trade.org/vn/brand/chaoyang" title="Lốp xe Chaoyang Thailand"> <img src="https://viet-trade.org/public/images/upload/chaoyang.jpg" width="100%" height="100%"> </a> </div> </div> </div> </div> |
Tiếp đến ta design CSS cho khung chứa nội dung
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
.offer{ background:#fff; border:1px solid #ddd; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); margin-bottom: 20px; overflow:hidden; } .offer-radius{ border-radius:7px; } .offer-danger { border-color: #d9534f; } .offer-danger .shape{ border-color: transparent #d9534f transparent transparent; border-color: rgba(255,255,255,0) #d9534f rgba(255,255,255,0) rgba(255,255,255,0); } .offer-success { border-color: #5cb85c; } .offer-success .shape{ border-color: transparent #5cb85c transparent transparent; border-color: rgba(255,255,255,0) #5cb85c rgba(255,255,255,0) rgba(255,255,255,0); } .offer-default { border-color: #999999; } .offer-default .shape{ border-color: transparent #999999 transparent transparent; border-color: rgba(255,255,255,0) #999999 rgba(255,255,255,0) rgba(255,255,255,0); } .offer-primary { border-color: #428bca; } .offer-primary .shape{ border-color: transparent #428bca transparent transparent; border-color: rgba(255,255,255,0) #428bca rgba(255,255,255,0) rgba(255,255,255,0); } .offer-info { border-color: #5bc0de; } .offer-info .shape{ border-color: transparent #5bc0de transparent transparent; border-color: rgba(255,255,255,0) #5bc0de rgba(255,255,255,0) rgba(255,255,255,0); } .offer-warning { border-color: #f0ad4e; } .offer-warning .shape{ border-color: transparent #f0ad4e transparent transparent; border-color: rgba(255,255,255,0) #f0ad4e rgba(255,255,255,0) rgba(255,255,255,0); } .offer-content{ padding: 20px; } |
Ở đây mình có làm nhiều style theo Boostrap.
Sau cùng là tạo Shape cho chữ “Made in Thailand”
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
.shape{ border-style: solid; border-width: 0 120px 70px 0; float:right; height: 0px; width: 0px; -ms-transform:rotate(360deg); /* IE 9 */ -o-transform: rotate(360deg); /* Opera 10.5 */ -webkit-transform:rotate(360deg); /* Safari and Chrome */ transform:rotate(360deg); } .shape-text{ color:#fff; font-size:13px; font-weight:bold; position:relative; right:-72px; top:-7px; white-space: nowrap; -ms-transform:rotate(30deg); /* IE 9 */ -o-transform: rotate(360deg); /* Opera 10.5 */ -webkit-transform:rotate(30deg); /* Safari and Chrome */ transform:rotate(30deg); } .shape-text span{ font-size: 20px; margin-left: -28px; } |
Xong, chúc các bạn thành công.
Buy me a coffee
Leave a Reply