Overskrifter og bunntekster er Viktige elementer når du oppretter en ny side web eller en blogg, eller hvis ikke noe annet, trenger vi å oppdatere dem for å oppfylle gjeldende standarder for webdesign. Det er rom som besøkende på nettstedet vårt vanligvis legger stor vekt på, så vi må ta vare på dem og skjemme dem bort slik at de er behagelige for øyet, bortsett fra å være funksjonelle.
Derfor skal vi dele 29 CSS-topp- og bunntekster som du kan bruke på bloggen eller nettstedet ditt, og dermed gi det det kvalitetspoenget du lette etter. Denne listen består av fullskjerms artikkeloverskrifter, samt standardstørrelse, faste eller faste topptekster, bunntekster og noen videooverskrifter for å gi et annet perspektiv til nettstedet ditt.
Buet topptekst
En topptekst som er identifisert av sin buede stil nederst noe som gjør det til en veldig spesiell overskrift for et nettsted eller en blogg. Det er ren CSS, så det tar allerede tid å teste i web-scenen din hvordan den vil se ut hvis du inkluderer den i bloggen din.
Toppbilde Parallaks
Med en flott Parallax-bildeeffekt identifiserer denne overskriften seg ved bruk CSS bakgrunnsbildeposisjon. Overskriftsbildet vil være plassert øverst på siden for å få god effektkode.
Vinklet fast topptekst
Denne overskriften er godt festet øverst på websiden til skille med den diagonale linjen som krysser hele horisonten av brukerens visning. Den viser hvordan CSS pseudo-elementer kan brukes til å lage en fast topptekst med bakgrunnsbilde.
Skjev header
CSS og HTML for denne overskriften som i det gitte eksemplet er preget langs den diagonale linjen som krysser hele skjermen fra den ene siden til den andre.
Topptekst med SVG-animasjon
En veldig enkel header, selv om den bruker en SVG-animasjon for å skille deg ut av de vi har på denne listen. Du kan få tilgang til en stor liste med websider med SVG-animasjoner herfra.
Fast topptekst med Div
Med Parallax bildeeffekt, en fast topptekst som skiller seg ut for den store effekten oppnås med det faste bakgrunnsbildet mens resten blar mens vi blar med musen.
Parallaks flerlagsillustrasjon
Et heading med en flott avslutning i Flerlags HTML, CSS og JavaScript og som kan brukes perfekt til et nettsted relatert til videospillverdenen. Flott finish hele veien.
Fast innleggshode
En fast overskrift for hvert innlegg laget i HTML, CSS og JavaScript. Øyeblikket vi ruller ned, overskriften er minimert og festet på toppen.
Toppskjerm med animasjon
En topptekst som gir en animasjon som beveger seg sideveis og som gir en avslappende effekt på betrakteren.
Heltbilde i fullskjerm
med en zoomeffekter topptekst i full skjerm det blir avslørt som en av stor originalitet. Perfekt for et nettsted der den besøkende kommer til å bruke god rulling for å bevege seg rundt den.
Flexbox med knapp
En topptekst som tar hele bredden på skjermen for å vise en knapp. Perfekt for destinasjonssider med CSS flexbox.
Flexbox heltehode
En header med effekt parallax og flexbox ganske enkelt som skiller seg ut for elegansen i designet hovedsakelig.
Sticky Header på bla
Som navnet antyder, en fast overskrift når vi blar med musen når vi beveger oss for å se resten av websiden.
Responsiv rulling klebrig
En annen fast topptekst med stor effekt når menyen når toppen av siden, hvorforog i det øyeblikket forblir det fast og vi kan fortsette å rulle på siden.
Bla til topptekst
Det skiller seg fra resten av riktig og delikat animasjon når vi beveger oss. På slutten av det forblir hodegjerdet fast øverst.
Responsiv rullehode
Nok en flott animasjon for skille denne overskriften fra resten med HTML, CSS og JavaScript.
Topptekst inn / ut
En topptekst som preges av effekten Inn / ut etter rulling og det gir følelsen av rebound.
Topptekst blekner
Nok en animasjonseffekt nysgjerrig og veldig elegant i HTML, CSS og JavaScript.
Topptekst som er skjult
En annen header når man gjemmer seg i henhold til vi bruker rulling med en animasjon det går ubemerket, men av god kvalitet.
Parallaks bunntekst
En fast eller fast bunntekst med HTML, CSS og JavaScript. Av flott kvalitet med skyggelegging i kraft.
Bunntekst med innholdsskala
En original bunntekst av høy kvalitet for forbauser den besøkende for den grasiøse måten å vise dette webområdet på.
Bunntekst for sosiale medier
En bunntekst som skiller seg ut for knappene som fører til sosiale nettverk mest kjent. Animasjonen som oppstår når du lar musepekeren over hvert av de sosiale nettverkene skiller seg ut.
Animert bunntekstmeny
Ved å redusere nettleservinduet for å vise denne bunnteksten, vil du kunne finn 2-3 seksjoner som brukeren kan finne på en mobil enhet. Den vises med 767 piksler.
Enkel fast bunntekst
Laget i HTML og CSS er en enkel bunntekst uten mye fanfare og blomstre.
Reager videooverskrift
En header med enkel video React.js.
Videooverskrift
Andre topptekst med enkel video og av god kvalitet.
Fullskjerm videooverskrift med miks-blanding
Vis a fullskjermsvideo med tekst på lag ved bruk av blandingsmodus.
Video Header animasjon
Animasjonen var tilpasset med Adobe After Effects for å være kompatibel med alle nettlesere. Det fungerer ikke på mobil.
Responsiv videooverskrift med gradient
El gradient er det som skiller seg ut til denne videooverskriften fra resten.
De overbeviste meg alle. Takk
Værsågod!