29 CSS antraštės ir poraštės jūsų tinklaraščiui ar svetainei

CSS poraštė

Antraštės ir poraštės yra Esminiai elementai kuriant naują puslapį žiniatinklyje ar tinklaraštyje, arba jei nieko daugiau, mes turime juos atnaujinti, kad atitiktų dabartinius interneto dizaino standartus. Tai yra erdvės, kurioms mūsų svetainės lankytojas paprastai skiria didelį dėmesį, todėl mes turime jomis rūpintis ir pakankamai palepinti, kad jos būtų malonios akiai, be to, kad yra funkcionalios.

Dėl šios priežasties ketiname dalintis 29 CSS antraštės ir poraštės, kurias galite naudoti savo tinklaraštyje ar svetainėjeir tokiu būdu suteikite jam tą kokybės tašką, kurio ieškojote. Šį sąrašą sudaro viso ekrano straipsnių antraštės, taip pat standartinio dydžio, fiksuotos ar fiksuotos antraštės, poraštės ir kai kurios vaizdo antraštės, kad jūsų svetainė būtų dar perspektyvesnė.

Lenkta antraštė

Lenkta antraštė

Antraštė, kurią identifikuoja jo išlenktas stilius apačioje todėl tai yra labai ypatinga svetainės ar tinklaraščio antraštė. Tai grynas CSS, todėl jau reikia laiko, kad žiniatinklyje išbandytumėte, kaip jis atrodys, jei įtrauksite jį į savo tinklaraštį.

Antraštės vaizdas paralaksas

Parallax

Su puikiu paralaksinio vaizdo efektu ši antraštė identifikuoja save pagal naudoti CSS fono paveikslėlio padėtį. Antraštės vaizdas būtų išdėstytas puslapio viršuje, kad gautumėte puikų efekto kodą.

Kampuota fiksuota antraštė

Kampuota antraštė

Ši antraštė yra gerai pritvirtinta tinklalapio viršuje diferencijuoti su ta įstriža linija kuris kerta visą naudotojo vaizdo horizontalią dalį. Tai parodo, kaip CSS pseudoelementai gali būti naudojami kuriant fiksuotą antraštę su fono vaizdu.

Iškreipta antraštė

Iškreiptas

CSS ir HTML šiai antraštei, kuri apibūdinama pateiktame pavyzdyje palei tą įstrižainę kad kerta visą ekraną iš vienos pusės į kitą.

Antraštė su SVG animacija

Kreivoji svg

Labai paprasta antraštė, nors ji ir naudoja SVG animacija, kad galėtumėte atsiskirti iš tų, kuriuos turime šiame sąraše. Galite pasiekti didelį tinklalapių sąrašą su SVG animacijomis iš čia.

Fiksuota antraštė su Div

Div fiksuota

Su paralakso vaizdo efektu fiksuota antraštė, išsiskirianti puikiu efektu pasiekta naudojant fiksuotą fono paveikslėlį, o visa kita slenka mums slinkant pele.

Paralakso daugiasluoksnė iliustracija

Daugiasluoksnis

Puikios pabaigos antraštė Daugiasluoksnis HTML, CSS ir „JavaScript“ ir tai galima puikiai naudoti svetainėje, susijusioje su vaizdo žaidimų pasauliu. Puiki apdaila visame.

Ištaisyta pranešimo antraštė

Fiksuotas pranešimas

Fiksuota kiekvieno įrašo, sukurto HTML, CSS ir „JavaScript“, antraštė. Tą akimirką, kai riedame žemyn, antraštė sumažinama ir užfiksuotas viršuje.

Viso ekrano antraštė su animacija

Animacinės bangos

Antraštė, siūlanti animaciją juda į šoną ir tai sukuria atpalaiduojantį efektą žiūrovui.

Herojaus vaizdas per visą ekraną

Herojaus vaizdas

su mastelio efektasyra antraštė per visą ekraną jis atskleidžiamas kaip vienas originalaus. Puikiai tinka svetainei, kurioje lankytojas puikiai naudos slinkimą, norėdamas joje judėti.

„Flexbox“ su mygtuku 

„Flexbox“ su mygtuku

Antraštė, kuri užima visą ekrano plotį, kad būtų rodomas mygtukas. Puikiai tinka nukreipimo puslapiams su CSS „flexbox“.

„Flexbox Hero Header“

„Flexbox“ herojus

Antraštė su efektu paralaksas ir „flexbox“ yra gana paprasti kad daugiausia išsiskiria savo dizaino elegancija.

Lipni antraštė slinkties metu

Lipni antraštė

