Make Awesome Ribbon From CSS

Make Awesome Ribbon From CSS

Tutorial kali ini bagi Anda yang ingin membuat ribbon pada blog/web. Ribbon ini dapat Anda tempatkan pada halaman yang Anda inginkan. Caranya sih sangat mudah.

Baca Juga: Cara Membuat Icon Flat Ui Menggunakan CSS

Cara Membuat Ribbon Keren Dengan CSS

1. Siapkan Halaman yang Ingin di Pasangi Ribbon.

2. Ubah Compose menjadi HTML, lalu letakkan CSS berikut pada halaman tersebut.

<style type='text/css'>
.css-new-ribbon{position:relative;z-index:1;padding:1em 2em}
.bsrribbon{font-size:120%!important;text-transform:uppercase;width:60%;position:relative;background:#f35b5b;color:#fff;text-align:center;padding:1em 2em;margin:2em auto 3em}
.bsrribbon:before,.bsrribbon:after{content:"";position:absolute;display:block;bottom:-1em;border:1.5em solid #d74545;z-index:-1}
.bsrribbon:before{left:-2em;border-right-width:1.5em;border-left-color:transparent}
.bsrribbon:after{right:-2em;border-left-width:1.5em;border-right-color:transparent}
.bsrribbon .ribbon-isi:before,.bsrribbon .ribbon-isi:after{content:"";position:absolute;display:block;border-style:solid;border-color:#b23232 transparent transparent transparent;bottom:-1em}
.bsrribbon .ribbon-isi:before{left:0;border-width:1em 0 0 1em}
.bsrribbon .ribbon-isi:after{right:0;border-width:1em 1em 0 0}
</style>

3. Setelah selesai masukkan kode pemanggilnya (masih dalam mode HTML bukan Compose).

<div class="css-new-ribbon">
<h1 class="bsrribbon">
<strong class="ribbon-isi">Opick Weblog</strong>
</h1>
</div>

Keterangan :

Silahkan ganti Opick Weblog dengan Tulisan yang Anda inginkan.

Result

Bagikan Artikel ini