-->


Trik CSS3 Box Shadow Fitur Baru Penghias Box

Teknik CSS 3 sekarang sudah sangat populer di kalangan blogger. Nggak kecuali aku neh. Beberapa waktu lalu, emang sempet dibuat pusing juga dengan teknik CSS 3. Apa itu teknik CSS 3 dan apa manfaatnya. Sebelumnya aku minta maaf kepada blogger yang udah master / udah senior. Masih banyak kok blogger yang udah diatas aku dan malah udah mahir menggunakan teknik ini. Aku masih belajar dan ingin berbagi dengan kalian. Mohon untuk melewati artikel ini, bila para master blogger udah sangat paham. Aku cuma pengin share aja.

Teknik CSS 3 kalo menurut aku tu, semacam teknik untuk mempercantik gambar, dari gambar yang semula masih berbentuk kotak bisa ditambahi dengan efek berbayang. Dan fungsinya seh, membuat gambar itu menjadi lebih keren dan indah dipandang mata. Selain itu, aku juga pernah baca, kalo CSS 3 itu juga bisa untuk membuat border melengkung. Tapi sementara ini, aku cuma mau konsen ke trik berbayang pada gambar. ::-->>

Kodenya mungkin seperti ini ::>>

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


Terus bagaimana bila kode itu bisa dibaca oleh browser yang compatible yakni Mozilla Firefox dan Safari / Chrome

Sepertinya harus menambahkan seperti ini ::-->>

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

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


Catatan : Moz untuk Mozilla dan Webkit untuk Safari

Langsung aja ya -->>

Contoh Gambar A
#boxshadow {
-moz-box-shadow: -5px -5px #888;
-webkit-box-shadow: -5px -5px #888;
box-shadow: -5px -5px #888;
}

Kalau ditulis seperti ini ntar di Edit HTML blog kita .. karena itu kode CSS 3, mungkin kayak dibawah ini gan .. supaya bisa di baca di blog -->>

<style type='text/css'>
.boxshadow {
-moz-box-shadow: -5px -5px #888;
-webkit-box-shadow: -5px -5px #888;
box-shadow: -5px -5px #888;
}
</style>


Contoh Gambar B
#boxshadow {
-moz-box-shadow: -5px -5px 5px #888;
-webkit-box-shadow: -5px -5px 5px #888;
box-shadow: -5px -5px 5px #888;
}

<style type='text/css'>
.boxshadow {
-moz-box-shadow: -5px -5px 5px #888;
-webkit-box-shadow: -5px -5px 5px #888;
box-shadow: -5px -5px 5px #888;
}
</style>



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

<style type='text/css'>
.boxshadow {
-moz-box-shadow: -5px -5px 0 5px #888;
-webkit-box-shadow: -5px -5px 0 5px #888;
box-shadow: -5px -5px 0 5px #888;
}
</style>


#Contoh Gambar D {
-moz-box-shadow: -5px -5px 5px 5px #888;
-webkit-box-shadow: -5px -5px 5px 5px#888;
box-shadow: -5px -5px 5px 5px #888;
}

<style type='text/css'>
.boxshadow {
-moz-box-shadow: -5px -5px 5px 5px #888;
-webkit-box-shadow: -5px -5px 5px 5px#888;
box-shadow: -5px -5px 5px 5px #888;
}
</style>


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

<style type='text/css'>
.boxshadow {
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px #888;
box-shadow: 0 0 5px #888;
}
</style>


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

<style type='text/css'>
.boxshadow {
-moz-box-shadow: 0 0 5px 5px #888;
-webkit-box-shadow: 0 0 5px 5px#888;
box-shadow: 0 0 5px 5px #888;
}
</style>


Terus cara membuatnya seperti ini .. biar jelas semuanya -->>
1. Langsung aja ke Edit HTML
2. Cari kode </head>
3. Tempelkan salah satu kode CSS diatas kode </head>
4. Untuk memanggil kode itu ke dalam gambar .. pada gambar yang kita taruh di postingan .. diberi kode ini ::-->>

<img src="http://3.bp.blogspot.com/-qm9IV9jM0U0/ThsF6kG3l5I/AAAAAAAAASw/T68LjXTWnYU/s400/CSS.jpg" border="0" id="BLOGGER_PHOTO_ID_5628098663012603794"/>

Jadinya kayak gini -- ditambah class="boxshadow"
<img class="boxshadow" src="http://3.bp.blogspot.com/-qm9IV9jM0U0/ThsF6kG3l5I/AAAAAAAAASw/T68LjXTWnYU/s400/CSS.jpg" border="0" id="BLOGGER_PHOTO_ID_5628098663012603794"/>

Itu doang .. dan kalian bisa liat pic diatas dari artikel ini .. ada efek bayangan khan ?? Sebelumnya aku minta maaf kalo ada yang salah dan agak ribet memahaminya .. tapi semoga dengan membaca pelan-pelan, kita semua bisa mengerti maksudnya .. makasih udah mampir sobat blogger semua. Aku belajar dan memahami dikit demi sedikit dari ini sobat blogger -- cek bawah ::-->>
http://www.css3.info/preview/box-shadow/

Blogger Yang Baek, Meninggalkan Jejak Berupa Komentar

Agan jadi Cuapers ke 0, CONGRATULATE !

:10 :11 :12 :13
:14 :15 :16 :17
:18 :19 :20 :21
:22 :23 :24 :25
:26 :27 :28 :29
:30 :31 :32 :33
:34 :35 :36 :37
:38 :39 :40 :41
:42 :43 :44 :45
:46 :47 :48 :49
:50 :51 :52 :53
:54 :55 :56 :57
:58

Jangan lupa ada emo Kaskus diatas CommentBox Ini. Langsung dicoba gan ? Entar ane kasih cendol dah.

Protected by Copyscape Web Plagiarism Software
English French German Spain Italian DutchRussian Portuguese Japanese Korean Arabic Chinese Simplified