Horizontāla josla ar kursora efektu html5, css3 un bootstrap

Kas mums vajadzīgs?

Vietējais serveris (es jau teicu, ka izmantoju Xampp)
·
A koda redaktors (izmantojiet cildenu tekstu 3)

1. darbība

Es sākšu, dodoties uz sava vietējā servera direktoriju un izveidojot jaunu mapi šī projekta glabāšanai, es to saucu par "menu_hover" un pievienoju citu, lai saturētu css failus.

PALIELINĀT

PALIELINĀT

2. solis

Tagad mūsu koda redaktorā mēs sāksim, pievienojot jaunu html5 struktūru, kurai no viņu CDN adresēm pievienošu stila lapas, kas atbilst bootstrap, lai neaizņemtu vietu mūsu serverī, es pievienošu arī stila lapu ar nosaukumu "style" .css ", kas tiks saglabāts iepriekš izveidotajā mapē" css "…
Vēlāk mēs šo failu saglabāsim kā "menu.html" mapē "menu_hover", kas izveidota 1. darbībā.

PALIELINĀT

3. solis

Tagad mēs pievienosim iezīmi mūsu "menu.html" un noskaidrosim, kā tas tiks parādīts ekrānā, iestatot tā īpašības failā style.css …

PALIELINĀT

PALIELINĀT

Kā redzēsit css, es esmu pievienojis "fona krāsu: zaļu", tas ir tikai orientējošs, lai ekrānā redzētu galvenes lielumu un stāvokli, jūs varat spēlēt ar izmēriem, fontu un citiem atbilstoši jūsu preferences … jā, šobrīd mēs to redzam savā pārlūkprogrammā, un mums būtu kaut kas līdzīgs šim …

PALIELINĀT

4. solis

Es vēlos, lai mana ēdienkarte sastāv no 4 saitēm, lai to panāktu, pievienojot 4Ar klasi "box_menu", lai tos identificētu, es katram pievienošu pieaugošu ID no "viens" līdz "četri".

PALIELINĀT

5. solis

Failā style.css mēs pievienosim rekvizītus klasei "box_menu" un slāņiem "viens, divi, trīs un četri".

6. darbība

Mēs sāksim definēt "box_menu" klases uzvedību, nosakot relatīvo pozīciju, atcerieties, ka šajā gadījumā mums būs 4 saites un ka slānis, kas tās satur, tas ir, aizņem 80% no ekrāna, tāpēc mēs tie ir nepieciešami 4 elementiem ar box_menu klasi, kas tajā aizņem 100% pieejamās vietas, šim nolūkam mēs ņemsim 100% un dalīsim to ar saišu vai elementu skaitu, ko mēs vēlamies izvietot, jo šajā gadījumā ir 4 tas būtu 100/4 = 25, tāpēc mūsu klases "box_menu" platumam vajadzētu būt 25%. Mēs arī 100% apstāsimies un liksim peldēt pa kreisi, lai elementi būtu redzami blakus.

PALIELINĀT

7. solis

Vēlāk mēs definēsim fona krāsu, ar kādu mēs parādīsim katru no elementiem, 4. solī mēs pievienojam id no viena līdz četriem tagad mūsu css, mēs definēsim, kā izskatīsies katrs no šiem slāņiem. šim nolūkam mēs darīsim sekojošo …

PALIELINĀT

Tas mums dos šādu rezultātu:

PALIELINĀT

Kā redzat, mēs jau esam norobežojuši katra elementa atstarpes un tā fona krāsu, jūs varat izmantot krāsu kodus atbilstoši savai gaumei, šajā gadījumā, tā kā tā nav vietne ar noteiktu tēmu, bet gan tests, ko esmu izmantojis kā demonstrācija …

8. solis

