Make Awesome Ribbon From Css

Make Awesome Ribbon From CSS

Tutorial kali ini bagi Anda yang ingin menciptakan ribbon pada blog/web. Ribbon ini sanggup 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, kemudian 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 tamat masukkan isyarat pemanggilnya (masih dalam mode HTML bukan Compose).

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

Keterangan :

Silahkan ganti dengan Tulisan yang Anda inginkan.

Result