Хоризонтална трака са ховер ефектом у хтмл5, цсс3 и боотстрапу

Шта нам је потребно?

Локални сервер (већ сам вам рекао да користим Ксампп)
·
А. уређивач кода (користите узвишени текст 3)

Корак 1

Почећу тако што ћу отићи у директоријум свог локалног сервера и креирати нову фасциклу за складиштење овог пројекта, назваћу је "мену_ховер" унутар ње и додати другу да садржи цсс датотеке.

ЕНЛАРГЕ

ЕНЛАРГЕ

Корак 2

Сада ћемо у нашем уређивачу кода почети додавањем нове хтмл5 структуре у коју ћу додати стилске листове који одговарају боотстрапу са њихових ЦДН адреса како не би заузели простор на нашем серверу, додаћу и стилски лист, назван „стил .цсс "који ће бити ускладиштен у нашој раније креираној фасцикли" цсс "…
Касније ћемо ову датотеку сачувати као "мену.хтмл" у фасцикли "мену_ховер" креираној у 1. кораку.

ЕНЛАРГЕ

Корак 3

Сада ћемо додати ознаку у наш "мену.хтмл" и установит ћемо како ће бити приказана на екрану постављањем њених својстава у датотеци стиле.цсс …

ЕНЛАРГЕ

ЕНЛАРГЕ

Као што ћете видети у цсс-у, додао сам "бацкгроунд-цолор: греен" ово је само у сврхе смерница да бисте видели величину и положај заглавља на екрану, можете се играти са величинама, фонтом и другим према вашем преференције … да, управо сада када то видимо у свом прегледачу, имали бисмо овако нешто …

ЕНЛАРГЕ

Корак 4

Желим да се мој мени састоји од 4 везе, да бих то постигао унутар ознаке додаћу 4Са класом "бок_мену" да их идентификујем, сваком ћу додати све већи ИД са "један" на "четири".

ЕНЛАРГЕ

Корак 5

У нашој датотеци стиле.цсс додаћемо својства за класу "бок_мену" и за слојеве "један, два, три и четири".

Корак 6

Почећемо да дефинишемо понашање класе "бок_мену" успостављањем релативног положаја, запамтите да ћемо у овом случају имати 4 везе и да слој који их садржи, односно заузима 80% екрана, па ћемо потребно их је да 4 елемента са класом бок_мену заузимају 100% расположивог простора у њој, за то ћемо узети 100% и поделити га са бројем веза или елемената које желимо да поставимо, јер у овом случају постоје 4 тада било би 100/4 = 25, јер би зато наша класа "бок_мену" требало да има ширину од 25%. Такође ћемо му дати 100% заустављање и рећи му да плута лево тако да се елементи виде један поред другог.

ЕНЛАРГЕ

Корак 7

Касније ћемо дефинисати боју позадине са којом ћемо приказати сваки од елемената, у кораку 4 додајемо ид од један до четири, сада ћемо у нашем цсс -у дефинисати како ће сваки од ових слојева изгледати. за ово ћемо урадити следеће …

ЕНЛАРГЕ

Ово ће нам дати следећи резултат:

ЕНЛАРГЕ

Као што видите, већ смо ограничили размаке сваког елемента и његову боју позадине, можете користити кодове боја према свом укусу, у овом случају јер то није веб локација са одређеном темом, већ тест који сам користио као демонстрација …

Корак 8

Па, вратимо се на документ "мену.хтмл" који смо оставили у кораку 4, сада ћемо наставити са додавањем икона и текста који ће имати наш мени. За ово нећемо користити слике, већ идемо да бисмо себи мало помогли при покретању система и користићемо иконе из пакета „Фонт Авесоме“, за то идемо у прегледач и приступамо вебу хттпс: // фортавесоме… .о / Фонт-Авесоме / кликните на „Започни ”И спустите се до„ НАЈПЛАШНИЈЕ: БоотстрапЦДН одељак МакЦДН -а ”.

ЕНЛАРГЕ

Копираћу везу ЦДН на листу стилова Фонт Авесоме и залепити је у заглавље документа „мену.хтмл“

ЕНЛАРГЕ

Овим сада можемо користити иконе Фонт Авесоме у свом дизајну, али сада морамо изабрати које ћемо иконе поставити, за то се враћамо на њихову веб страницу и лоцирамо мени "Иконе".

ЕНЛАРГЕ

Претражујемо опсежну листу икона које нас занимају и кликнемо на њу.

ЕНЛАРГЕ

Када кликнемо, одвешће нас у други прозор у којем можемо видети код за уметање те иконе у наш дизајн.

ЕНЛАРГЕ

Једноставно га копирамо и одемо на „мену.хтмл“ и залепите га укао што следи …

ЕНЛАРГЕ

ЕНЛАРГЕ

Такође ћемо испод додати име које је центрирано …

ЕНЛАРГЕ

Хајде да проверимо како то изгледа у нашем прегледачу …

ЕНЛАРГЕ

Видимо да смо већ додали икону и центрирани текст па понављамо овај корак за преостала 3 елемента.

ЕНЛАРГЕ

Корак 9

Иконе су прилично мале, повећаћу њихову величину 3 пута, за ово ћу додати класу "фа-3к".

ЕНЛАРГЕ

ЕНЛАРГЕ

Корак 10

Сада ћу мало изменити цсс датотеку да бих довршио ефекат, почећу тако што ћу изменити класу "бок_мену" поравнавајући текст према центру и дајући му дисплаи = "блоцк";

ЕНЛАРГЕ

Корак 11

Касније ћу написати час за контролу изгледа икона, у којем ћу дефинисати да су приказане у белој боји, да имају заобљену ивицу око себе и да имају анимацију преласка …

ЕНЛАРГЕ

Корак 12

Што се тиче текстова на етикети

Поставит ћу их у бијело и мало ћу смањити непрозирност додавањем благог ефекта анимације према доље.

ЕНЛАРГЕ

Корак 13

Сада ћу дефинисати како ће се наши елементи понашати приликом преласка курсором преко њега и додаћу му малу анимацију да ублажи ефекат.

ЕНЛАРГЕ

Када се ово уради, можемо рећи да смо завршили са дизајнирањем ефекта, сада само требамо додати везе на начин на који желите, коментаришем да се овај ефекат може користити и за постављање слика које имају описни текст испод себе, као што је На пример, професионални портфолио, галерија или каталог производа, све је препуштено вашој машти …
На крају Оставићу вам .зип са изворним кодомАко вам се допао овај водич, оставите свој коментар, ако нешто није јасно, питајте ме, ако желите туторијал о одређеној теми, јавите ми …
Надам се да вам је ово корисно, поздрав…

Датотека са изворним кодом … Да ли вам се допао и помогао овај водич?Можете наградити аутора притиском на ово дугме да бисте му дали позитиван поен