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

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 šŸ˜€

Share

Muhammad Erfan

aslinya karyawan, suka belajar pemrograman, senang berbagi ilmu melalui tulisan, lagi usaha menghasilkan uang online :cool:

You may also like...

1 Response

  1. 27 Mei 2017

    […] pernah dibahas tentang kode praktis CSS versi 3 tentang membuat bayangan dengan efek blur, baik pada teks maupun pada objek. Kali ini kita akan bahas kode praktis CSS tentang cara membuat […]

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *