Skip to main content

tutorial border melengkung berwarna+shadow berwarna

Tumblr_lno49rwdxk1qfjv55o1_500_large
dah lama tak buat tutorial...nak tahu try tengok contoh dekat blog cikchubbypunyahakmilik.sebenarnya tu blog baru saya..tak siap renovate lagi tau..
tak mau buang masa,jom start enjin tuto..brum..brum..

1)design>edit HTML>tekan Ctrl+F nak senang carik coding
2)cari kod di bawah nie
#content-wrapper {
3)dah jumpa,copy kod dibawah dan paste dibawah kod yang dicari
-moz-box-shadow: 0 0 5px 5px #FFFFFF;
 -webkit-box-shadow: 0 0 5px 5px #FFFFFF;
 box-shadow: 0 0 5px 5px #FFFFFF;
 margin: 0 2%;
 padding: 0 0 15px;
 text-align: $startSide;
 background-color: $mainBgColor;
 -moz-border-radius: 15px;
 -webkit-border-radius: 15px;
 border-top: 2px dashed #A9D0F5;
 border-left: 2px solid #A9D0F5;
 border-right: 2px solid #A9D0F5;
 border-bottom: 2px dashed #A9D0F5;
 }
4)preview and then save!

nota kecik:

  • yellow-untuk warna shadow
  • brown-boleh tukar dotted,solid,double,dashed
  • orange-untuk warna border 



Comments

scha vella said…
xjadi pun.. template tu tiba2 membesar, mcm tmplate washed denim.. saya pakai denim saje
3 October 2011 at 02:50
Anonymous said…
nice , thanks :)
coding ni jadi , tapi saya letak bawah #content-wrapper{
best code ni sebab dia jadi ke tepi. dalame cari code mcm ni. tq.
*denim.
24 November 2011 at 03:29
Post a Comment

Popular posts from this blog

freebies header part2

asyik bagi orang freebies header cantik2 tapi header sendiri tak cantik..saya tau la kenapa setiap kali buat header untuk diri saya tak cantik..T_T...ok la malas nak cakap banyak,saya kasi korang.. pastikan kredit saya ye..kalau tak mau kredit siap!hahaha cara nak ambik: -klik gambar -klik right klik dan save image as *maaf tak berapa nak cantik =)
8 comments
read more

freebies background part 4

assalamualaikum w.b.t.. nak bagi background dekat korang nie.. ambik lah jangan tak ambik tapi mesti mau kredit..kalo tak lawa cakap\jadi orang yg jujur/ Flower cute background https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGNLEkawfQDwiUWupO4wP6ft-6tok_8uPgWQW2NaOvvQPzxA3kJR972kDhP4Hl9QRi6x7BDhOOhJL0Gi8gGP-MeaiCjAjojLKzGkJmrDJOFXgRf7fITOCMGOi4WKd_vDUxy5HH8032gDhV/s1600/polkadot-crop.png https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqeiNPZVq1fEczqo8y6HqV_1UAuIGVNYpNrhovIML9GXyEX-fhK5VaT7Rzm7Jrl6WZJM7ll7w95WjYA8NdXjV5iUxs7wdh4197XvOhHBqHu3YFh4gQzk-7IwvwCspJm4Jf4iUM74Rv0A9D/s1600/polkadot-crop+purple.png https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicb9FvTFnNJKXjOqDJ8G-neMypMsN4Cotr7T1coMIZIUOie03jwtMp5k3b6M8RpU9VCHm5byrGWbm59911yZsFh5_GnNGdN0F993kcLm8rKQaBaoLorQjFhMQ3VaQPvK4hj3AgCqnSJ4T0/s1600/polkadot-crop+blue.png https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbpiDdjq_KVHSN0AA7ZiDCT6yjCvXYWcKpIse7Vyv3NuowlhjvkRyKYvriIa4bkSPZ...
Post a Comment
read more

tutorial hover scrollbar

title:tutorial hover scrollbar request from: Hanis Sakinah .......................................................................................... assalamualaikum dan salam sejahtera..hari ini saya nak ajar kawan-kawan buat hover scroll..bagi yang dah tahu sila abaikan..nak tahu macam mana hover scrollbar tu?sila sentuh cursor kawan-kawan di scrollbar saya=).ok dah..jom kita mulakan sesi pembelajaran kita..v(*_*) 1)dashbord>design>edit html 2)search code   ]]></b:skin> 3) bila dah jumpa code tu,sila copy code di bawah dan paste atas  ]]></b:skin> ::-webkit-scrollbar { height:12px; width: 10px; background-image:url( url bckgrd ); } ::-webkit-scrollbar-thumb { background-image:url( url bckgrd ); -moz-border-radius: 10px; border-radius: 10px; } ::-webkit-scrollbar:hover { background-image:url( url bckgrd ); } ::-webkit-scrollbar-thumb:hover { background-image:url( url bckgrd ); -moz-border-radius: 10px; border-radius: 10px; } *url ba...
1 comment
read more