CSS Shadow - Membuat Bayangan Dengan CSS

Pada postingan sebelumnya saya sudah membahas bagaimana cara membuat efek gradasi menggunakan CSS. Pada postingan kali ini saya akan membahas bagaimana cara membuat efek bayangan menggunakan CSS seperti pada gambar di samping ini, hanya saja gambar di samping ini sengaja saya convert ke jpg supaya teman-teman yang masih menggunakan browser versi lama tetap bisa melihat contohnya. Sama seperti postingan sebelumnya, efek ini hanya akan berjalan di browser-browser versi terbaru, untuk mozilla firefox effect ini hanya berjalan di versi 3.6 keatas.

CSS shadow adalah salah satu cara termudah untuk membuat effect bayangan untuk sebuat objek tertentu. Pada postingan kali ini saya akan mencoba membuat efek bayangan pada text dan objek dengan perintah CSS yang tidak jauh berbeda.

BOX SHADOW
Box shadow dibagi menjadi 2 jenis yaitu offset shadow dan inner shadow, untuk membuat offset shadow kita bisa membuat kode CSS seperti di bawah ini:
.shadow {
box-shadow: 5px 5px 7px #222;
-moz-box-shadow: 5px 5px 7px #222;
-webkit-box-shadow: 5px 5px 7px #222;
}Keterangan:
5px adalah ukuran x-offset
5px adalah ukuran y-offset
7px Tingkat blur shadow
#222 adalah warna bayangan
Contoh hasil bayangan ini bisa dilihat di gambar awal postingan ini.

Sedangkan untuk membuat inner shadow kita tinggal menambahkan kode inset seperti di bawah ini:
.inner-shadow {
box-shadow: inset 0 5px 7px #222;
-moz-box-shadow: inset 0 5px 7px #222;
-webkit-box-shadow: inset 0 5px 7px #222;
}Keterangan:
0 adalah ukuran x-inset
5px adalah ukuran y-inset
7px Tingkat blur shadow
#222 adalah warna bayangan
Contoh hasil CSS inner shadow bisa dilihat di bawah ini:


TEXT SHADOW
Cara menggunakan dan sistem kerja text shadow sebenarnya tidak berbeda dengan box shadow, perbedaannya kita tinggal merubah tulisan box-shadow menjadi text-shadow. Berikut ini contohnya:
.textshadow {
text-shadow: 5px 5px 7px #222;
-moz-text-shadow: 5px 5px 7px #222;
-webkit-text-shadow: 5px 5px 7px #222;
}dan untuk inner text shadow menjadi seperti ini:
.inner-textshadow {
text-shadow: inset 0 5px 7px #222;
-moz-text-shadow: inset 0 5px 7px #222;
-webkit-text-shadow: inset 0 5px 7px #222;
}
Mudah-mudahan postingan kali ini bisa bermanfaat buat teman-teman semua. Seperti biasanya, selamat mencoba :)

Artikel Terkait di Bawah posting