Kaip rodo jo pavadinimas, fiksuota antraštė, kai judėdami slenkame pele norėdami pamatyti likusį tinklalapį.

Reaguojantis slinkiantis lipnus

Reaguojantis slinkimas

Kodėl fiksuota antraštė, turinti puikų efektą, kai meniu pasiekia puslapio viršųir tuo metu jis lieka fiksuotas ir mes galime toliau slinkti svetainėje.

Slinkite antraštę

Slinkite antraštę

Nuo kitų ji skiriasi tinkama ir subtili animacija kaip mes judame. Jo pabaigoje galvūgalis lieka fiksuotas viršuje.

Interaktyvi slinkties antraštė

Interaktyvi slinkties antraštė

Dar viena puiki animacija atskirti šią antraštę nuo likusios su HTML, CSS ir „JavaScript“.

Antraštės įėjimas / išėjimas

animuoti antraštę

Antraštė, išsiskirianti poveikiu Įėjimas / išėjimas po slinkimo ir tai sukelia atšokimo pojūtį.

Antraštė išnyksta

Antraštė išnyksta

Kitas animacijos efektas smalsu ir labai elegantiška HTML, CSS ir „JavaScript“.

Antraštė, kuri yra paslėpta

Automatiškai slėpti

Skirtinga antraštė slepiantis pagal mes naudojame slinkimą su animacija tai nepastebima, bet labai kokybiška.

Paralakso poraštė

Paralakso poraštė

Fiksuota arba fiksuota poraštė su HTML, CSS ir „JavaScript“. Apie puiki kokybė su šešėliais iš tikrųjų.

Poraštė su turinio skale

Poraštės skalė

Aukštos kokybės ir originali poraštė stebina lankytoją grakščiam šios interneto erdvės rodymo būdui.

Socialinės žiniasklaidos poraštė

socialinės žiniasklaidos

Poraštė, kuri išsiskiria mygtukus, nukreipiančius į socialinius tinklus Žinomiausias. Išsiskiria animacija, atsirandanti palikus pelės žymeklį virš kiekvieno socialinio tinklo.

Animuotas mobiliosios poraštės meniu

Animuotas poraštės mobilusis

Sumažinę žiniatinklio naršyklės langą, kad galėtumėte peržiūrėti šią poraštę, galėsite suraskite 2-3 skyrius kurias vartotojas gali rasti mobiliajame įrenginyje. Jis rodomas 767 taškų.

Paprastoji poraštė fiksuota

Paprasta fiksuota

Pagaminta HTML ir CSS yra paprasta poraštė be didelių fanfarų ir maivymosi.

Reaguoti vaizdo antraštę

Reaguoti vaizdo antraštę

Antraštė su paprastas vaizdo įrašas React.js.

Vaizdo įrašo antraštė

Vaizdo įrašo antraštė

Kitas antraštė su paprastu vaizdo įrašu ir puikios kokybės.

Viso ekrano vaizdo antraštė su „Mix-Blend“

Per visą ekraną

Rodyti a viso ekrano vaizdo įrašas su tekstu ant sluoksnio naudojant mišinio maišymo režimą.

Vaizdo įrašo antraštės animacija

Vaizdo įrašo antraštės animacija

Animacija buvo pritaikyta „Adobe After Effects“ kad būtų suderinama su visomis naršyklėmis. Jis neveikia mobiliajame telefone.

Interaktyvi vaizdo įrašo antraštė su gradientu

Reaguojantis

El gradientas yra tai, kas išsiskiria prie šios vaizdo įrašo antraštės iš likusių.


Straipsnio turinys atitinka mūsų principus redakcijos etika. Norėdami pranešti apie klaidą, spustelėkite čia.

2 komentarai, palikite savo

Palikite komentarą

Jūsų elektroninio pašto adresas nebus skelbiamas. Privalomi laukai yra pažymėti *

*

*

  1. Atsakingas už duomenis: Miguel Ángel Gatón
  2. Duomenų paskirtis: kontroliuoti šlamštą, komentarų valdymą.
  3. Įteisinimas: jūsų sutikimas
  4. Duomenų perdavimas: Duomenys nebus perduoti trečiosioms šalims, išskyrus teisinius įsipareigojimus.
  5. Duomenų saugojimas: „Occentus Networks“ (ES) talpinama duomenų bazė
  6. Teisės: bet kuriuo metu galite apriboti, atkurti ir ištrinti savo informaciją.

  1.   „TecnOku“. sakė

    Jie visi mane įtikino. Dėkoju

    1.    Manuelis Ramirezas sakė

      Prašom!