Home > CSS > Kode CSS Ribbon2

Kode CSS Ribbon2

July 23rd, 2012

Cara Membuat Desain Ribbon Dengan CSS

Kode CSS Ribbon – CSS dibawah adalah kode untuk ribbon dengan hasil seperti diatas. Untuk melihat kode HTML dasar untuk ditempatkan pada elemen yang akan ditambahkan atau overlapped, disini.

/* ribbon style */

.ribbon-wrapper {
position: relative;
}
.ribbon-front {
background-color: #59F0FA; height: 40px;
width: 140px;
position: relative;
left:-20px;
z-index: 2;
}

.ribbon-front,
.ribbon-back-left,
.ribbon-back-right
{
-moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
-khtml-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
-webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
-o-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
}

.ribbon-edge-topleft,
.ribbon-edge-topright,
.ribbon-edge-bottomleft,
.ribbon-edge-bottomright {
position: absolute;
z-index: 1;
border-style:solid;
height:0px;
width:0px;
}

.ribbon-edge-topleft,
.ribbon-edge-topright {
}

.ribbon-edge-bottomleft,
.ribbon-edge-bottomright {
top: 40px;
}

.ribbon-edge-topleft,
.ribbon-edge-bottomleft {
left: -20px;
border-color: transparent #0B98A8 transparent transparent;
}

.ribbon-edge-topleft {
top: -5px;
border-width: 5px 10px 0 0;
}
.ribbon-edge-bottomleft {
border-width: 0 10px 0px 0;
}

.ribbon-edge-topright,
.ribbon-edge-bottomright {
left: 110px;
border-color: transparent transparent transparent #0B98A8;
}

.ribbon-edge-topright {
top: 0px;
border-width: 0px 0 0 10px;
}
.ribbon-edge-bottomright {
border-width: 0 0 5px 10px;
}

.ribbon-back-left {
position: absolute;
top: -5px;
left: -510px;
width: 500px;
height: 40px;
background-color: #92FAF3; z-index: 0;
}

.ribbon-back-right {
position: absolute;
top: 5px;
right: -510px;
width: 500px;
height: 40px;
background-color: #92FAF3; z-index: 0;
}

CSS Ribbon

Related Posts Plugin for WordPress, Blogger...

CSS , ,


  1. No comments yet.
  1. No trackbacks yet.