Oddiy CSS-da pastga surilgan tasvirni qanday bog'lash mumkin?

Maqola muallifi:
  • Veb-sayt dizayni
  • Yangilandi: Fevral 27, 2020

* Yangilanish haqida eslatma: Ushbu xabar birinchi marta 2009 yil oktyabr oyida nashr etilgan. Men aytib o'tgan ba'zi texnikalar, ehtimol eskirgan. Xushmuomalalik bilan murojaat qiling so'nggi veb-sayt yaratish texnikasi uchun qo'llanma.

Hover nima? Belgilangan atamalar UWStout.edu:

'Hover' - kursorni har qanday havolaning ustiga qo'yganingizda yuzaga keladigan effekt. Havolani hover-ga javob berish uchun rangni o'zgartirish, yangi grafikani ko'rsatish yoki hatto ovozli faylni o'ynatish orqali kodlash mumkin.

Hover effekti veb-mavjudlikni yaxshilaydi va veb-egalariga veb-trafiklarini yo'naltirishga yordam beradi. Veb-foydalanuvchilaringiz maxsus havolaga ko'proq e'tibor berishlarini xohlasangiz, buning yaxshi usuli bu jozibali hover effektli havolani yaratishdir. Bu kabi oddiy hover effekti (oddiy chizilgan va matn rangini o'zgartirish) bu matnlar "bosish" mumkinligini ko'rsatadi va veb-shovqinlarni yaxshilaydi. Biroq, matn rangini va uslubini o'zgartirish (pastki chiziq / chiziqcha / qalin) juda muhim va hover yordamida bajarilishi mumkin bo'lgan ko'p narsalar mavjud.

Ushbu maqolada, hover effekti bilan qanday qilib yaxshi aloqalarni yaratishingiz mumkinligini ko'rsataman.

Misol 1: Havoruvchi bilan bog'lanish tugmasi

Birinchidan, ishlaydigan misolni ko'rib chiqing (qanday qilib ishlayotganini ko'rish uchun sichqoncha ustida sichqoncha o'rnating - yon tomonidagi belgini o'zgartirish).

Misol 1 - Havfsizlik tugma tasvirini bog'lang

Bu ushbu misolda nima qilinadigan yakunlangan versiyasidir.

CSS-ni qanday qilib yaratamiz?

Button rasm

Ko'rib turganingizdek, qadam 1, biz ikki xil versiyada o'q belgilariga kerak. Bizning namunamizda men qizil (#CC3300) standart havola tugmasi sifatida foydalanar; va kulrang (#333333) harakatlanuvchi effekt uchun. Bunday tugma osonlik bilan har qanday tasvirni tahrirlash dasturi yordamida amalga oshirilishi mumkin.

Keling, qizil rangli tugmachani (masalan, b1.png) va rey rangini (tugma deymiz, b2.png). B1.png yuqorisida b2.png bilan ushbu ikkita rasm fayliga birlashtirilsin. Bu bog'lanish uchun bizning so'nggi rasmimiz bo'ladi. Uni (aytaylik, x.png) ayting va kerakli joyni (mening ishim uchun, men WP shablon papkasida joylashtirdim) joylashtiring.

Malumot uchun:

b1.png , b2.png , va x.png

CSS kodi

Keyin CSS kodida. Asosan, biz erishmoqchi bo'lgan narsalar, bog'ning matnini butona joylashtirish uchun o'ng tomonga indentatsiya qilishdir; va havola hover holatida bir vaqtning o'zida boshqa tasvirni aks ettiradi. Bular juda muhim narsalardir, bundan tashqari biz fon holatida bir oz burilish kerak. Hiyla - bu tasvirning yuqori qismini (qizil tugmani) asl bog'ich uchun ko'rsatish; va hover ustiga, fon tasvirini -11px (veb-saytida farq qilishi mumkin) bilan birga kulrang tugmani ko'rsatish uchun chetga surib qo'ying.

.xa {rang: #cc3300; padding-chap: 14px; harflarning og'irligi: qalin; background-image: url (rasmlar / x.png); fon-pozitsiya: 0 2px; fon-takrorlash: no-repeat; }
.xa: hover {color: #333333; padding-chap: 14px; harflarning og'irligi: qalin; background-image: url (rasmlar / x.png); fon-pozitsiya: 0 -11px; fon-takrorlash: no-repeat; }

amalga oshirish

Ushbu hover effektini namoyish qilish uchun x sinfini belgilangan maydonga kiriting. Buni qanday amalga oshirishingiz mumkinligi haqida bir misol.

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

Misol 2: Havfsizlik fonida bog'lanish

Xuddi shu kontseptsiya bilan sizning havolalaringizni chiroyli qilish uchun cheksiz usullar mavjud. Mana, hover effektlarini biroz boshqacha usul bilan nima qilishimiz mumkinligi haqida yana bir misol. Yana, tayyor versiyani ko'rib chiqing.

Misol 2 - Havfsizlik fonida havola

Ushbu misolda, men nima qilmoqchimisiz, tugmachani yoqqan ko'prikni yaratmoqdamiz. Bu yerda foydalanuvchining sichqoncha ustiga joylashtirilganida fon o'zgaradi.

CSS-ni qanday qilib yaratamiz?

Fon rasmlari

Birinchidan, dumaloq to'rtburchakning ikkita rasmini yarating. Namoyish maqsadida biz ushbu misolda ushbu ikkita rasmni birlashtirmaymiz. Biz qizil (#CC3300) to'rtburchakni b1.png deb nomlaymiz; va maroon (#9F2800) to'rtburchagi b2.png sifatida.

CSS kodi

Keyinchalik, sizning uslublar jadvalingiz kodlari (biz ushbu ikkinchi misolda 'y' sinfini nomlaymiz).

oy {kenglik: 280px; balandligi: 42px; rang: #000000; to'ldirish: 10px; matnni bezash: yo'q; displey: blok; harflarning og'irligi: qalin; background-image: url (rasmlar / b1.png); fon-takrorlash: no-repeat; }
oy: hover {kenglik: 280px; balandligi: 42px; rang: #FFFFFF; to'ldirish: 10px; harflarning og'irligi: qalin; matnni bezash: yo'q; displey: blok; background-image: url (rasmlar / b2.png); fon-takrorlash: no-repeat; }

amalga oshirish

Ulanishni ko'rsatish uchun, sinfni (y) manba kodingizdagi <a href> tegiga osongina joylashtiring. Misol:

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

Tiklash

Umid qilamanki, ushbu maqola sizga qimmatli ma'lumot olib keldi va ba'zilaringizga CSS-ni ijodiy usulda ishlatishga ilhomlantirgan. Agar ushbu qo'llanmada qo'shimcha qilishim kerak deb o'ylagan boshqa fikrlar bo'lsa, fikrlaringizni sharhlar bo'limida qoldiring.

Jerry Low haqida

WebHostingSecretRevealed.net (WHSR) asoschisi - 100,000 foydalanuvchilari tomonidan ishonchli va foydalanilgan xosting tekshiruvi. 15-dan ortiq veb-tajribasi, affiliate marketing va SEO tajribasi. ProBlogger.net, Business.com, SocialMediaToday.com va boshqa ko'plab ishtirokchilar.

»I ¿