Text Shadow CSS3

Membuat tulisan dengan adanya bayangan akan membuat tulisan menjadi mudah dibaca jika warna latar yang digunakan sama dengan warna tulisan. Lalu bagaimana cara mengaplikasikannya kedalam website? Ya, mudah saja.

Buka Adobe Photoshop, buatlah sebuah tulisan, klik kanan pada layer tulisan, pilih Blending Options... dan pilih Drop Shadow. OK. Sangat mudah. Lalu bagaimana dengan CSS? Apa kita bisa membuatnya dengan CSS? Tentu. Di CSS3 pasti bisa!

Kita hanya tinggal memanggil properties text-shadow pada CSS dan tadaaa tulisan yang kita buat memilki bayangan! Langsung saja yuk!

See the Pen twudJ by Dumet_School (@dumet_school) on CodePen.

Lihat! dengan sedikit tulisan kita bisa membuat tulisan yang kita buat menjadi berbayang.

Penjelasan :

maksud dari text-shadow:5px 5px 7px #0000FF; adalah

5px pertama : jarak ke kanan

5px kedua : jarak ke bawah

7px : opacity (transparan) semakin besar  pixelnya maka akan semakin transparan bayangannya

#0000FF : warna bayangan

Sudah paham kan? Semoga bermanfaat ya :)