Home > CSS > Kode CSS Ribbon1

Kode CSS Ribbon1

July 23rd, 2012

Cara Membuat Desain Ribbon Dengan CSS

Dibawah ini adalah contoh CSS membuat ribbon dengan hasil seperti gambar diatas. Untuk menjalankan kode CSS ini, lihat HTML dasar disini

/* ribbon style */

·ribbon-wrapper {
position: relative;
border-bottom: 10px solid #ccc;
border-top: px solid #ccc;
-moz-border-bottom-colors: rgba(0, 0, 0, 0.02) rgba(0, 0, 0, 0.04) rgba(0, 0, 0, 0.06) rgba(0, 0, 0, 0.08) rgba(0, 0, 0, 0.10) rgba(0, 0, 0, 0.12) rgba(0, 0, 0, 0.14) rgba(0, 0, 0, 0.16) rgba(0, 0, 0, 0.18) rgba(0, 0, 0, 0.20);
-webkit-border-bottom-colors: rgba(0, 0, 0, 0.02) rgba(0, 0, 0, 0.04) rgba(0, 0, 0, 0.06) rgba(0, 0, 0, 0.08) rgba(0, 0, 0, 0.10) rgba(0, 0, 0, 0.12) rgba(0, 0, 0, 0.14) rgba(0, 0, 0, 0.16) rgba(0, 0, 0, 0.18) rgba(0, 0, 0, 0.20);
-moz-border-top-colors: rgba(0, 0, 0, 0.02) rgba(0, 0, 0, 0.04) rgba(0, 0, 0, 0.06) rgba(0, 0, 0, 0.08) rgba(0, 0, 0, 0.10) rgba(0, 0, 0, 0.12) rgba(0, 0, 0, 0.14) rgba(0, 0, 0, 0.16) rgba(0, 0, 0, 0.18) rgba(0, 0, 0, 0.20);
-webkit-border-top-colors: rgba(0, 0, 0, 0.02) rgba(0, 0, 0, 0.04) rgba(0, 0, 0, 0.06) rgba(0, 0, 0, 0.08) rgba(0, 0, 0, 0.10) rgba(0, 0, 0, 0.12) rgba(0, 0, 0, 0.14) rgba(0, 0, 0, 0.16) rgba(0, 0, 0, 0.18) rgba(0, 0, 0, 0.20);
}
.ribbon-front {
background-color: #F60C4B; height: 50px;
width: 220px;
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: 50px;
}

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

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

.ribbon-edge-topright,
.ribbon-edge-bottomright {
left: 200px;
border-color: transparent transparent transparent #DF0724;
}

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

.ribbon-back-left {
position: absolute;
top: 10px;
left: -40px;
width: 40px;
height: 50px;
background-color: #FA2A61; z-index: 0;
}

.ribbon-back-right {
position: absolute;
top: 0px;
right: 0px;
width: 0px;
height: 50px;
z-index: 0;
}

CSS Ribbon

Related Posts Plugin for WordPress, Blogger...

CSS , ,


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