Ini dia yang kamu cari

Ada 3 artikel dalam topik CSS3.

Tutorial CSS: Membuat Style untuk Badge Notifikasi

Badge notifikasi sering kali kita temukan dalam website maupun aplikasi. Terkadang badge tersebut menggoda kita untuk mengelik link atau tombol notifikasi. Itulah fungsinya, agar user tau, di sana ada sesuatu yang baru. Badge biasanya dilengkapi dengan angka penghitung. Framework antarmuka semacam Bootstrap sudah menyediakan class sendiri untuk pembuatan badge. Namun, karena badge yang dihasilkan tidak sesuai seperti harapan, maka kita harus membuatnya sendiri. Kode CSS.badge-notif { position:relative; } .badge-notif[data-badge]:after { content:attr(data-badge); position:absolute; top:-10px; right:-10px; font-size:.7em; background:#e53935; color:white; width:18px; height:18px; text-align:center; line-height:18px; border-radius: 50%; }Pada kode CSS di atas, kita mengambil isi badge dari atribut data-badge. Untuk posisi badge dapat diatur dalam properti top dan right. Warna, ukuran, font, background dll. bisa diatur sendiri sesuai selera. Penggunaan di HTMLElemen yang ingin menggunakan badge yang dibuat tadi harus menambahkan class badge-notif dan sebuah atribut data-badge untuk konten badge-nya. Contoh: Pada Tombol <button class=“badge-notif” data-badge=“12”>Notifikasi</button>Pada Link <a href="#!" class=“badge-notif” data-badge=“22”>Pesan</a>DemoJS Bin on jsbin.com

Tutorial CSS: Cara Membuat Garis di CSS

Pada tutotiral ini, kamu akan belajar cara membuat garis dengan properti border di CSS.

Tutorial CSS: Cara Membuat Effek Bayangan dengan CSS

Properti untuk membuat bayangan (shadow), mulai dikenalkan pada CSS3. Properti tersebut adalah box-shadow dan text-shadow. Keduanya sama-sama berfungsi untuk membuat bayangan. Properti box-shadow digunakan untuk membuat bayangan untuk kotak atau elemen kontainer. Sementara itu, properti text-shadow digunakan untuk membuat bayangan pada teks. Membuat Bayangan untuk TeksLangsung saja ke contoh, silakan buat style seperti ini.