Atgriezīsimies pie dokumenta "menu.html", kā mēs to atstājām 4. darbībā, tagad mēs pievienosim ikonas un tekstu, kas būs mūsu izvēlnē. Šim nolūkam mēs neizmantojam attēlus, bet mēs turpinām lai nedaudz palīdzētu sev ar bootstrap un mēs izmantosim ikonas no “Font Awesome” pakotnes, lai to izdarītu, mēs ejam uz pārlūkprogrammu un piekļūstam tīmeklim https: // fortawesome… .o / Font-Awesome / noklikšķiniet uz “Sākt darbu ”Izvēlnē un dodieties uz sadaļu“ VIEGLĀKĀ: MaxCDN sadaļa BootstrapCDN ”.

PALIELINĀT

Es nokopēšu CDN saiti uz stila lapu Font Awesome un ielīmēšu dokumenta "menu.html" galvenē

PALIELINĀT

Ar to mēs tagad varam izmantot Font Awesome ikonas savā dizainā, bet tagad mums ir jāizvēlas, kuras ikonas mēs ievietosim, lai to izdarītu, mēs atgriežamies viņu vietnē un atrodam izvēlni "Ikonas".

PALIELINĀT

Mēs meklējam plašajā sarakstā ikonu, kas mūs interesē, un noklikšķiniet uz tās.

PALIELINĀT

Noklikšķinot, mēs nokļūsim citā logā, kurā mēs varam redzēt kodu, lai ievietotu šo ikonu mūsu dizainā.

PALIELINĀT

Mēs to vienkārši nokopējam un dodamies uz "menu.html" un ielīmējam tosekojoši …

PALIELINĀT

PALIELINĀT

Mēs arī zem tā pievienosim nosaukumu, kas ir centrēts …

PALIELINĀT

Pārbaudīsim, kā tas izskatās mūsu pārlūkprogrammā …

PALIELINĀT

Mēs redzam, ka mēs jau esam pievienojuši ikonu un teksta centru, tāpēc mēs atkārtojam šo darbību atlikušajiem 3 elementiem.

PALIELINĀT

9. solis

Ikonas ir diezgan mazas, es to palielināšu 3 reizes, šim nolūkam es pievienošu klasi "fa-3x".

PALIELINĀT

PALIELINĀT

10. solis

Tagad es nedaudz modificēšu css failu, lai pabeigtu efektu, es sākšu ar klases "box_menu" modificēšanu, pielīdzinot tekstu centram un piešķirot tam displeju = "bloks";

PALIELINĀT

11. solis

Vēlāk es uzrakstīšu klasi, lai kontrolētu, kā izskatīsies ikonas, un es definēšu, ka tās tiek attēlotas baltā krāsā, ka tām ir noapaļota mala un ka tām ir pārejas animācija …

PALIELINĀT

12. solis

Attiecībā uz tekstiem uz etiķetes

Es ievietošu tos baltā krāsā un nedaudz samazināšu necaurredzamību, pievienojot arī nelielu lejupvērstu animācijas efektu.

PALIELINĀT

13. solis

Tagad es definēšu, kā mūsu elementi uzvedīsies, virzot kursoru virs tā, un pievienošu tam nelielu animāciju, lai mīkstinātu efektu.

PALIELINĀT

Kad tas ir izdarīts, mēs varam teikt, ka esam pabeiguši efekta izstrādi, tagad mums vienkārši jāpievieno saites, kā vēlaties, es komentēju, ka šo efektu var izmantot arī, lai zem tiem ievietotu attēlus, kuriem ir aprakstošs teksts, piemēram, Piemēram, profesionāls portfelis, galerija vai preču katalogs, viss ir atstāts jūsu iztēlei …
Beigās Es atstāšu jums .zip ar avota koduJa jums patika šī apmācība, atstājiet savu komentāru, ja kaut kas nebija skaidrs, jautājiet man, vai vēlaties pamācību par konkrētu tēmu, dariet man zināmu …
Es ceru, ka tas jums noderēs, ar cieņu…

Fails ar avota kodu… Vai jums patika šī apmācība un palīdzējāt tai?Jūs varat apbalvot autoru, nospiežot šo pogu, lai sniegtu viņam pozitīvu punktu