Buat bayangan dibawah kotak

Fuhh..terasa berat jari-jemari penulis nak membuat posting baru dalam blog ini.Maklumlah dah lama tak berblogging.Dah menjadi sesawang pun blog kesayangan penulis ini.Dah lama benar ditinggalkan tanpa bertuan.Lihat sajelah header blog ini..masih lagi di bulan Ramadan tahun lepas.Oklah, buat tatapan pengikut blog ini, penulis coretkan tutorial css yang bertajuk "buat bayangan kabur dibawah kotak" atau dalam bahasa lain "box with blur shadow".

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 7px 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.6

hasilnya....

Jika anda ingin membuat bayangan hanya di bahagian bawah kotak (horizontal offset), kita hanya perlu membuat perubahan kecil dengan menambah nilai negatif  di dalam css box shadow.Lihat contoh dibawah..

1.copy kod css dibawah ini dan paste kannya diatas kod ]]></b:skin>

.shadow3{

box-shadow: 7px 7px 8px #818181;

font-family: Times;color:#ffffff;

-webkit-box-shadow: 0px 20px 10px -10px #888;

-moz-box-shadow: 0px 20px 10px -10px #888;

filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=7, offY=7, positive=true);

}

* nilai offset menegak diubah menjadi 0px , -10px.

2.cara menulis style css nya didalam posting anda adalah seperti dibawah ini..

<div class="shadow3" style="width:300px; height:50px; padding:5px; background:navy; border: 1px solid black;">

<p>Make shadow at the bottom of a Box</p>

</div>

hasilnya...

 Tamat tutorial box shadow buat kali ini.Untuk lebih memperjelaskan lagi minda anda, bolehlah melayari website css3-box shadow
 atau anda boleh implementkan kedalam website anda seperti website madu sawda ini.Boleh juga digabungkan dengan sebarang image.

Note: Jika anda telah mempelajari tutorial diblog ini dan berjaya diapplikasikan diblog anda, harap dapat beri kredit pada blog ini dengan hanya memberi sepatah komen atau berlanggan artikel terus ke email anda.

Mungkin artikel dibawah yang sedang anda cari