Pada saat artikel ini ditulis,
Box-Shadow hanya disokong oleh Safari,Chrome dan Firefox versi 3.5 keatas.Untuk mendapatkan kesan bayangan di sekitar kotak,kata arahan atau tag yang harus dipakai untuk firefox (
-moz-box-shadow) dan (
-webKit-box-shadow) untuk Safari dan Chrome.Cara menulis kod css pula adalah seperti dibawah...
box-shadow: 7px 7px 8px #818181;
Keterangan
1.
7px pertama mewakili nilai offset bayangan melintang dan 7
px kedua mewakili nilai ofset bayangan menegak.
2.
8px mewakili nilai radius/gradient bayangan kabur.
3.
#818181 mewakili kod warna.
*ketiga-tiga nilai diatas boleh diubah mengikut kesesuaian anda.
Cara membuatnya didalam blog..
4.log in ke dalam blog anda.Pilih
Layout-->Edit Html-->Expand Widget Templates
5.copy kod css dibawah ini dan paste kannya diatas kod
]]></b:skin>
.shadowbox{
box-shadow: 7px 7px 8px #818181;
font-family: Verdana;color:#ffffff;
border-top: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
border-bottom: 2px solid #999;
border-right: 2px solid #999;
-webkit-box-shadow: 7px 7px 8px #818181;
-moz-box-shadow: 7px 7px 8px #818181;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=7, offY=7, positive=true);
}
6.cara menulis style css nya didalam posting anda adalah seperti dibawah ini..
<div class="shadowbox" style="border: 1px solid black; padding: 5px;
background: red none repeat scroll 0% 0%;
width: 450px;
-moz-background-clip: border;
-moz-background-origin: padding;
-moz-background-inline-policy: continuous;">
<p>....tulis text anda disini...tulis text anda disini....tulis text anda disini...tulis text anda disini....tulis text anda disini....tulis text anda disini....tulis text anda disini...tulis text anda disini...tulis text anda disini....tulis text anda disini.
</p></div>
7.contohnya akan jadi seperti dibawah....
....tulis text anda disini...tulis text anda disini....tulis text anda disini...tulis text anda disini....tulis text anda disini....tulis text anda disini....tulis text anda disini...tulis text anda disini...tulis text anda disini....tulis text anda disini.
Ok selesai sudah.Kita juga boleh mendesign kotak agar nampak lebih menarik seperti membuat '
bulatan separa lengkong' di penjuru kotak atau dengan kata lain '
rounded corners'.
Caranya adalah...
1.copy kod ajaib dibawah ini (
biru) dan paste kan didalam kod css diatas tadi...keterangan
no.5
.shadowbox{
box-shadow: 7px 7px 8px #818181;
font-family: Verdana;color:#000000;
border-top: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
border-bottom: 2px solid #999;
border-right: 2px solid #999;
-webkit-box-shadow: 7px 7px 8px #818181;
-moz-box-shadow: 7px 7px 8px #818181;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
CCborderRadius: 20px;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=7, offY=7, positive=true);
}
2.Cara menulisnya sama seperti keterangan
no.6filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=7, offY=7, positive=true);