Kamis, 22 September 2011

Cara Menambahkan efek di garis blog dengan css box shadow

assalamualaikum ..
ne buat yang suka utak atik blog , yu kita main modif blog kita dengan css, css yang saya bahas disini tentang css box shadow, stelah google di berbagai sumber saya rasa css ini bagus di gunakan di blog kita, liat demonya disini

Box shadow ini dapat mas bro 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#126709;
-webkit-box-shadow: -5px -5px#126709;
box-shadow: -5px -5px#126709;
}

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

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

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

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

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

Jika mas bro 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#126709;
-webkit-box-shadow: 0 0 5px 5px#126709;
box-shadow: 0 0 5px 5px#126709;
}

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

F

dan kodenya adalah :

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

misalkan mas bro pengen judul sidebarnya seperti di blog demo, kaya ada efek nya , masbro harus cari kode

.sidebarright h2,.sidebarleft h2, .feature h2{

atau yang mirip mirip gitu ,. kmudian mas bro tambahkan di bawah nya css yang diatas ..

misal

.sidebarright h2,.sidebarleft h2, .feature h2{
text-align:center;
color: #126709;
border-bottom:1px solid #126709;
font-family:kristen itc;
font-size: 16px;
text-transform:uppercase;
font-weight: kristen itc;
margin: 0px 0px 5px;
padding: 3px;
-moz-box-shadow: 0 0 5px 5px #126709;
-webkit-box-shadow: 0 0 5px 5px #126709;
box-shadow: 0 0 5px 5px #126709;
}

Css box shadow bekerja sempurna pada browser mozilla firefox, untuk browser lain hanya beberapa saja yang dapat berfungsi dengan sempurna. Semoga bermanfaat

0 komentar:

Poskan Komentar