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

43 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. 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
  7. Thank for sharing the information Excellent article Cool, Looking ahead to reading a lot Bala Guntipalli Thanks for posting.

    ReplyDelete
  8. I am waiting for your more posts like this or related to any other informative topic.
    SAP Hana Interview Questions and Answers
    PHP Interview Questions and Answers

    ReplyDelete
  9. very informative blog and useful article thank you for sharing with us , keep posting learn more Technology

    Tableau online Training

    ReplyDelete
  10. you are able to take the help of experts making a call at QuickBooks Payroll Support Number
    mobile phone number. Well! If you’re not in a position to customize employee payroll in

    ReplyDelete
  11. This comment has been removed by the author.

    ReplyDelete

  12. Its really an Excellent post. I just stumbled upon your blog and wanted to say that I have really enjoyed reading your blog. Thanks for sharing the information .Hope more posts from you .I also want to share about best online linux course and in recent times also linux online course

    ReplyDelete

  13. Pretty article! I found some useful information in your blog, it was awesome to read, thanks for sharing this great content to my vision, I also want to share something sap mm online training. keep sharing.


    ReplyDelete
  14. This is an awesome post.Really very informative and creative contents about Java. These concept is a good way to enhance the knowledge.I like it and help me to development very well.Thank you for this brief explanation and very nice information.Well, got a good knowledge.
    Software Testing Training in Chennai | Software Testing Training in Anna Nagar | Software Testing Training in OMR | Software Testing Training in Porur | Software Testing Training in Tambaram | Software Testing Training in Velachery

    ReplyDelete
  15. Good job! Fruitful article. I like this very much. It is very useful for my research. It shows your interest in this topic very well. I hope you will post some more information about the software. Please keep sharing!!

    ReplyDelete
  16. I have bookmarked your blog, the articles are characteristic expanded than substitute related websites.. gratitude for a warm blog! Quick Heal Antivirus Free Download Full Version With Key

    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