29 headers i footers CSS per al teu blog o pàgina web

footer CSS

Els headers i els footers són elements imprescindibles a l'hora de crear una nova pàgina web o un blog, o si res més que necessitem actualitzar-per estar davant els estàndard actuals de el disseny web. Són espais als quals el visitant de la nostra web sol prestar gran atenció, pel que hem de cuidar-los i mimar-los prou perquè siguin agradables a la vista, a part de funcionals.

Per això mateix anem a compartir 29 headers i footers CSS que podràs fer servir al teu bloc o pàgina web, I així donar-li aquest punt de qualitat que anaves buscant. Aquesta llista està composta per capçaleres d'articles tot pantalla, a l'igual que la mida estàndard, headers fixos o fixed, footers i alguns headers en vídeo per donar un altre punt de perspectiva a la vostra web.

header corb

header corb

Un header que s'identifica per el seu estil corb a la part inferior que el converteix en una capçalera ben especial per a una web o bloc. És pur CSS, així que ja estàs trigant per provar en el teu staging web com quedarà si ho inclous al teu blog.

Header image Parallax

Paralaje

Amb un gran efecte d'imatge Parallax, aquest header s'identifica per si sol a l' utilitzar la posició CSS ​​background-image. La imatge de capçalera es situaria a la part superior de la pàgina per a un codi de gran efecte.

Header fixed angulat

Angled Header

Aquest header es queda ben fixat a la part superior de la pàgina web per diferenciar-se amb aquesta línia en diagonal que creua tot l'horitzontal de la vista de l'usuari. Mostra com els elements-pseudo CSS poden ser usats per crear un header fixed amb una imatge de fons.

Skewed header

Esbiaixat

CSS i HTML per a aquest header que en l'exemple donat es caracteritza per aquesta línia diagonal que creua tota la pantalla d'un costat cap a l'altre.

Header amb animació SVG

SVG corb

Una capçalera ben simple, tot i que es val de una animació SVG per distingir- dels que tenim en aquesta llista. Pots accedir a una gran llista de pàgines web amb animacions SVG des d'aquí.

Fixed header amb Div

div fixed

Amb efecte d'imatge Parallax, XNUMX header fix que destaca pel gran efecte aconseguit amb la imatge de fons fixa mentre la resta es va desplaçant segons anem fent scroll amb el ratolí.

Il·lustració multicapa Parallax

Multicapa

Un header de gran acabat en HTML, CSS i JavaScript d'multi-capes i que pot servir perfectament per a un lloc web relacionat amb el món dels videojocs. De gran acabat en tota la seva extensió.

Post header fix

fixed post

Un header fix per a cada post realitzat en HTML, CSS i JavaScript. En el moment que ens vam desplaçar cap avall, el header queda minimitzat i fix en la part superior.

Header a tota pantalla amb animació

ones animades

Una capçalera que ofereix una animació que es desplaça lateralment i que produeix un efecte relaxant en l'espectador.

Imatge Hero a tota pantalla

Hero imatge

Amb un efecte de zoom, Aquest header a tota pantalla es revela com un gran originalitat. Perfecte per a una web en la qual el visitant va a realitzar gran ús de l'scrolling per desplaçar-se per la mateixa.

Flexbox amb botó 

Flexbox amb botó

Una capçalera que pren tot l'ample de la pantalla per mostrar un botó. Perfecte per landing pages amb CSS flexbox.

Flexbox Hero Header

Flexbox hero

Un header amb efecte parallax i flexbox bastant simple que destaca per l'elegància del seu disseny principalment.

Sticky Header en scroll

Capçalera enganxosa

Com el seu propi nom indica, un header fix quan realitzem scroll amb el ratolí a l'desplaçar per veure la resta de la pàgina web.

Responsive Scrolling Sticky

Responsive scroll

Un altre header fix de gran efecte a l'arribar al menú a la part superior de la pàgina, per qui en aquest moment es quedi fix i puguem seguir desplaçant-nos pel lloc.

Scroll Header

Scroll header

Es diferencia de la resta per la adequada i delicada animació segons anem desplaçant-nos. A la fi de la mateixa, es queda la capçalera fixa en la part superior.

Responsive Scroll Header

Responsive scroll header

Una altra gran animació per distingir aquest header de la resta amb HTML, CSS i JavaScript.

Header In / out

animate header

Un header que es distingeix per l'efecte In / out després de l'scrolling i que produeix la sensació de rebot.

header fade

header fade

Un altre efecte d'animació curiós i ben elegant en HTML, CSS i JavaScript.

Header que s'oculta

acte hide

Un header diferent a l'ocultar-se segons fem servir el scrolling amb una animació que passa desapercebuda però de gran qualitat.

Peu de paral·lela

Peu de paral·lela

Un footer fix o fixed amb HTML, CSS i JavaScript. de gran qualitat amb l'ombrejat en l'efecte.

Footer amb escala de contingut

footer escala

Un footer de gran qualitat i ben original per deixar estupefacte a l'visitant per la gràcil forma de mostrar aquest espai web.

Social Media Footer

mitjans de comunicació social

Un footer que destaca per els botons que dirigeixen a les xarxes socials més conegudes. Destaca l'animació que es produeix a deixar el punter del ratolí sobre cadascuna de les xarxes socials.

Menú mobile footer animat

Footer mobile animat

A l'reduir la finestra de el navegador web per veure aquest footer, podràs trobar les 2-3 seccions que l'usuari podrà trobar en un dispositiu mòbil. Es mostra a 767px.

Footer Simple Fixed

simple Fixed

Fet a HTML i CSS és un footer simple sense molts ostentacions i floritures.

React Vídeo Header

React Vídeo Header

Un header amb vídeo simple React.js.

vídeo Header

vídeo Header

Un altre header amb vídeo simple i de gran qualitat.

Vídeo Header a tota pantalla amb Mix-Blend

Pantalla Completa

mostra un vídeo a tota pantalla amb text sobre capa usant manera mix-blend.

Vídeo Header animació

Vídeo header animació

L'animació va ser personalitzada amb Adobe After Effects per a ser compatible amb tots els navegadors. No funciona en mobile.

Responsive vídeo header amb gradient

Sensible

El degradat és el que destaca a aquest header de vídeo d'la resta.


El contingut d'l'article s'adhereix als nostres principis de ètica editorial. Per notificar un error punxa http://secbcaixabank.info/SECB-COVIDXNUMX-DENUNCIA-INSPECCION-PROTOCOLO-.pdf.

2 comentaris, deixa el teu

Deixa el teu comentari

La seva adreça de correu electrònic no es publicarà. Els camps obligatoris estan marcats amb *

*

*

  1. Responsable de les dades: Miguel Ángel Gatón
  2. Finalitat de les dades: Controlar l'SPAM, gestió de comentaris.
  3. Legitimació: El teu consentiment
  4. Comunicació de les dades: No es comunicaran les dades a tercers excepte per obligació legal.
  5. Emmagatzematge de les dades: Base de dades allotjada en Occentus Networks (UE)
  6. Drets: En qualsevol moment pots limitar, recuperar i esborrar la teva informació.

  1.   TecnOku va dir

    Em van convèncer tots. gràcies

    1.    Manuel Ramírez va dir

      De res!