Pure CSS Corner Ribbon

CSS3 Corener Ribbon
under88 - Kali ini saya akan mencoba menjelaskan cara membuat CSS Corner Ribbon yang pada dasarnya untuk memberikan tanda pada sebuah content atau widget tertentu. dalam hal ini saya hanya akan mempergunakan CSS3 sebagai basicnya tanpa menggunakan Image(gambar). lihat demo...

View Page Demo

HTML

Banyak penyimpanan markup yang bisa di lakukan
<div class="wrapper">
  <div class="ribbon-wrapper-green">
     <div class="ribbon-green">UNDER</div>
  </div>
</div>​

CSS Wrapper
Style warna hijau yang mungkin bisa anda kembangkan sendiri sesuai selera.
.wrapper {
  margin: 50px auto;
  width: 280px;
  height: 370px;
  background: white;
  border-radius: 10px;
  -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
  -moz-box-shadow:    0px 0px 8px rgba(0,0,0,0.3);
  box-shadow:         0px 0px 8px rgba(0,0,0,0.3);
  position: relative;
  z-index: 90;
}
Content yang mencangkup keseluruhan isi. dengan penempatan ini bisa di lakukan di berbagai tempat seperti .post , .content-wrapper , #main-wrapper dan lain-lain . Yang perlu di perhatikan adalan position: relative;. Saya sarankan itu tidak perlu ada perubahan position. karena bila di ganti maka posisi bukan lagi di tempat yang sesuai. mungkin akan muncul di atas header atau di samping. tingkat lanjut tulis komentar.
CSS Corner-Ribbon Style
.ribbon-wrapper-green {
  width: 85px;
  height: 88px;
  overflow: hidden;
  position: absolute;
  top: -3px;
  right: -3px;
}

.ribbon-green {
  font: bold 15px Sans-Serif;
  color: #333;
  text-align: center;
  text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
  -webkit-transform: rotate(45deg);
  -moz-transform:    rotate(45deg);
  -ms-transform:     rotate(45deg);
  -o-transform:      rotate(45deg);
  position: relative;
  padding: 7px 0;
  left: -5px;
  top: 15px;
  width: 120px;
  background-color: #BFDC7A;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45));
  background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45);
  background-image:    -moz-linear-gradient(top, #BFDC7A, #8EBF45);
  background-image:     -ms-linear-gradient(top, #BFDC7A, #8EBF45);
  background-image:      -o-linear-gradient(top, #BFDC7A, #8EBF45);
  color: #6a6340;
  -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
  -moz-box-shadow:    0px 0px 3px rgba(0,0,0,0.3);
  box-shadow:         0px 0px 3px rgba(0,0,0,0.3);
}

.ribbon-green:before, .ribbon-green:after {
  content: "";
  border-top:   3px solid #6e8900;
  border-left:  3px solid transparent;
  border-right: 3px solid transparent;
  position:absolute;
  bottom: -3px;
}

.ribbon-green:before {
  left: 0;
}
.ribbon-green:after {
  right: 0;
}​
ket : tanpa harus ada perubahan .. kecuali background ,border dan box shadow yang bisa di kreasikan dengan tampilan yang anda inginkan. tingkat lanjut tulis komentar .

Lihat Demo

reference

16 comments:

  1. keren kang ribbonnya, siap pasang..
    oiya kang tanya dong, gimana sih cara membuat halaman muka/homepage kayak di blog akang??

    ReplyDelete
    Replies
    1. sorry kang..saya ralat pertanyaaanya, maksud saya bagaimana cara membuat ARTIKEL TERBARU di homepage akang yang tiga kolom itu?? sebelumnya terimakasih kang

      Delete
  2. This comment has been removed by the author.

    ReplyDelete
  3. kang upami di blog abdi kumahanya?
    bade masangna dina postingan homepage anu kotak2 leutik.

    cek kang di ►► http://bangbungg.blogspot.com

    ReplyDelete
  4. wah keren gan..:)
    ane follow dulu deh buat nambah ilmu..:)

    ReplyDelete
  5. masih bingung bang ngedit css nya =(

    ReplyDelete
  6. There are some quality design site which are sample show in this site. You can submit fresh site.free download themes

    ReplyDelete
  7. Lists are very helpful in conveying a set of either numbered or bulleted points. This tutorial teaches you how to control list type, position, style etc Read more
    Check this siteTeKslate for indepth CSS training.
    Go here if you’re looking for information on CSS Training.

    ReplyDelete


  8. This is an amazing post. Great work compiling the most complete list of influential marketing authority sources.

    Angularjs Training
    Hadoop Training
    Tableau Training
    Informatica Training
    SAP Success Factors Training
    Unix Shell Scripting Training

    ReplyDelete

Perhatian !! Komentar Pada Bulan September 2012 belum bisa di balas.
di karenakan semua admin sedang sibuk dengan urusan kulliahnya.
semoga setelah akhir bulan artikel dan komentar akan segera di update.


terima kasih atas perhatiannya sekali lagi kami minta maaf yang sebesar-besarnya.

 
loading...
Top