Galvenes un kājenes ir Būtiski elementi, veidojot jaunu lapu tīmeklis vai emuārs, vai, ja nekas cits mums nav jāatjaunina, lai tie atbilstu pašreizējiem tīmekļa dizaina standartiem. Tās ir telpas, kurām mūsu vietnes apmeklētājs parasti pievērš lielu uzmanību, tāpēc mums par tām ir jārūpējas un jāpalutina pietiekami, lai tās būtu patīkamas acīm, ne tikai funkcionālas.
Tāpēc mēs dalīsimies 29 CSS galvenes un kājenes, kuras varat izmantot savā emuārā vai vietnē, un tādējādi piešķiriet tai to kvalitātes punktu, kuru meklējāt. Šis saraksts sastāv no pilna ekrāna rakstu galvenēm, kā arī standarta izmēra, fiksētām vai fiksētām galvenēm, kājenēm un dažām video galvenēm, lai jūsu vietnei piešķirtu vēl vienu perspektīvu.
Izliekta galvene
Galvene, kuru identificē tā izliektais stils apakšā kas padara to par ļoti īpašu vietnes vai emuāra galveni. Tā ir tīra CSS, tāpēc jau ir vajadzīgs laiks, lai pārbaudītu tīmekļa iestudējumā, kā tas izskatīsies, ja to iekļausiet savā emuārā.
Galvenā attēla paralakse
Ar lielisku paralakse attēla efektu šī galvene identificē sevi pēc izmantot CSS fona attēla pozīciju. Galvenes attēls būtu novietots lapas augšdaļā, lai iegūtu lielisku efektu kodu.
Stūra fiksēta galvene
Šī galvene ir labi fiksēta tīmekļa lapas augšdaļā uz diferencēt ar šo diagonālo līniju kas šķērso visu lietotāja skata horizontāli. Tas parāda, kā CSS pseidoelementus var izmantot, lai izveidotu fiksētu galveni ar fona attēlu.
Izliekta galvene
CSS un HTML šai galvenei, kas aprakstītajā piemērā ir raksturota pa šo diagonālo līniju kas šķērso visu ekrānu no vienas puses uz otru.
Galvene ar SVG animāciju
Ļoti vienkārša galvene, lai gan tā tiek izmantota SVG animācija, lai atšķirtu sevi kas mums ir šajā sarakstā. Jūs varat piekļūt lielam tīmekļa lapu sarakstam ar SVG animācijām no šejienes.
Fiksēta galvene ar Div
Ar paralakse attēla efektu fiksēta galvene, kas izceļas ar lielisko efektu sasniegts ar fiksēto fona attēlu, kamēr pārējais ritina, kamēr mēs ritinām ar peli.
Paralaksa daudzslāņu ilustrācija
Lieliskas finiša galvenes Daudzslāņu HTML, CSS un JavaScript un to var lieliski izmantot vietnei, kas saistīta ar videospēļu pasauli. Lielisks finišs visā garumā.
Fiksēta ziņas galvene
Fiksēta galvene katrai ziņai, kas izveidota HTML, CSS un JavaScript. Brīdī, kad mēs ripojam lejā, galvene ir samazināta līdz minimumam un fiksēts augšpusē.
Pilnekrāna galvene ar animāciju
Galvene, kas piedāvā animāciju pārvietojas uz sāniem un tas rada relaksējošu efektu skatītājam.
Varoņa attēls pilnekrāna režīmā
ar tālummaiņas efektsir galvenes pilnekrāna režīmā tas tiek atklāts kā ļoti oriģināls. Lieliski piemērots vietnei, kurā apmeklētājs ļoti izmantos ritināšanu, lai pārvietotos pa to.
Flexbox ar pogu
Galvene, kas aizņem visu ekrāna platumu, lai parādītu pogu. Lieliski piemērota galvenajām lapām ar CSS flexbox.
Flexbox varoņa galvene
Galvene ar efektu paralakse un flexbox ir diezgan vienkārši kas galvenokārt izceļas ar tā dizaina eleganci.
Ritināmā ir lipīga galvene
Kā norāda tās nosaukums, fiksēta galvene, kad kustoties mēs ritinām ar peli lai redzētu pārējo tīmekļa lapu.
Atsaucīga ritināšana
Kāpēc vēl viena fiksēta galvene ar lielu efektu, kad izvēlne sasniedz lapas augšdaļuun tajā brīdī tas paliek nemainīgs un mēs varam turpināt ritināt vietni.
Ritināt galveni
Tas atšķiras no pārējiem ar pareiza un smalka animācija kā mēs kustamies. Tā beigās galvas klājs paliek fiksēts augšpusē.
Atsaucīga ritināšanas galvene
Vēl viena lieliska animācija atšķirt šo galveni no pārējās ar HTML, CSS un JavaScript.
Header In / Out
Galvene, kas atšķiras ar efektu Ieeja / izeja pēc ritināšanas un tas rada atsitiena sajūtu.
Galvenes izbalināt
Vēl viens animācijas efekts ziņkārīgs un ļoti elegants HTML, CSS un JavaScript.
Galvene, kas ir paslēpta
Atšķirīga galvene, slēpjot atbilstoši mēs izmantojam ritināšanu ar animāciju tas paliek nepamanīts, bet ļoti kvalitatīvs.
Paralakses kājene
Fiksēta vai fiksēta kājene ar HTML, CSS un JavaScript. No lieliska kvalitāte ar ēnojumu spēkā.
Kājene ar satura skalu
Augstas kvalitātes un oriģināla kājene priekš pārsteigt apmeklētāju par graciozu šīs tīmekļa vietas parādīšanas veidu.
Sociālo mediju kājene
Kājene, kas izceļas pogas, kas ved uz sociālajiem tīkliem Vispazīstamākais. Izceļas animācija, kas rodas, kad peles rādītājs tiek atstāts virs katra sociālā tīkla.
Animēta mobilās kājenes izvēlne
Samazinot tīmekļa pārlūkprogrammas logu, lai skatītu šo kājeni, jūs varēsiet atrodiet 2-3 sadaļas ko lietotājs var atrast mobilajā ierīcē. Tas tiek parādīts 767 pikseļos.
Kājene Vienkārši Fiksēta
Izgatavots HTML un CSS ir vienkārša kājene bez lielām fanfarām un frilliem.
Reaģēt video galveni
Galvene ar vienkāršs video React.js.
Video galvene
Cits galvene ar vienkāršu video un izcilas kvalitātes.
Pilnekrāna video galvene ar Mix-Blend
Parādīt a pilnekrāna video ar tekstu uz slāņa, izmantojot mix-blend režīmu.
Video galvenes animācija
Animācija bija pielāgots ar Adobe After Effects lai tas būtu saderīgs ar visām pārlūkprogrammām. Tas nedarbojas mobilajā ierīcē.
Reaģējoša video galvene ar gradientu
El gradients ir tas, kas izceļas uz šo video galveni no pārējiem.
Viņi visi mani pārliecināja. Paldies
Nav par ko!