Tutorial Singkat CSS Box Shadow

Kembali lagi dengan pelajaran seputar css, dan kali ini saya akan berikan tutorial singkat tentang css box shadow. Box shadow ini dapat sobat gunakan pada kotak postingan, sidebar atau dapat juga sobat gunakan sebagai pemanis dalam artikel blog sobat. Seperti contoh dibawah ini :

 

Support Firefox, Safari, Chrome, Opera dan IE9


kode css untuk contoh diatas adalah : 

#contoh {

-moz-box-shadow: 10px 10px 5px #222;

-webkit-box-shadow: 10px 10px 5px #222;

box-shadow: 10px 10px 5px #222;

}

 

Adapun 4 bagian yang terdapat dalam box shadow adalah :

  • Horizontal offset : Jika nilainya positif maka bayangan akan berada disebelah kanan kotak, dan jika negatif maka bayangan akan berada disebelah kiri kotak.
  • Vertikal offset : Jika nilainya positif maka bayangan akan berada dibawah kotak, dan jika negatif maka bayangan akan berada diatas kotak.
  • Blur radius : Jika nol maka akan seperti bayangan biasa, dan jika nilainya semakin besar maka bayangan akan tampak menjadi blur.
  • Warna dari bayangan

 

Berikut 6 contoh css box shadow yang bisa sobat pelajari dan gunakan :

 

A
B
C
D
E
F

 

Kode css untuk ke-6 contoh box shadow diatas adalah :

 

#Contoh_A {
-moz-box-shadow: -5px -5px #222;
-webkit-box-shadow: -5px -5px #222;
box-shadow: -5px -5px #222;
}

 

#Contoh_B {
-moz-box-shadow: -5px -5px 5px #222;
-webkit-box-shadow: -5px -5px 5px #222;
box-shadow: -5px -5px 5px #222;
}

 

#Contoh_C {
-moz-box-shadow: -5px -5px 0 5px #222;
-webkit-box-shadow: -5px -5px 0 5px #222;
box-shadow: -5px -5px 0 5px #222;
}

 

#Contoh_D {
-moz-box-shadow: -5px -5px 5px 5px #222;
-webkit-box-shadow: -5px -5px 5px 5px #222;
box-shadow: -5px -5px 5px 5px #222;
}

 

#Contoh_E {
-moz-box-shadow: 0 0 5px #222;
-webkit-box-shadow: 0 0 5px #222;
box-shadow: 0 0 5px #222;
}

 

#Contoh_F {
-moz-box-shadow: 0 0 5px 5px #222;
-webkit-box-shadow: 0 0 5px 5px #222;
box-shadow: 0 0 5px 5px #222;
}

 

Jika sobat ingin menambahkan box shadow pada kotak postingan sobat, maka cari saja kode seperti di templates sobat :

 

.Post {…………………………dst

}

 

kemudian tambahkan salah satu kode diatas sehingga hasilnya kurang lebih akan seperti ini :

 

.post {……………………;

-moz-box-shadow: 0 0 5px 5px #222;
-webkit-box-shadow: 0 0 5px 5px #222;
box-shadow: 0 0 5px 5px #222;
}

 

Bagaimana jika bayangan berada didalam kotak (inner shadow), yang harus sobat tambahkan hanya kode inset pada setiap bagian, contoh :

 

F

 

dan kodenya adalah :

 

#Contoh_F {
-moz-box-shadow: inset 0 0 5px 5px #222;
-webkit-box-shadow: inset 0 0 5px 5px #222;
box-shadow: inset 0 0 5px 5px #222;
}

 

Css box shadow bekerja sempurna pada browser mozilla firefox, untuk browser lain hanya beberapa saja yang dapat berfungsi dengan sempurna. Semoga bermanfaat .. tetap belajar ya biar tambah pintar  smile_wink

Berlangganan artikel terbaru via Email
Artikel Lainnya :

11 comments

14 Januari 2011 03.52

thanks post :D

16 Januari 2011 22.44

saya sudah berhasil mempraktekannya mas dody, silakan mampir kesini ya.. :)

makasie

16 Januari 2011 22.46

keren tipsnya, bikin blog kita jadi terlihat semangat yach.
Thank you for sharing yaa...

18 Januari 2011 13.38

Tak bukmark dulu gan...Ntar di coba deh, lagi setting2 tampilan neh...Mampir y bro...

wahhh bagus nihh mas,,,
mksi infonya..
langsung ke tkp ahh..

30 Januari 2011 16.19

mas dody, cara pasang icon pada judul sidebar dan judul footer kayak punya mas dody bagaimana ya ??
Coba lihat di http://wafariq.blogspot.com/

30 Januari 2011 19.15

@wandhy : silahkan baca di disini

15 Maret 2011 12.12

wah bagus juga nih tutorialnya.,,.,.,.,.apalagi tips ini saya cari2 nih makasih you,oz ada kontes Seo disini mohon dilihat

<a href='http://www.ilham-am.co.cc/2011/02/smaker.html' rel='nofollow>KONTES SEO SMAKER 2011</a>

1 Juni 2011 17.54

Terima kasih brow,,ini yang aku cari2 ternyata adanya dblog anda thank bnget ya,oh ya kalau ada waktu tlg dunk kunjungi blog saya,bkan apa2 aq cma butuh penilaian kurang apa2 nya,,,seblumnya makasih,WWW.F-sblog.blogspot.com

13 Oktober 2011 09.23

bagus... tutor yang lengkap! ^^

15 Februari 2013 23.52

suwon sudah aku terapkan bagian tertentu, mampir ke web aq bro

Poskan Komentar

Reader Community

Recent Comments