29 en-têtes et pieds de page CSS pour votre blog ou site Web

L'en-tête et le pied de page sont des éléments essentiels lors de la création d'un nouveau site web ou blog, ou même lors de leur simple mise à jour pour se conformer aux normes actuelles de conception web. Les visiteurs d'un site web y portent généralement une attention particulière ; il est donc important de les concevoir et de les peaufiner avec soin afin qu'ils soient à la fois esthétiques et fonctionnels.

C'est pourquoi nous partageons 29 en-têtes et pieds de page CSS que vous pouvez utiliser sur votre blog ou site web , pour lui apporter la touche de qualité que vous recherchez. Cette liste comprend des en-têtes d'articles en plein écran, ainsi que des en-têtes de taille standard, des en-têtes fixes, des pieds de page et même des en-têtes vidéo pour offrir une perspective différente à votre site.

Tête incurvée

Cet en-tête se distingue par sa partie inférieure arrondie, ce qui en fait un élément unique pour tout site web ou blog. Entièrement réalisé en CSS, vous pouvez le tester sur votre site de test pour visualiser son rendu sur votre blog.

Image d'en-tête Parallax

Doté d'un saisissant effet de parallaxe, cet en-tête est facilement identifiable grâce à l'attribut CSS `background-image` . L'image d'en-tête est positionnée en haut de la page pour un effet visuel percutant.

Tête fixe coudée

Cet en-tête est solidement fixé en haut de la page web, délimité par une ligne diagonale qui s'étend sur toute la largeur de l'écran. Il illustre comment les éléments pseudo-CSS peuvent être utilisés pour créer un en-tête fixe avec une image de fond.

En-tête incliné

CSS et HTML pour cet en-tête qui, dans l'exemple donné, est caractérisé par cette ligne diagonale qui traverse tout l'écran d'un côté à l'autre.

En-tête avec animation SVG

Un en-tête très simple, qui utilise toutefois une animation SVG pour se distinguer des autres de cette liste. Vous trouverez ici une longue liste de sites web utilisant des animations SVG.

En-tête fixe avec Div

Grâce à un effet de parallaxe, un en-tête fixe se distingue par l'effet saisissant obtenu avec l'image de fond fixe, tandis que le reste se déplace lorsque l'on fait défiler la page avec la souris.

Illustration multicouche de parallaxe

Un en-tête superbement conçu, réalisé avec du HTML, du CSS et du JavaScript multicouches , idéal pour un site web de jeux vidéo. Une finition impeccable.

En-tête de publication fixe

Chaque article est associé à un en-tête fixe créé en HTML, CSS et JavaScript. Lorsque vous faites défiler la page vers le bas, l'en-tête se réduit et reste fixe en haut de la page.

En-tête plein écran avec animation

Un en-tête proposant une animation de défilement latéral et produisant un effet relaxant sur le spectateur.

Image de héros en plein écran

Avec un effet de zoom , cet en-tête plein écran révèle une grande originalité. Idéal pour un site web où les visiteurs font souvent défiler la page pour naviguer.

Flexbox avec bouton

Un en-tête occupant toute la largeur de l'écran pour afficher un bouton. Idéal pour les pages d'accueil utilisant CSS Flexbox.

En-tête Flexbox Hero

Un en-tête assez simple avec des effets de parallaxe et de flexbox qui se distingue principalement par l'élégance de son design.

En-tête collant sur le défilement

Comme son nom l'indique, il s'agit d'un en-tête fixe qui s'affiche lorsque l'on fait défiler la page web avec la souris pour visualiser le reste de la page.

Défilement réactif collant

Un autre en-tête fixe, très efficace lorsque le menu atteint le haut de la page, permet de le maintenir fixe et de continuer à faire défiler le site.

En-tête de défilement

Elle se distingue par son animation subtile et élégante au défilement. À la fin, l'en-tête reste fixe en haut de la page.

En-tête de défilement réactif

Une autre superbe animation permettant de distinguer cet en-tête des autres grâce à HTML, CSS et JavaScript.

En-tête entrée / sortie

Un en-tête qui se distingue par son effet d'entrée/sortie après défilement et qui produit une sensation de rebond.

En-tête fondu

Un autre effet d'animation intéressant et très élégant en HTML, CSS et JavaScript.

En-tête masqué

Un en-tête différent qui se masque au fur et à mesure que l'on fait défiler la page, avec une animation imperceptible mais d'excellente qualité.

Pied de page de parallaxe

Un pied de page fixe de haute qualité , créé avec HTML, CSS et JavaScript, et présentant un effet d'ombrage.

Pied de page avec échelle de contenu

Un pied de page de grande qualité et très original qui laisse le visiteur sans voix par la présentation élégante de ce site web.

Pied de page des réseaux sociaux

Le pied de page se distingue par ses boutons qui renvoient aux plateformes de réseaux sociaux les plus populaires. L'animation qui se déclenche au survol de chaque icône avec la souris est particulièrement remarquable.

Menu de pied de page mobile animé

En réduisant la fenêtre du navigateur pour afficher ce pied de page, vous découvrirez les 2 à 3 sections qu'un utilisateur verrait sur un appareil mobile. Il s'affiche en 767 pixels.