Selamat Datang

Shadow atau Bayangan dengan CSS3

Sahabat Wakaka Design, kali ini kita akan membahas tentang CSS Shadow, jika diingat beberapa tahun yang lalu, ketika ingin menciptakan efek bayangan di website, maka kita harus membuat nya di photoshop dengan menggunakan Efek Drop Shadow, lalu kita crop/slicing sesuai kebutuhan. Wew, repot ya? apa lagi hasilnya berbentuk sebuah file gambar, yang bisa memberatkan website, bisa menambah beban website karena harus me-load gambar dulu untuk sebuah bayangan.

Saat ini masa-masa itu sudah dibilang berakhir, walaupun tidak sepenuhnya berakhir.
Shadow di website bisa kita ciptakan dengan menambahkan beberapa baris CSS3 saja.

Prinsip kerja CSS Shadow adalah seperti berikut ini:

box-shadow: none | <shadow> [ , <shadow> ]*

<shadow> = inset? && [ <length>{2,4} && <color>? ]

Kita bisa melihat kalau shadow dipisahkan oleh koma (,) dan setiap koma digunakan untuk memberikan shadow vertikal atau horizontal. dan lebar ketebalan/BLUR.

Contoh seperti berikut ini:

Ini adalah contoh Shadow di CSS

Sintak nya kira-kira seperti ini:

#example1 {
 box-shadow: 10px 10px 5px #888;
}

tapi terkadang kita membutuhkan tambahan prefix jika ingin menerapkan css di Firefox dan Safari, karena perbedaan engine yang mereka miliki. Jadi sebaiknya script diatas ditulis seperti ini:

#example1 {
-moz-box-shadow: 10px 10px 5px #888;
-webkit-box-shadow: 10px 10px 5px #888;
box-shadow: 10px 10px 5px #888;
}

Berikut ini beberapa contoh potongan shadow yang bisa anda gunakan

Contoh 1:

Contoh 1
#Example_1 {
box-shadow: -5px -5px #888;
-moz-box-shadow: -5px -5px #888;
-webkit-box-shadow: -5px -5px #888;
}

 

Contoh 2:

Contoh 2
#Contoh_2 {
box-shadow: -5px -5px 5px #888;
-moz-box-shadow: -5px -5px 5px #888;
-webkit-box-shadow: -5px -5px 5px #888;
}

 

Contoh 3:

Contoh 3
#Contoh_3 {
box-shadow: -5px -5px 0 5px #888;
-moz-box-shadow: -5px -5px 0 5px #888;
-webkit-box-shadow: -5px -5px 0 5px#888;
}

 

Contoh 4:

Contoh 4
#Contoh_4 {
box-shadow: -5px -5px 5px 5px #888;
-moz-box-shadow: -5px -5px 5px 5px #888;
-webkit-box-shadow: -5px -5px 5px 5px#888;
}

 

Contoh 5:

Contoh 5
#Contoh_5 {
box-shadow: 0 0 5px #888;
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px#888;
}

 

Contoh 6:

Contoh 6
#Contoh_6 {
box-shadow: 0 0 5px 5px #888;
-moz-box-shadow: 0 0 5px 5px #888;
-webkit-box-shadow: 0 0 5px 5px#888;
}

Shadow / Bayangan ke Dalam

Jika ingin membuat Shadow / Bayangan yang arah nya kedalam dari elemen yang kita inginkan, maka kita bisa menambahkan

inset

 

Contoh nya seperti berikut ini

Contoh 7:

Contoh 7 (Inset)
#Contoh_7 {
box-shadow: inner 0 0 5px #888;
-moz-box-shadow: inset 0 0 5px #888;
-webkit-box-shadow: inset 0 0 5px#888;
}

Contoh 8:

Contoh 8 (Inset)
#Contoh_8 {
box-shadow: inset 0 0 5px 5px #888;
-moz-box-shadow: inset 0 0 5px 5px #888;
-webkit-box-shadow: inset 0 0 5px 5px#888;
}

Multiple Shadow

Kita juga bisa menerapkan beberapa efek shadow untuk satu element objek dengan memberikan tanda koma (,)

#Contoh_9 {
-moz-box-shadow: 0 0 10px 5px black, 40px -30px lime, 40px 30px 50px red, -40px 30px yellow, -40px -30px 50px blue;
-webkit-box-shadow: 0 0 10px 5px black, 40px -30px lime, 40px 30px 50px red, -40px 30px yellow, -40px -30px 50px blue;
box-shadow: 0 0 10px 5px black, 40px -30px lime, 40px 30px 50px red, -40px 30px yellow, -40px -30px 50px blue;
}





Penulis :

Website yang berisi Tutorial, Tips, Trik, Inspirasi, Opini, Cerita, Studi kasus, dan berbagai hal menarik tentang Web Design, Web Development dan Graphic Design untuk orang-orang kreatif di Indonesia. View all posts by TWD Editorial

Comments

3 thoughts on “Shadow atau Bayangan dengan CSS3

  1. Membuat Shadow atau Efek bayangan pada CSS3 « SMK NEGERI 2 INDRAMAYU says:

    […] view sourceprint? […]

  2. […] mempercantik kita menggunakan CSS, disini yang perlu dipelajari adalah CSS Box Shadow karena untuk membuat efek tumpukan itu sebenarnya menggunakan beberapa kali efek shadow dengan […]

  3. ram says:

    Wah bagus dan lengkap..
    Ijin salin utk pribadi ya…

    MAmpir juga bro
    xxx.badhot.in

Leave a Comment

XHTML: You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


Klik Tombol Like / Suka ya kawan..

Klik tombol "Like" atau "Suka" untuk mendapatkan update tutorial, tips & tricks serta info terbaru seputar dunia web design & development