29 headers y footers CSS para tu blog o página web

Footer CSS

Los headers y los footers son elementos imprescindibles a la hora de crear una nueva página web o un blog, o si nada más que necesitamos actualizarlos para estar ante los estándar actuales del diseño web. Son espacios a los que el visitante de nuestra web suele prestar gran atención, por lo que hemos de cuidarlos y mimarlos lo suficiente para que sean agradables a la vista, aparte de funcionales.

Por eso mismo vamos a compartir 29 headers y footers CSS que podrás usar en tu blog o página web, y así darle ese punto de calidad que andabas buscando. Esta lista está compuesta por cabeceras de artículos todo pantalla, al igual que el tamaño estándar, headers fijos o fixed, footers y algunos headers en vídeo para dar otro punto de perspectiva a vuestra web.

Header curvo

Header curvo

Un header que se identifica por su estilo curvo en la parte inferior que lo convierte en una cabecera bien especial para una web o blog. Es puro CSS, así que ya estás tardando para probar en tu staging web como quedará si lo incluyes a tu blog.

Header image Parallax

Parallax

Con un gran efecto de imagen Parallax, este header se identifica por si solo al utilizar la posición CSS background-image. La imagen de cabecera se situaría en la parte superior de la página para un código de gran efecto.

Header fixed angulado

Angled Header

Este header se queda bien fijado en la parte superior de la página web para diferenciarse con esa línea en diagonal que cruza todo el horizontal de la vista del usuario. Muestra como los elementos-pseudo CSS pueden ser usados para crear un header fixed con una imagen de fondo.

Skewed header

Skewed

CSS y HTML para este header que en el ejemplo dado se caracteriza por esa línea diagonal que cruza toda la pantalla de un lado hacia el otro.

Header con animación SVG

SVG curvo

Una cabecera bien simple, aunque se vale de una animación SVG para distinguirse de los que tenemos en esta lista. Puedes acceder a una gran lista de páginas web con animaciones SVG desde aquí.

Fixed header con Div

Div fixed

Con efecto de imagen Parallax, un header fijo que destaca por el gran efecto conseguido con la imagen de fondo fija mientras el resto se va desplazando según vamos haciendo scroll con el ratón.

Ilustración multi-capa Parallax

Multi-capa

Un header de gran acabado en HTML, CSS y JavaScript de multi-capas y que puede servir perfectamente para un sitio web relacionado con el mundo de los videojuegos. De gran acabado en toda su extensión.

Post header fijo

Fixed post

Un header fijo para cada post realizado en HTML, CSS y JavaScript. En el momento que nos desplazamos hacia abajo, el header queda minimizado y fijo en la parte superior.

Header a toda pantalla con animación

Ondas animadas

Una cabecera que ofrece una animación que se desplaza lateralmente y que produce un efecto relajante en el espectador.

Imagen Hero a toda pantalla

Hero imagen

Con un efecto de zoom, este header a toda pantalla se revela como uno de gran originalidad. Perfecto para una web en la que el visitante va a realizar gran uso del scrolling para desplazarse por la misma.

Flexbox con botón 

Flexbox con botón

Una cabecera que toma todo el ancho de la pantalla para mostrar un botón. Perfecto para landing pages con CSS flexbox.

Flexbox Hero Header

Flexbox hero

Un header con efecto parallax y flexbox bastante simple que destaca por la elegancia de su diseño principalmente.

Sticky Header en scroll

Sticky header

Como su propio nombre indica, un header fijo cuando realizamos scroll con el ratón al desplazarnos para ver el resto de la página web.

Responsive Scrolling Sticky

Responsive scroll

Otro header fijo de gran efecto al llegar el menú a la parte superior de la página, para que en ese momento se quede fijo y podamos seguir desplazándonos por el sitio.

Scroll Header

Scroll header

Se diferencia del resto por la adecuada y delicada animación según vamos desplazándonos. Al fin de la misma, se queda la cabecera fija en la parte superior.

Responsive Scroll Header

Responsive scroll header

Otra gran animación para distinguir este header del resto con HTML, CSS y JavaScript.

Header In/out

animate header

Un header que se distingue por el efecto In/out después del scrolling y que produce la sensación de rebote.

Header fade

Header fade

Otro efecto de animación curioso y bien elegante en HTML, CSS y JavaScript.

Header que se oculta

Auto hide

Un header distinto al ocultarse según usamos el scrolling con una animación que pasa desapercibida pero de gran calidad.

Parallax footer

Parallax footer

Un footer fijo o fixed con HTML, CSS y JavaScript. De gran calidad con el sombreado en el efecto.

Footer con escala de contenido

Footer escala

Un footer de gran calidad y bien original para dejar estupefacto al visitante por la grácil forma de mostrar este espacio web.

Social Media Footer

Social media

Un footer que destaca por los botones que dirigen a las redes sociales más conocidas. Destaca la animación que se produce al dejar el puntero del ratón sobre cada una de las redes sociales.

Menú mobile footer animado

Footer mobile animado

Al reducir la ventana del navegador web para ver este footer, podrás encontrar las 2-3 secciones que el usuario podrá encontrar en un dispositivo móvil. Se muestra a 767px.

Footer Simple Fixed

Simple Fixed

Hecho en HTML y CSS es un footer simple sin muchos alardes y florituras.

React Video Header

React Video Header

Un header con vídeo simple React.js.

Vídeo Header

Video Header

Otro header con vídeo simple y de gran calidad.

Vídeo Header a toda pantalla con Mix-Blend

Fullscreen

Muestra un vídeo a toda pantalla con texto sobre capa usando modo mix-blend.

Vídeo Header animación

Video header animación

La animación fue personalizada con Adobe After Effects para ser compatible con todos los navegadores. No funciona en mobile.

Responsive vídeo header con gradiente

Responsive

El degradado es lo que destaca a este header de vídeo del resto.


2 comentarios, deja el tuyo

Deja tu comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*

*

  1. Responsable de los datos: Miguel Ángel Gatón
  2. Finalidad de los datos: Controlar el SPAM, gestión de comentarios.
  3. Legitimación: Tu consentimiento
  4. Comunicación de los datos: No se comunicarán los datos a terceros salvo por obligación legal.
  5. Almacenamiento de los datos: Base de datos alojada en Occentus Networks (UE)
  6. Derechos: En cualquier momento puedes limitar, recuperar y borrar tu información.

  1.   TecnOku dijo

    Me convencieron todos. Gracias

    1.    Manuel Ramírez dijo

      De nada!