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

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

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

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

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

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

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

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

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

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

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

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

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

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

Sticky Header en scroll

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

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

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

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

Header In/out

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

Header fade

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

Header que se oculta

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

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

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

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

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.