-->


Variasi CSS3 Box Shadow

Utak-atik CSS3 lagi aja bro. Sekarang mulai aja dengan trik membuat bayangan kotak atau dalam bahasa gaulnya Box Shadow hehe. Trik ini lumayan bagus dan udah banyak yang menggunakannya mulai Blogger yang masih newbie seperti aku hingga yang udah bangkotan :-D. Kegunaannya apa seh trik ini, kok dari kemaren yang diulas cuma CSS3 doang. Apa kagak ada yang laen. Nah, itu dia pertanyaan yang cukup bagus, dan aku akan jawab sesuai kemampuan yang aku miliki. Ya maklumlah wong ya masih newbie (( pura-pura )). Kegunaannya selain mempercantik dengan memberikan bayangan kepada target dalam hal ini gambar, tentu saja ada hal laen yang keuntungannya lebih besar yakni membuat blog loadnya cepet. Seperti yang udah aku ulas kemaren, tirulah web-web para master, meski banyak gadget tetep aja loadnya cepet. Sebabnya, kebanyakan dari mereka dan malah hampir seluruh dari mereka menggunakan trik CSS3 ini.


Sekarang mulai aja ulasan tentang Box Shadow ini. Kita sebaiknya mulai dengan bayangan yang ada di -- atas sebelah kanan -- bawah sebelah kanan -- bawah sebelah kiri -- atas sebelah kiri

Bayangan sebelah kanan atas ::

Ini yang contoh ::
Bayangan di atas sebelah kanan
Cukup mudah khan
Kodenya copas dibawah aja


<div style="background:#00bfff; border:10px inset #000000; margin:0px 30px 0px 0px; padding:0px 5px 0px 5px; -moz-border-radius-topright:30px; -moz-border-radius-topleft:30px; -webkit-border-radius-top-right:30px; -webkit-border-radius-top-left:30px; -webkit-box-shadow: 26px -21px 14px rgba(0, 0, 0, 0.5); -moz-box-shadow: 26px -21px 14px rgba(0, 0, 0, 0.5); box-shadow: 26px -21px 14px rgba(0, 0, 0, 0.5);">
Ini Kodenya, tinggal dicopas doang
</div>



Bayangan sebelah kanan bawah

Ini yang contoh ::
Bayangan di bawah sebelah kanan
Cukup mudah khan
Kodenya copas dibawah aja


<div style="background:-moz-linear-gradient(0% 90% 90deg, transparent, #8FBC8B 100%); border:10px inset #000000; margin:0px 30px 0px 0px; padding:0px 5px 0px 5px; -moz-border-radius-topright:30px; -moz-border-radius-topleft:30px; -webkit-border-radius-top-right:30px; -webkit-border-radius-top-left:30px; -webkit-box-shadow: 23px 24px 14px rgba(0, 0, 0, 0.5); -moz-box-shadow: 23px 24px 14px rgba(0, 0, 0, 0.5); box-shadow: 23px 24px 14px rgba(0, 0, 0, 0.5);">
Ini Kodenya, tinggal dicopas doang
</div>


Bayangan sebelah kiri bawah

Ini yang contoh ::
Bayangan di bawah sebelah kiri
Cukup mudah khan
Kodenya copas dibawah aja


<div style="background:-moz-linear-gradient(0% 90% 90deg, transparent, #E9967A 100%); border:10px inset #000000; margin:0px 0px 0px 30px; padding:0px 5px 0px 5px; -moz-border-radius-topright:30px; -moz-border-radius-topleft:30px; -webkit-border-radius-top-right:30px; -webkit-border-radius-top-left:30px; -webkit-box-shadow: -26px 21px 14px rgba(0, 0, 0, 0.5); -moz-box-shadow: -26px 21px 14px rgba(0, 0, 0, 0.5); box-shadow: -26px 21px 14px rgba(0, 0, 0, 0.5);">
Ini Kodenya, tinggal dicopas doang
</div>


Bayangan sebelah kiri atas

Ini yang contoh ::
Bayangan di atas sebelah kiri
Cukup mudah khan
Kodenya copas dibawah aja


<div style="background:-moz-linear-gradient(0% 90% 90deg, transparent, #DAA520 100%); border:10px inset #000000; margin:0px 0px 0px 30px; padding:0px 5px 0px 5px; -moz-border-radius-topright:30px; -moz-border-radius-topleft:30px; -webkit-border-radius-top-right:30px; -webkit-border-radius-top-left:30px; -webkit-box-shadow: -26px -21px 14px rgba(0, 0, 0, 0.5); -moz-box-shadow: -26px -21px 14px rgba(0, 0, 0, 0.5); box-shadow: -26px -21px 14px rgba(0, 0, 0, 0.5);">
Ini Kodenya, tinggal dicopas doang
</div>


Nah sekarang tinggal kalian utak-atik sendiri tu CSS3-nya .. bisa diganti warna bordernya, backgroundnya, derajat sudut lengkung dan tebal tipisnya bayangan dan nggak ketinggalan radius bayangan bisa dibuat semakin jauh atau dekat dari bidang utama .. sekian dan silakan sobat blogger semua bisa mengerjakannya .. salam !!!



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