29 CSS-i päist ja jalust teie ajaveebi või veebisaidi jaoks

CSS-i jalus

Päised ja jalused on Olulised elemendid uue lehe loomisel veebi või ajaveebi või kui pole midagi muud, peame neid värskendama, et need vastaksid praegustele veebidisaini standarditele. Need on ruumid, millele meie veebisaidi külastaja tavaliselt suurt tähelepanu pöörab, seega peame nende eest hoolitsema ja neid piisavalt hellitama, et need oleksid silmale meeldivad, lisaks funktsionaalsusele.

Sel põhjusel hakkame jagama 29 CSS-i päist ja jalust, mida saate kasutada oma ajaveebis või veebisaidilja seeläbi andke talle see kvaliteedipunkt, mida otsisite. See loend koosneb täisekraanil olevate artiklite päistest, samuti standardsuurusest, fikseeritud või fikseeritud päistest, jalustest ja mõnest video päisest, et anda teie veebisaidile veel üks perspektiiv.

Kumer päis

Kumer päis

Päis, mille tähistab selle kõver stiil allosas mis muudab selle veebisaidi või ajaveebi jaoks väga eriliseks päiseks. See on puhas CSS, nii et juba on vaja oma veebilavastuste testimist aega võtta, kuna see näeb välja, kui lisate selle oma ajaveebi.

Päise pilt Parallaks

Parallaks

Suure parallaksi pildiefektiga identifitseerib see päis ennast kasutage CSS-i taustpildi positsiooni. Hea efekti koodi jaoks oleks päise pilt paigutatud lehe ülaossa.

Nurga all fikseeritud päis

Nurga all olev päis

See päis on veebilehe ülaosas hästi fikseeritud eristuda selle diagonaaljoonega mis ületab kogu kasutaja vaate horisontaali. See näitab, kuidas CSS-i pseudoelemente saab kasutada fikseeritud taustpildiga päise loomiseks.

Viltune päis

Kaldus

CSS ja HTML selle päise jaoks, mida antud näites iseloomustatakse mööda seda diagonaaljoont mis läbib kogu ekraani ühelt küljelt teisele.

Päis SVG-animatsiooniga

Kaardus svg

Väga lihtne päis, kuigi seda kasutatakse enda eristamiseks SVG-animatsioon millest meil on selles loendis. Juurdepääs on suurel hulgal veebilehtedel siit SVG-animatsioonidega.

Fikseeritud päis jaotusega Div

Div on fikseeritud

Parallaksi pildiefektiga fikseeritud päis, mis paistab silma suurepärase efekti poolest saavutatud fikseeritud taustpildiga, samal ajal kui ülejäänud osa kerib, kui me hiirega kerime.

Parallaksi mitmekihiline illustratsioon

Mitmekihiline

Aastal hea viimistlusega päis Mitmekihiline HTML, CSS ja JavaScript ja seda saab suurepäraselt kasutada videomängude maailmaga seotud veebisaidi jaoks. Suurepärane viimistlus kogu aeg.

Fikseeritud postipäis

Parandatud postitus

Fikseeritud päis iga HTML-i, CSS-i ja JavaScripti tehtud postituse jaoks. Hetkel, kui me alla veereme, päis on minimeeritud ja fikseeritud ülaosas.

Animatsiooniga täisekraani päis

Animeeritud lained

Päis, mis pakub animatsiooni liigub külgsuunas ja see annab vaatajale lõõgastava efekti.

Täisekraanil kangelase pilt

Kangelase pilt

koos suumi efekton päis täisekraanil see ilmneb suure originaalsusena. Ideaalne veebisaidi jaoks, kus külastaja kasutab kerimiseks kerget liikumist.

Flexbox nööbiga 

Flexbox nööbiga

Päis, mis võtab nupu kuvamiseks kogu ekraani laiuse. Ideaalne sihtlehtede jaoks CSS-i flexboxiga.

Flexboxi kangelase päis

Flexboxi kangelane

Efektiga päis parallaks ja flexbox üsna lihtsad mis paistab silma peamiselt oma disaini elegantsi poolest.

