Cara Membuat Efek Ribbon Pada Menu Menggunakan CSS

Hallo teman-teman DUMET School, pada tutorial kali ini saya akan mengajarkan bagaiman caranya membuat efek Ribbon pada elemen atau bagian menu yang ada di dalam sebuah Website. Efek ribbon maksudnya adalah kita akan membuat gambar pita di sisi kiri dan sisi kanan pada bagian menu tersebut. Efek ribbon ini akan kita buat menggunakan transisi CSS3 dan pseudo-element yang ada di CSS3. Dengan menggunakan efek ribbon ini kita dapat membuat tampilan website yang sangat menarik. Nah Nanti kita akan membuatnya seperti gambar di bawah ini.

Cara membuatnya sangat mudah sekali, teman-teman bisa ikuti langkah-langkahnya seperti berikut.

Pertama kita akan membuat struktur HTML nya seperti gambar di bawah ini :

Kemudian CSS nya berikut ini :

Pada CSS di atas kalian bisa lihat, saya menggunakan pseudo-element :before dan :after untuk membuat ribbon tersebut

Dan hasilnya seperti ini :

 

Download

1 Agustus 2015

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat