RSSCSS

Hướng dẫn tạo menu CSS3 Ribbon

Trong bài hướng dẫn này, Y2Graphic sẽ hướng dẫn các bạn tạo ra một dạng menu ribbon sử dụng CSS3 của tác giả jacklmoore. Nếu trước đây khi tạo dạng menu như vậy sẽ cần sử dụng hình ảnh. Với CSS3, mọi thứ trở nên đơn giản.

Mã HTML

  
		<div class="ribbon">
            <a href="#"><span>Home</span></a>
            <a href="#"><span>About</span></a>
            <a href="#"><span>Services</span></a>
            <a href="#"><span>Contact</span></a>
		</div>
 	

CSS3

Tạo CSS căn bản

 
		.ribbon span{
            background:#fff;
            display:inline-block;
            line-height:3em;
            padding:0 1em;
            margin-top:0.5em;
            position:relative;
        
            -webkit-transition: background-color 0.2s, margin-top 0.2s;  /* Saf3.2+, Chrome */
            -moz-transition: background-color 0.2s, margin-top 0.2s;  /* FF4+ */
            -ms-transition: background-color 0.2s, margin-top 0.2s;  /* IE10 */
            -o-transition: background-color 0.2s, margin-top 0.2s;  /* Opera 10.5+ */
            transition: background-color 0.2s, margin-top 0.2s;}
           
         .ribbon a:hover span{
            background:#FFD204;
            margin-top:0;}
            
         .ribbon a:link, .ribbon a:visited{ 
            color:#000;
            text-decoration:none;
            float:left;
            height:3.5em;
            overflow:hidden;}
	


Hướng dẫn tạo menu CSS3 Ribbon

Bây giờ chúng ta sẽ tạo dạng ribbon khi rê chuột vào một menu. Sử dụng :before:after

        .ribbon span:before{
            content: "";
            position:absolute;
            top:3em;
            left:0;
            border-right:0.5em solid #9B8651;
            border-bottom:0.5em solid #fff;}

    	.ribbon span:after{
            content: "";
            position:absolute;
            top:3em;
            right:0;
            border-left:0.5em solid #9B8651;
            border-bottom:0.5em solid #fff;}
    


Hướng dẫn tạo menu CSS3 Ribbon

Tiếp theo là tạo ribbon ở rìa bên trái và phải của menu

    	.ribbon:after, .ribbon:before {
            margin-top:0.5em;
            content: "";
            float:left;
            border:1.5em solid #fff;}
    


Hướng dẫn tạo menu CSS3 Ribbon

Cuối cùng là làm tạo góc nhọn cho ribbon.

    	.ribbon:after {
   			border-right-color:transparent;}

		.ribbon:before {
    		border-left-color:transparent;}
    


Hướng dẫn tạo menu CSS3 Ribbon

 

Nguồn: Y2Graphic - Dịch từ: jacklmoore
Nếu bạn thấy bài viết hữu ích, hãy nhấn +1 và các liên kết chia sẻ để website ngày càng phát triển hơn. Xin cám ơn bạn!

Nếu là khách, bạn phải đăng ký tài khoản và kích hoạt tài khoản để bình luận được hiển thị ở đây.
Thông tin kích hoạt gửi đến mail của bạn.

Tin mới hơn

Tin cũ hơn

Lên trên đầu