Kode Praktis CSS3: Membuat Bayangan pada Objek atau Teks dengan Efek Blur

Ditulis oleh Muhammad Erfan, dipublikasi sejak 7 Oktober 2016 pukul 11:54, disimpan dalam kategori CSS, Kode Praktis. Ingin mengomentari tulisan ini? Ada 1 komentar.

Kode Praktis berikut ini bisa kita gunakan untuk membuat objek atau teks memiliki bayangan dengan efek blur. Maksud dari blur tersebut adalah samar-samar šŸ˜€ tapiĀ bukan remang-remang ya šŸ˜‰

Efek bayangan pada halaman HTMLĀ dibentukĀ dengan bantuanĀ CSS versi 3. Efek bayangan ini ada 2 macam, yaitu text-shadow dan box-shadow.

text-shadow

Langsung saja, kode praktisnya sebagai berikut untuk text-shadow:

h1 {
   color: #FFFFFF;
   text-shadow: 2px 2px 4px #000000;
}

Gambaran hasilnya kira-kira seperti ini:

Bayangan dengan Efek Blur pada Teks

box-shadow

Oke, berikutnya untuk box-shadow:

div {
   color: #FF5555;
   padding: 30px;
   margin: 20px;
   box-shadow: 0px 0px 10px #000000;
}

Hasilnya seperti gambar ini.

Bayangan dengan Efek Blur pada Objek

Demikian kode praktis bayangan dengan efek blur,Ā tunggu kode praktis lainnya šŸ˜€

Tinggalkan Balasan 1

Your email address will not be published. Required fields are marked *