29 CSS-sidhuvuden och sidfot för din blogg eller webbplats

CSS-sidfot

Sidhuvuden och sidfoten är Viktiga element när du skapar en ny sida webb eller en blogg, eller om inget annat behöver vi uppdatera dem för att uppfylla gällande standarder för webbdesign. Det här är utrymmen som besökaren på vår webbplats brukar ägna stor uppmärksamhet åt, så vi måste ta hand om dem och skämma bort dem så att de är behagliga för ögat, förutom att de är funktionella.

Av den anledningen kommer vi att dela 29 CSS-sidhuvuden och sidfot som du kan använda på din blogg eller webbplatsoch därmed ge den den kvalitetspoäng som du letade efter. Den här listan består av artikelrubriker i helskärm, såväl som standardstorlek, fasta eller fasta sidhuvuden, sidfötter och vissa videohuvuden för att ge din webbplats ytterligare ett perspektiv.

Böjd rubrik

Böjd rubrik

En rubrik som identifieras av dess böjda stil längst ner vilket gör det till en mycket speciell rubrik för en webbplats eller blogg. Det är ren CSS, så det tar redan tid att testa på din webbstaging hur det kommer att se ut om du inkluderar det i din blogg.

Rubrikbild Parallax

Parallax

Med en fantastisk Parallax-bildeffekt identifierar denna rubrik sig genom använd CSS bakgrundsbildposition. Rubrikbilden placeras högst upp på sidan för att ge stor effektkod.

Sidhuvud fast vinklat

Vinklad rubrik

Denna rubrik är väl fixerad högst upp på webbsidan till differentiera med den diagonala linjen som passerar hela horisontalen i användarens vy. Den visar hur CSS-pseudoelement kan användas för att skapa en fast rubrik med en bakgrundsbild.

Skev huvud

skev

CSS och HTML för denna rubrik som i det givna exemplet kännetecknas längs den diagonala linjen som korsar hela skärmen från ena sidan till den andra.

Rubrik med SVG-animering

Böjd svg

En mycket enkel rubrik, även om den använder en SVG-animation för att urskilja dig själv som vi har i den här listan. Du kan komma åt en stor lista med webbsidor med SVG-animationer härifrån.

Fast rubrik med Div

Div fast

Med Parallax bildeffekt, en fast rubrik som sticker ut för den stora effekten uppnås med den fasta bakgrundsbilden medan resten rullar när vi rullar med musen.

Parallax flerskiktsillustration

Flera lager

Ett huvud med bra mål i Flerskiktad HTML, CSS och JavaScript och det kan användas perfekt för en webbplats relaterad till videospelvärlden. Bra finish hela tiden.

Fast inläggsrubrik

Fast inlägg

En fast rubrik för varje inlägg som görs i HTML, CSS och JavaScript. När vi rullar ner, rubriken minimeras och fixeras högst upp.

Rubrik i helskärm med animering

Animerade vågor

En rubrik som ger en animering som rör sig i sidled och det ger en avslappnande effekt på betraktaren.

Hjältebild helskärm

Hjältebild

med en zoomeffektdetta rubriken helskärm det avslöjas som en av stor originalitet. Perfekt för en webbplats där besökaren kommer att göra stor nytta av att bläddra för att flytta runt den.

Flexbox med knapp 

Flexbox med knapp

En rubrik som tar hela skärmens bredd för att visa en knapp. Perfekt för målsidor med CSS flexbox.

Flexbox hjältehuvud

Flexbox hjälte

En rubrik med effekt parallax och flexbox ganska enkelt som främst sticker ut för elegansen i dess design.

Klibbig rubrik på rullning

Klibbig rubrik

Som namnet antyder, en fast rubrik när vi rullar med musen när vi rör oss för att se resten av webbsidan.

Responsiv rullning klibbig

Responsiv rullning

En annan fast rubrik med stor effekt när menyn når högst upp på sidan, varföroch i det ögonblicket förblir det fast och vi kan fortsätta rulla på webbplatsen.

Bläddra i rubrik

Bläddra i rubrik

Det skiljer sig från resten av rätt och känslig animering när vi rör oss. I slutet av det förblir huvudgaveln fast överst.

Responsiv rullningsrubrik

Responsiv rullhuvud

En annan fantastisk animation för särskil denna rubrik från resten med HTML, CSS och JavaScript.

Rubrik in / ut

animera rubrik

En rubrik som kännetecknas av effekten In / ut efter rullning och det ger känslan av rebound.

Sidhuvud bleknar

Sidhuvud bleknar

En annan animeringseffekt nyfiken och mycket elegant i HTML, CSS och JavaScript.

Rubrik som är dold

Dölj automatiskt

En annan rubrik när man gömmer sig enligt vi använder rullning med en animering det går obemärkt över men av hög kvalitet.

Parallax sidfot

Parallax sidfot

En fast eller fast sidfot med HTML, CSS och JavaScript. Av bra kvalitet med skuggning i själva verket.

Sidfot med innehållsskala

Sidfotskala

En högkvalitativ och originalfot för förvåna besökaren för det graciösa sättet att visa detta webbutrymme.

Sidfot för sociala medier

sociala medier

En sidfot som sticker ut för knapparna som leder till sociala nätverk mest känd. Animationen som uppstår när du lämnar muspekaren över vart och ett av de sociala nätverken sticker ut.

Animerad sidfotemeny

Animerad sidfot mobil

Genom att krympa ditt webbläsarfönster för att se den här sidfoten kan du hitta 2-3 sektioner som användaren kan hitta på en mobil enhet. Den visas med 767 pixlar.

Sidfot enkel fixad

Enkel fixad

Tillverkad i HTML och CSS är en enkel sidfot utan mycket fanfare och blomstra.

Reagera videohuvudet

Reagera videohuvudet

En rubrik med enkel video React.js.

Videohuvud

Videohuvud

Andra rubrik med enkel video och av hög kvalitet.

Helskärmsvideohuvud med mix-blandning

Helskärm

Visa a helskärmsvideo med text på lager med hjälp av mix-blend-läge.

Video Header animation

Video header animation

Animationen var anpassad med Adobe After Effects för att vara kompatibel med alla webbläsare. Det fungerar inte på mobilen.

Responsiv videohuvud med lutning

Mottaglig

El lutning är det som sticker ut till den här videohuvudet från resten.


Innehållet i artikeln följer våra principer om redaktionell etik. Klicka på för att rapportera ett fel här.

2 kommentarer, lämna din

Lämna din kommentar

Din e-postadress kommer inte att publiceras.

*

*

  1. Ansvarig för uppgifterna: Miguel Ángel Gatón
  2. Syftet med uppgifterna: Kontrollera skräppost, kommentarhantering.
  3. Legitimering: Ditt samtycke
  4. Kommunikation av uppgifterna: Uppgifterna kommer inte att kommuniceras till tredje part förutom enligt laglig skyldighet.
  5. Datalagring: databas värd för Occentus Networks (EU)
  6. Rättigheter: När som helst kan du begränsa, återställa och radera din information.

  1.   Technoku sade

    De övertygade mig alla. Tack

    1.    Manuel Ramirez sade

      Varsågod!