29 cabeceiras e pés de páxina CSS para o teu blog ou sitio web

Pé de páxina CSS

As cabeceiras e os pés de páxina son Elementos esenciais á hora de crear unha nova páxina web ou un blog, ou se nada máis necesitamos actualizalos para cumprir os estándares actuais de deseño web. Son espazos nos que o visitante do noso sitio web adoita prestar moita atención, polo que debemos coidalos e mimalos o suficiente para que sexan agradables á vista, ademais de funcionais.

Por iso imos compartir 29 cabeceiras e pés de páxina CSS que podes usar no teu blog ou sitio web, e así dálle ese punto de calidade que buscaba. Esta lista está composta por cabeceiras de artigos a pantalla completa, así como o tamaño estándar, cabeceiras fixas ou fixas, pés de páxina e algúns encabezados de vídeo para dar outro punto de vista ao teu sitio web.

Cabeceira curva

Cabeceira curva

Unha cabeceira que está identificada por o seu estilo curvado na parte inferior o que o converte nunha cabeceira moi especial para un sitio web ou blog. É CSS puro, polo que xa leva un tempo probar na súa web como se verá se o inclúe no seu blog.

Imaxe da cabeceira Parallax

Paralaxe

Cun gran efecto de imaxe Parallax, esta cabeceira identifícase por usa a posición da imaxe de fondo CSS. A imaxe da cabeceira situaríase na parte superior da páxina para obter un bo código de efecto.

Cabeceira fixa en ángulo

Cabeza en ángulo

Esta cabeceira está ben fixada na parte superior da páxina web para diferenciar con esa liña diagonal que cruza toda a horizontal da vista do usuario. Mostra como se poden usar pseudoelementos CSS para crear unha cabeceira fixa cunha imaxe de fondo.

Remate de cabeza

Distorsionado

CSS e HTML para esta cabeceira que no exemplo dado caracterízase ao longo desa liña diagonal que atravesa toda a pantalla dun lado ao outro.

Cabeceira con animación SVG

Svg curvado

Un encabezado moi sinxelo, aínda que o usa unha animación SVG para distinguirse dos que temos nesta lista. Pode acceder a unha gran lista de páxinas web con animacións SVG desde aquí.

Cabeceira corrixida con Div

Div fixo

Con efecto de imaxe Parallax, unha cabeceira fixa que destaca polo gran efecto conseguido coa imaxe de fondo fixa mentres o resto se despraza mentres nos desprazamos co rato.

Ilustración de varias capas de Parallax

Multicapa

Unha cabezada de gran remate dentro HTML, CSS e JavaScript de varias capas e que se pode usar perfectamente para un sitio web relacionado co mundo dos videoxogos. Gran remate en todo.

Cabeceira de publicación corrixida

Mensaxe fixa

Unha cabeceira fixa para cada publicación feita en HTML, CSS e JavaScript. No momento en que baixamos, minimízase a cabeceira e fixado na parte superior.

Cabeceira de pantalla completa con animación

Ondas animadas

Unha cabeceira que proporciona unha animación que móvese lateralmente e iso produce un efecto relaxante no espectador.

Imaxe de heroe a pantalla completa

Imaxe de heroe

con un efecto de zoomisto cabeceira a pantalla completa revélase como unha de grande orixinalidade. Perfecto para un sitio web no que o visitante vai facer un gran uso do desprazamento para moverse por el.

Flexbox con botón 

Flexbox con botón

Unha cabeceira que leva todo o ancho da pantalla para amosar un botón. Perfecto para páxinas de destino con flexbox CSS.

Cabeceira Flexbox Hero

Heroe de Flexbox

Unha cabeceira con efecto paralaxe e flexbox bastante sinxelo que destaca principalmente pola elegancia do seu deseño.

Cabeceira pegajosa no desprazamento

Encabezado encabezado

Como o seu nome indica, unha cabeceira fixa cando desprazámonos co rato cando nos movemos para ver o resto da páxina web.

Desprazable sensible

Desprazamento sensible

Outra cabeceira fixa de gran efecto cando o menú chega á parte superior da páxina, por quee nese momento mantense fixo e podemos seguir desprazándonos polo sitio.

Cabeceira de desprazamento

Cabeceira de desprazamento

Diferénciase do resto por animación axeitada e delicada mentres nos movemos. Ao final da mesma, a cabeceira permanece fixa na parte superior.

Cabeceira de desprazamento sensible

Cabeceira de desprazamento sensible

Outra gran animación para distinguir esta cabeceira do resto con HTML, CSS e JavaScript.

Cabeceira de entrada / saída

cabeceira animada

Unha cabeceira que se distingue polo efecto Entrada / saída despois do desprazamento e iso produce a sensación de rebote.

Fade da cabeceira

Fade da cabeceira

Outro efecto de animación curioso e moi elegante en HTML, CSS e JavaScript.

Cabeceira que está oculta

Ocultar automaticamente

Unha cabeceira diferente cando se agocha segundo usamos o desprazamento cunha animación iso pasa desapercibido pero de gran calidade.

Pé de paralaxe

Pé de paralaxe

Un pé de páxina fixo ou fixo con HTML, CSS e JavaScript. De gran calidade con sombreado en efecto.

Pé de páxina con escala de contido

Escala de pé de páxina

Un pé de páxina orixinal e de alta calidade para asombrar ao visitante polo xeito elegante de amosar este espazo web.

Pé de páxina nas redes sociais

medios de comunicación social

Un pé de páxina que destaca os botóns que levan ás redes sociais máis coñecido. Destaca a animación producida ao deixar o punteiro do rato sobre cada unha das redes sociais.

Menú de pé de páxina animado para móbiles

Pé de páxina móbil animado

Ao reducir a xanela do navegador web para ver este pé de páxina, poderá atopar as 2-3 seccións que o usuario pode atopar nun dispositivo móbil. Amósase a 767 px.

Pé de páxina fixo fixo

Fixo sinxelo

Feito en HTML e CSS é un pé de páxina sinxelo sen moita fanfarria e florecemento.

Cabeceira de vídeo React

Cabeceira de vídeo React

Unha cabeceira con vídeo sinxelo React.js.

Cabeceira do vídeo

Cabeceira do vídeo

Outro cabeceira cun vídeo sinxelo e de gran calidade.

Cabeceira de vídeo a pantalla completa con Mix-Blend

Fullscreen

Amosar a vídeo a pantalla completa con texto na capa usando o modo mix-blend.

Animación de cabeceira de vídeo

Animación de cabeceira de vídeo

A animación foi personalizado con Adobe After Effects para ser compatible con todos os navegadores. Non funciona no móbil.

Cabeceira de vídeo sensible con degradado

Responsabilidade

El o gradiente é o que destaca a esta cabeceira de vídeo do resto.


O contido do artigo adhírese aos nosos principios de ética editorial. Para informar dun erro faga clic en aquí.

2 comentarios, deixa os teus

Deixa o teu comentario

Enderezo de correo electrónico non será publicado. Os campos obrigatorios están marcados con *

*

*

  1. Responsable dos datos: Miguel Ángel Gatón
  2. Finalidade dos datos: controlar SPAM, xestión de comentarios.
  3. Lexitimación: o seu consentimento
  4. Comunicación dos datos: os datos non serán comunicados a terceiros salvo obrigación legal.
  5. Almacenamento de datos: base de datos aloxada por Occentus Networks (UE)
  6. Dereitos: en calquera momento pode limitar, recuperar e eliminar a súa información.

  1.   TecnOku dixo

    Todos me convenceron. Grazas

    1.    Manuel Ramírez dixo

      Es Benvido!