Cara Membuat Ribbon Pure CSS

Dengan menggunakan efek ribbon ini kita dapat membuat halaman postingan dan halaman statis blog lebih menarik. Contoh Penampakan ribbon bisa anda lihat seperti gambar berikut:

Selamat Datang

Karena ribbon ini Pure CSS, langkah pertama kita akan membuat CSS terlebih dahulu. Cara membuatnya sangat mudah sekali, anda bisa ikuti langkah-langkahnya dibawah ini.

Cari kode </style> yang pertama dan letakan kode CSS berikut diatasnya:

/* Pure CSS Ribbon by Ricky */
.ribbon-rsp{position:relative;z-index:1;padding:1em 2em}
.rspribbon{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}
.rspribbon:before,.rspribbon:after{content:"";position:absolute;display:block;bottom:-1em;border:1.5em solid #d74545;z-index:-1}
.rspribbon:before{left:-2em;border-right-width:1.5em;border-left-color:transparent}
.rspribbon:after{right:-2em;border-left-width:1.5em;border-right-color:transparent}
.rspribbon .ribbon-isi:before,.rspribbon .ribbon-isi:after{content:"";position:absolute;display:block;border-style:solid;border-color:#b23232 transparent transparent transparent;bottom:-1em}
.rspribbon .ribbon-isi:before{left:0;border-width:1em 0 0 1em}
.rspribbon .ribbon-isi:after{right:0;border-width:1em 1em 0 0}

Simpan terlebih dahulu template anda kemudian letakan kode HTML pemanggil berikut di dalam mode HTML bukan Compose baik di Halaman statis maupun di halaman postingan.

<div class="ribbon-rsp">
<h1 class="rspribbon">
<strong class="ribbon-isi">Ini adalah isi teks ribbon</strong>
</h1>
</div>

Sebelum menyimpan anda bisa pratinjau dulu html diatas untuk memastikan kode bekerja. Kemudian simpan.

Demikian Cara Membuat Ribbon Pure CSS dari saya kali ini, moga bermanfaat.

Advertisement

Rekomendasi :

Advertisement