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.
Índex
- 1 header corb
- 2 Header image Parallax
- 3 Header fixed angulat
- 4 Skewed header
- 5 Header amb animació SVG
- 6 Fixed header amb Div
- 7 Il·lustració multicapa Parallax
- 8 Post header fix
- 9 Header a tota pantalla amb animació
- 10 Imatge Hero a tota pantalla
- 11 Flexbox amb botó
- 12 Flexbox Hero Header
- 13 Sticky Header a scroll
- 14 Responsive Scrolling Sticky
- 15 Scroll Header
- 16 Responsive Scroll Header
- 17 Header In / out
- 18 header fade
- 19 Header que s'oculta
- 20 Peu de paral·lela
- 21 Footer amb escala de contingut
- 22 Social Media Footer
- 23 Menú mobile footer animat
- 24 Footer Simple Fixed
- 25 React Vídeo Header
- 26 vídeo Header
- 27 Vídeo Header a tota pantalla amb Mix-Blend
- 28 Vídeo Header animació
- 29 Responsive vídeo header amb gradient
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
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
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
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
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
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
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
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ó
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
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ó
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
Un header amb efecte parallax i flexbox bastant simple que destaca per l'elegància del seu disseny principalment.
Sticky Header a scroll
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
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
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
Una altra gran animació per distingir aquest header de la resta amb HTML, CSS i JavaScript.
Header In / out
Un header que es distingeix per l'efecte In / out després de l'scrolling i que produeix la sensació de rebot.
header fade
Un altre efecte d'animació curiós i ben elegant en HTML, CSS i JavaScript.
Header que s'oculta
Un header diferent a l'ocultar-se segons fem servir el scrolling amb una animació que passa desapercebuda però de gran qualitat.
Un footer fix o fixed amb HTML, CSS i JavaScript. de gran qualitat amb l'ombrejat en l'efecte.
Un footer de gran qualitat i ben original per deixar estupefacte a l'visitant per la gràcil forma de mostrar aquest espai web.
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.
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.
Fet a HTML i CSS és un footer simple sense molts ostentacions i floritures.
React Vídeo Header
Un header amb vídeo simple React.js.
vídeo Header
Un altre header amb vídeo simple i de gran qualitat.
Vídeo Header a tota pantalla amb Mix-Blend
mostra un vídeo a tota pantalla amb text sobre capa usant manera mix-blend.
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
El degradat és el que destaca a aquest header de vídeo d'la resta.
Em van convèncer tots. gràcies
De res!