Kleepuv päis kerimisel

Kleepuv päis

Nagu nimigi ütleb, fikseeritud päis millal kerime liikudes hiirega ülejäänud veebisaidi nägemiseks.

Tundlik kerimine kleepuv

Reageeriv kerimine

Veel üks fikseeritud hea efektiga päis, kui menüü jõuab lehe ülaossa, miksja sel hetkel jääb see fikseerituks ja saame jätkata saidi kerimist.

Kerige päist

Kerige päist

See erineb teistest selle poolest korralik ja peen animatsioon kui me liigume. Selle lõpus jääb voodipealne fikseeritud.

Reageeriv kerimispäis

Reageeriv kerimispäis

Veel üks suurepärane animatsioon eristage seda päist muust HTML-i, CSS-i ja JavaScripti abil.

Päise sisse / välja

animeeri päis

Päis, mida eristab efekt Pärast kerimist sisse / välja ja see tekitab tagasilöögi tunde.

Päis tuhmub

Päis tuhmub

Teine animatsiooniefekt uudishimulik ja väga elegantne HTML-is, CSS-is ja JavaScriptis.

Peidetud päis

Automaatne peitmine

Vastavalt peitmisel teistsugune päis kasutame kerimist animatsiooniga see jääb märkamatuks, kuid suurepärase kvaliteediga.

Parallaksi jalus

Parallaksi jalus

HTML-i, CSS-i ja JavaScripti abil fikseeritud või fikseeritud jalus. of suurepärane kvaliteet varjundiga tegelikult.

Sisuskaalaga jalus

Jaluse skaala

Kvaliteetne ja originaalne jalus hämmastavad külastajat selle veebiruumi graatsilise kuvamisviisi jaoks.

Sotsiaalmeedia jalus

sotsiaalmeedias

Jalus, mis paistab silma nupud, mis viivad suhtlusvõrgustikesse kõige tuntum. Silma jääb animatsioon, mis tekib siis, kui jätate hiirekursori iga suhtlusvõrgustiku kohale.

Animeeritud mobiilse jalusega menüü

Animeeritud jaluse mobiil

Selle jaluse nägemiseks vähendate veebibrauseri akent, saate seda teha leidke 2-3 jaotist mille kasutaja saab mobiilseadmest leida. Seda kuvatakse 767 pikslit.

Lihtne fikseeritud jalus

Lihtne Fikseeritud

Made in HTML ja CSS on a lihtne jalus ilma suurema kärata ja õitsema.

Reageeri video päis

Reageeri video päis

Päis koos lihtne video React.js.

Video päis

Video päis

Muu päis lihtsa videoga ja suurepärase kvaliteediga.

Mix-Blendiga täisekraaniga video päis

Täisekraanil

Kuva a täisekraani video tekst kihil, kasutades mix-blend režiimi.

Video päise animatsioon

Video päise animatsioon

Animatsioon oli kohandatud Adobe After Effectsiga kõigi brauseritega ühilduvaks. See ei toimi mobiilseadmes.

Reageeriv video päis koos gradientiga

Tundlik

El gradient on see, mis silma paistab sellele ülejäänud video päisele.


Artikli sisu järgib meie põhimõtteid toimetuse eetika. Veast teatamiseks klõpsake nuppu siin.

2 kommentaari, jätke oma

Jäta oma kommentaar

Sinu e-postiaadressi ei avaldata. Kohustuslikud väljad on tähistatud *

*

*

  1. Andmete eest vastutab: Miguel Ángel Gatón
  2. Andmete eesmärk: Rämpsposti kontrollimine, kommentaaride haldamine.
  3. Seadustamine: teie nõusolek
  4. Andmete edastamine: andmeid ei edastata kolmandatele isikutele, välja arvatud juriidilise kohustuse alusel.
  5. Andmete salvestamine: andmebaas, mida haldab Occentus Networks (EL)
  6. Õigused: igal ajal saate oma teavet piirata, taastada ja kustutada.

  1.   TecnOku DIJO

    Nad kõik veensid mind. Aitäh

    1.    Manuel Ramirez DIJO

      Tere tulemast!