Code Tutorial | CSS Hover

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Posted by mukhammad nur Minggu, 01 April 2012 0 komentar
Code Tutorial | CSS Hover | Belajar Efek Hover | Mengenal Hover pada Template Blog | Blogger / Blogspot. Entri ni adalah kesinambungan untuk CSS Hover..sebab entri yang mula2 tu bukan la tutorial..itu cuma pengenalan dalam entri ni baru la ada tutorial. Css hover pada template biasanya anda akan jumpa cuma
a:hover {color:#0f0;}
yang tu untuk link..warna link akan berubah bila anda letak mouse pada link tu..CSS hover tidak terbatas pada link saja..terpulang pada template designer atau tuan blog jika mahu main efek hover ni..
sebagai contoh pada template..ada yang sama,ada yang berbeda..
#main-wrapper {background:#ff3366;color:#151515;}
di atas tu contoh css untuk main wrapper yang mana warna background pada main wrapper tu colour pink manakala tulisan berwarna kelabu gelap.. untuk membuat efek hover masukkan code seperti di bawah..
#main-wrapper:hover {background:#ff0;color:#000;}
bila mouse diletakkan pada main-wrapper..background akan berubah seperti yang disetkan pada code css di atas..
nampak kan cara guna efek hover tu…
Contoh lagi
#sidebar-wrapper a:link {color:#3366ff;}
tambah code hover
#sidebar-wrapper:hover a:link {color:#0f0;}
jika anda letak mouse pada area sidebar.. link akan bertukar warna dari warna biru(#3366ff) ke warna hijau{#0f0)

berikut adalah code css juga :
#main-wrapper:hover {background:#000;color:#ff0000;}(code ni buat main wrapper jadi warna hitam dan tulisan jadi warna merah)
#sidebar-wrapper:hover a:link {color:#0f0;font-weight:bold;font-size:36px;}
(code ni buat setiap link pada sidebar bertukar jadi warna hijau dan tulisan link tu bersaiz 36px..besar tu..)
.sidebar .widget {border:5px dashed #3366ff;}
ini bukan efek hover…ni efek membuatkan widget tu ada border kaler biru dengan border putus2
.sidebar .widget:hover{border:5px solid #0f0;}
efek hover ni untuk widget pada sidebar..bila letak mouse pada sidebar.. border jadik kaler hijau dan border jadi bersambung…
boleh faham?..efek tu terpulang dari anda…mau masukkan efek apa..makin dalam pengetahuan anda tentang css…makin kaw2 la efek yang boleh anda masukkan… pengetahuan aku pasal code css ni cuma asas saja…sebab tu efek hover ni biasa saja…heheehe…

Artikel tentang Code Tutorial | CSS Hover
TERIMA KASIH ATAS KUNJUNGAN SAUDARA
Judul: Code Tutorial | CSS Hover
Ditulis oleh mukhammad nur
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip, baik itu sebagian atau keseluruhan dari isi artikel ini harap menyertakan link dofollow ke http://cintafido.blogspot.com/2012/04/code-tutorial-css-hover-2nd.html. Terima kasih sudah singgah membaca artikel ini.

0 komentar:

Posting Komentar

Panduan blog dan SEO support Online Skill - Cinta fido Fido | Kopi kanan Akherat | Kisah Nabi Muhammad | Sahabat | Belajar Blogger | Template | HTML | Tutorial | Komputer.

investasi semoga anda senang

kurs mata uang BCA-2


Selamat datang di blog cinta fido, semoga anda diberi keSehatan oleh alloh SWT

Islam itu Cinta Damai Agama Islam Cinta Damai
jihad Damai adalah amal kebaikan yang Allah perintahkan dan menjadi sebab kokoh dan kemuliaan umat islam