Jinsi ya kuunda kiungo na picha ya hover katika wazi CSS

Kifungu kilichoandikwa na:
  • Website Design
  • Imeongezwa: Agosti 02, 2013

Nini hover? Ufafanuzi umetajwa kutoka UWStout.edu:

'Hover' ni athari ambayo hufanyika wakati unapoweka mshale juu ya kiunga cha aina yoyote. Kiunga kinaweza kutolewa ili kujibu hover kwa kubadilisha rangi, kuonyesha picha mpya, au hata kucheza faili ya sauti.

Athari ya hover inaboresha usability wa mtandao na husaidia wamiliki wa wavuti kuelekeza traffics yao ya mtandao. Unapotaka watumiaji wako wa mtandao waweze kuzingatia zaidi kiungo maalum, njia nzuri ya kufanya hivyo ni kujenga kiungo na athari inayovutia ya hover. Athari rahisi ya athari kama hii (msisitizo rahisi na mabadiliko ya rangi ya maandishi) inaonyesha maandishi hayo yana "bonyeza-uwezo" na inaboresha mwingiliano wa wavuti. Walakini, kubadilisha rangi ya maandishi na mitindo (underline / overline / ujasiri) ni ya msingi sana na kuna mengi zaidi yanaweza kufanywa na hover.

Katika nakala hii, nitaonyesha jinsi unaweza kuunda viungo mzuri vya kuangalia na athari ya hover.

Mfano 1: Kiungo na kifungo cha hover

Kwanza, angalia mfano wa kazi (mahali panya juu ya kiungo ili uone jinsi inavyofanya kazi - mabadiliko ya icon upande).

Mfano 1 - Unganisha na picha ya kifungo cha hover

Hii ndiyo toleo la kukamilika la kile kitakachojengwa katika mfano huu.

Jinsi gani tunaiunda kwa wazi CSS?

Picha ya Button

Hatua ya 1, kama unaweza kuona, tunahitaji icons za mshale katika matoleo mawili tofauti. Katika mfano wetu, nilitumia nyekundu (#CC3300) kama kifungo cha kiungo cha default; na kijivu (#333333) kwa athari ya hover. Kitufe hiki kinaweza kufanywa kwa urahisi kwa kutumia programu yoyote ya uhariri wa picha.

Sasa tuna kitufe cha rangi nyekundu (sema, b1.png) na rangi ya rangi (kifungo cha kusema, b2.png). Unganisha hizi mbili kwenye faili moja ya picha na b1.png juu ya b2.png. Hii itakuwa picha yetu ya mwisho kwa kiungo. Jina hilo (sema, x.png) na upakia eneo linalohitajika (kwa kesi yangu, niliiweka katika folda yangu ya template ya WP).

Kwa kumbukumbu zako:

B1.png , b2.png , na x.png

Kanuni ya CSS

Kisha, kwenye msimbo wa CSS. Kimsingi kile tunachotaka kufikia ni kufuta maandishi ya kiungo kidogo kwa haki ya kufanya nafasi kwa kifungo; na wakati huo huo, onyesha picha tofauti wakati kiungo kilipo katika hali ya hover. Hizi ni stuffs nzuri ya msingi isipokuwa kwamba tunahitaji kupotoa kidogo juu ya msimamo wa nyuma. Hila ni kuonyesha sehemu ya juu ya picha (kifungo nyekundu) kwa kiungo cha awali; na wakati wa hover, futa picha ya asili na -11px (inaweza kutofautiana kwenye tovuti yako) margin ili kuonyesha kifungo kijivu.

. {{rangi: #cc3300; padding-kushoto: 14px; font-uzito: ujasiri; background-image: url (picha / x.png); msimamo wa nyuma: 0 2px; Rudi nyuma-kurudia: usirudia; }
.xa: hover {rangi: #333333; padding-kushoto: 14px; font-uzito: ujasiri; background-image: url (picha / x.png); msimamo wa nyuma: 0 -11px; Rudi nyuma-kurudia: usirudia; }

utekelezaji

Ili kuonyesha athari hii ya hover, ingiza darasa la x kwenye eneo lililotengwa. Hapa kuna mfano juu ya jinsi unaweza kufanya hivyo.

<p class = 'x'> <a href="http://www.webhostingsecretrevealed.com"> Homepage </a> </ p>

Mfano 2: Kiunganisha katika historia ya hover

Na wazo moja, kuna njia nyingi ambazo unaweza kufanya viungo vyako kuonekana vizuri. Hapa kuna mfano mwingine juu ya kile tunaweza kufanya na athari za hover na njia tofauti. Tena, angalia toleo la kumaliza.

Mfano 2 - Kiungo katika hali ya hover

Katika mfano huu, nitafanya ni kujenga hyperlink iliyopendwa na kifungo ambapo background itabadilika wakati watumiaji wanaweka mouse zao juu yake.

Jinsi gani tunaiunda kwa wazi CSS?

Picha za nyuma

Kwanza, tengeneza picha mbili za mstatili wa mviringo. Kwa madhumuni ya maandamano, hatutaunganisha picha hizi mbili katika mfano huu. Tuttaja jina la mstatili mwekundu (#CC3300) kama b1.png; na maroon (#9F2800) mstatili kama b2.png.

Kanuni ya CSS

Ifuatayo, hizi ni nambari za karatasi yako ya mtindo (tunamta darasa 'y' katika mfano huu wa pili).

ay {upana: 280px; urefu: 42px; rangi: #000000; padding: 10px; maandishi-mapambo: hakuna; kuonyesha: kuzuia; font-uzito: ujasiri; background-image: url (picha / b1.png); Rudi nyuma-kurudia: usirudia; }
ay: hover {upana: 280px; urefu: 42px; rangi: #FFFFFF; padding: 10px; font-uzito: ujasiri; maandishi-mapambo: hakuna; kuonyesha: kuzuia; background-image: url (picha / b2.png); Rudi nyuma-kurudia: usirudia; }

utekelezaji

Ili kuonyesha kiungo, ingiza rahisi darasa (y) kwenye <a href> lebo katika msimbo wako wa chanzo. Mfano:

<a href="http://www.webhostingsecretrevealed.com" class="y" Homepage> </a>

Kumalizika kwa mpango wa

Natumai nakala hii ilikuletea habari muhimu na ikawahimiza baadhi yenu kutumia CSS kwa njia ya ubunifu. Ikiwa kuna vidokezo vingine unadhani ninapaswa kuongeza katika mwongozo huu, jisikie huru kuacha maoni yako katika sehemu ya maoni.

Vidokezo zaidi vya CSS

Ikiwa ungependa chapisho hili, hakikisha uangalie pia Jinsi ya kutumia vizuri michoro za CSS 3, Lazima Kusoma Tutorials za CSS 3 2012, Kama vile Fanya tovuti yako ipendeke na mbinu hizi za CSS 3.

Kuhusu Jerry Low

Msanidi wa WebHostingSecretRevealed.net (WHSR) - mapitio ya ushirikiano yanayoaminika na kutumiwa na watumiaji wa 100,000. Zaidi ya uzoefu wa miaka 15 kwenye usambazaji wa wavuti, masoko ya washirika, na SEO. Mchangiaji kwa ProBlogger.net, Biashara.com, SocialMediaToday.com, na zaidi.