Како креирати линк са лебдијим сликама у једноставном ЦСС-у

Чланак написао:
  • Сајт Дизајн
  • Ажурирано: Ауг КСНУМКС, КСНУМКС

Шта је лебдјети? Дефиниција цитирана из УВСтоут.еду:

'Ховер' је ефекат који настаје када поставите курсор преко било које везе. Веза се може шифрирати како би се одговорило на лебдећу променом боје, приказивањем нове графике или чак репродукцијом звучне датотеке.

Ефекат лебдећа побољшава употребљивост веба и помаже власницима веб страница да усмеравају своје веб трговине. Када желите својим веб корисницима да посвете посебну пажњу на посебну везу, добар начин да то учините је да креирате везу са атрактивним ефектом лебдеће линије. Једноставан ефекат лебдечине овако (једноставна подвлака и промена боје текста) означава да је тај текст 'који може да се кликне' и побољшава веб интеракцију. Међутим, промена боје и стилова текста (подвлачење / превлачење / подебљано) веома је основа и може се учинити много више помоћу курсора.

У овом чланку ћу показати како можете да створите добре везе са ефектом лебдења.

Пример КСНУМКС: Веза са дугметом за лупање

Прво, погледајте радни примјер (поставите миш преко везе како бисте видјели како то функционира - промјена иконе са стране).

Пример КСНУМКС - Веза са сликама са дугметом "ховер"

Ово је завршена верзија онога што ће бити изграђено у овом примеру.

Како га стварамо у обичном ЦСС-у?

Буттон Слика

Корак КСНУМКС, као што видите, потребне су иконе стрелица у две различите верзије. У нашем примеру, користио сам црвено (#ЦЦКСНУМКС) као подразумевано дугме везе; и сива (#КСНУМКС) за ефекат лебде. Такво дугме се лако може направити помоћу софтвера за уређивање слика.

Сада имамо дугме црвене боје (рецимо, бКСНУМКС.пнг) и боје рејка (тастер каже, бКСНУМКС.пнг). Споји ове две у једну слику са бКСНУМКС.пнг на врху бКСНУМКС.пнг. Ово ће бити наша последња слика за линк. Назовите га (рецимо к.пнг) и отпремите жељену локацију (за мој случај, ставио сам је у мој ВП темплате мапу).

За твоју информацију:

бКСНУМКС.пнг , бКСНУМКС.пнг , и к.пнг

ЦСС код

Затим, на ЦСС коду. У суштини оно што желимо да постигнемо је да мало скренемо текст на линк десно да направимо простор за дугме; а истовремено, приказати другу слику када је веза у стању лебдења. То су прилично основне ствари, осим што нам је потребно мало обртања у позадини. Трик је да прикажете горњи део слике (црвени тастер) за изворну везу; и када лебдите, замените позадинску слику са -КСНУМКСпк (може се разликовати на вашој веб страници) да бисте приказали сиво дугме.

.ка {боја: #ццКСНУМКС; паддинг-лефт: КСНУМКСпк; фонт-веигхт: болд; бацкгроунд-имаге: урл (имагес / к.пнг); бацкгроунд-поситион: КСНУМКС КСНУМКСпк; позадина-понављање: нема понављања; }
.ка: ховер {боја: #КСНУМКС; паддинг-лефт: КСНУМКСпк; фонт-веигхт: болд; бацкгроунд-имаге: урл (имагес / к.пнг); бацкгроунд-поситион: КСНУМКС-КСНУМКСпк; позадина-понављање: нема понављања; }

Имплементација

Да бисте показали овај ефект лебдења, једноставно уметните класу к у означено подручје. Ево примера како то можете да урадите.

<п цласс = 'к'> <а хреф="хттп://ввв.вебхостингсецретревеалед.цом"> Почетна страница </а> </ п>

Пример КСНУМКС: Веза у позадини лебдења

Са истим концептом, постоји безброј начина на које можете учинити да ваше везе изгледају цоол. Ево још једног примера о томе шта можемо учинити са лебдећим ефектима мало другачијом методом. Поново погледајте готову верзију.

Пример КСНУМКС - Веза у позадини лебдења

У овом примеру, оно што ћу учинити је да креирам хиперповезаву са дугметом, гдје се позадина мијења када корисници стављају миша преко ње.

Како га стварамо у обичном ЦСС-у?

Слике позадине

Прво направите две слике заобљеног правоугаоника. У демонстративне сврхе, ове две слике нећемо спојити у овом примеру. Назваћемо црвени (#ЦЦКСНУМКС) правоугаоник као бКСНУМКС.пнг; и бордо (#КСНУМКСФКСНУМКС) правоугаоник као бКСНУМКС.пнг.

ЦСС код

Затим, ево кодова за вашу листу стилова (у овом другом примеру називамо класу 'и').

аи {видтх: КСНУМКСпк; хеигхт: КСНУМКСпк; цолор: #КСНУМКС; паддинг: КСНУМКСпк; тект-децоратион: ноне; дисплеј блок; фонт-веигхт: болд; бацкгроунд-имаге: урл (имагес / бКСНУМКС.пнг); позадина-понављање: нема понављања; }
аи: ховер {видтх: КСНУМКСпк; хеигхт: КСНУМКСпк; цолор: #ФФФФФФ; паддинг: КСНУМКСпк; фонт-веигхт: болд; тект-децоратион: ноне; дисплеј блок; бацкгроунд-имаге: урл (имагес / бКСНУМКС.пнг); позадина-понављање: нема понављања; }

Имплементација

Да бисте приказали везу, једноставно уметните класу (и) у <а хреф> ознаку у изворни код. Пример:

<а хреф="хттп://ввв.вебхостингсецретревеалед.цом" цласс="и"> Почетна страница </а>

Завршавајући

Надам се да вам је овај чланак донео драгоцене информације и подстакао неке од вас да користе ЦСС на креативан начин. Ако постоје неке друге ствари за које мислите да бих требало да додате у овом водичу, слободно оставите своје идеје у одељку за коментаре.

Више ЦСС туториала

Ако вам се свиђа ова порука, обавезно проверите Како добро искористити ЦСС КСНУМКС анимације, Морате читати ЦСС КСНУМКС Туториали КСНУМКС, Као и Уцитајте свој сајт цоол техникама ЦСС КСНУМКС.

Абоут Јерри Лов

Оснивач ВебХостингСецретРевеалед.нет (ВХСР) - преглед хостинга који су поуздани и коришћени од стране корисника КСНУМКС-а. Више од КСНУМКС година искуства у веб хостингу, аффилиате маркетингу и СЕО. Сарадник за ПроБлоггер.нет, Бусинесс.цом, СоциалМедиаТодаи.цом и још много тога.