Tutorial#1Box-shadow

by - May 25, 2012

ehem ehem..macam tak percaya je aku nak buat tuto.Giler ke ape?sihat ke aku nie??rase badan x panas..tapi maybe kesemangatan untuk berkongsi ..nampak tak gambar di bawah?yang garisan putus2 warna kuning yang aku bulatkan tuh...macam mane aku buat?ke korang dah tahu mcam ne nak buat?
ala rupanya je yang ketinggalan kan kan ...
 

xpela,aku nak jugak kongsi macam mane aku buat ..
1. korang kena tahu macam mane nak buat kotak( border ) macam tuh.aku ni tak pandai .cuma ambik dari tuto2 orang lain.
yang ni aku amik contoh macam mane nak buar border dari : Amylia`s Tutorial
                        border:2px solid #000000;
warna merah tuh: boleh digantikan dengan dashed,dotted,double,
warna oren tuh kod warna kegemaran : tengok sini
 ** okey dah paham ke macam nak wat border kan kan.pandai la korang nie.tabik spring.toink toink..
2. langkah seterusnya, macam mane pulak nak buat shadow.apa itu shadow??macam dlm gambar di atas tuh.
okey, kat bawah nie beberapa contoh border shadow yang korang boleh pilih:
#Example_A {
-moz-box-shadow: -5px -5px #888;
-webkit-box-shadow: -5px -5px #888;
box-shadow: -5px -5px #888;
}
 #Example_B {
-moz-box-shadow: -5px -5px 5px #888;
-webkit-box-shadow: -5px -5px 5px #888;
box-shadow: -5px -5px 5px #888;
}
 #Example_C {
-moz-box-shadow: -5px -5px 0 5px #888;
-webkit-box-shadow: -5px -5px 0 5px#888;
box-shadow: -5px -5px 0 5px #888;
}
#Example_D {
-moz-box-shadow: -5px -5px 5px 5px #888;
-webkit-box-shadow: -5px -5px 5px 5px#888;
box-shadow: -5px -5px 5px 5px #888;
}
#Example_E {
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px#888;
box-shadow: 0 0 5px #888;
}
#Example_F {
-moz-box-shadow: 0 0 5px 5px #888;
-webkit-box-shadow: 0 0 5px 5px#888;
box-shadow: 0 0 5px 5px #888;
}
 ooh..penatnyer..penat nyer copy paste kan kan.
dah habis ker??eh eh..belum lagi ..lah.
#Example_G {
-moz-box-shadow: inset -5px -5px #888;
-webkit-box-shadow: inset -5px -5px #888;
box-shadow: inset -5px -5px #888;
}
#Example_H {
-moz-box-shadow: inset -5px -5px 5px #888;
-webkit-box-shadow: inset -5px -5px 5px #888;
box-shadow: inset -5px -5px 5px #888;
}
 #Example_I {
-moz-box-shadow: inset -5px -5px 0 5px #888;
-webkit-box-shadow: inset -5px -5px 0 5px#888;
box-shadow: inset -5px -5px 0 5px #888;
}
#Example_J {
-moz-box-shadow: inset -5px -5px 5px 5px #888;
-webkit-box-shadow: inset -5px -5px 5px 5px#888;
box-shadow: inset -5px -5px 5px 5px #888;
}
#Example_K {
-moz-box-shadow: inset 0 0 5px #888;
-webkit-box-shadow: inset 0 0 5px#888;
box-shadow: inner 0 0 5px #888;
}
 #Example_L {
-moz-box-shadow: inset 0 0 5px 5px #888;
-webkit-box-shadow: inset 0 0 5px 5px#888;
box-shadow: inset 0 0 5px 5px #888;
}

 actually banyak lagi yang menarik...korang tengok kat sini k.
3.selepas korang dah pilih box-shadow mana yang berkenan di hati..
kod korang akan jadi macam nie.
kod ini di tampal di HTML/JAVASCRIPT.ikutlah kekreatifan korang ok
done!!seronok dapat berkongsi ilmu yang sedikit ini.sama2 ambil manfaat ok.jadi x?if jadi or tak jadi inform me ok

terima kasih ,Allah

You May Also Like

5 comments

  1. dah boleh jadi developer dah ni..pndai main dengan CSS..

    ReplyDelete
  2. kak,sy nak rq tuto,cmne nak buat animated banner guna photosho?sy pna rjuk tuto2 len tapi tkfhm juga

    ReplyDelete