Cara Membuat Ribbon Pure CSS

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
Advertisement

Artikel Terkait

CEO sekaligus Content Specialist di trikricky.com. Jangan lupa bahagia.