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

Pied de page CSS

Les en-têtes et pieds de page sont Éléments essentiels lors de la création d'une nouvelle page Web ou un blog, ou à tout le moins, nous devons les mettre à jour pour répondre aux normes actuelles de conception Web. Ce sont des espaces auxquels le visiteur de notre site Web accorde généralement une grande attention, nous devons donc en prendre soin et les choyer suffisamment pour qu'ils soient agréables à l'œil, en plus d'être fonctionnels.

C'est pourquoi nous allons partager 29 en-têtes et pieds de page CSS que vous pouvez utiliser sur votre blog ou site Web, et donnez-lui ainsi ce point de qualité que vous recherchiez. Cette liste est composée d'en-têtes d'articles en plein écran, ainsi que de la taille standard, d'en-têtes fixes ou fixes, de pieds de page et de certains en-têtes vidéo pour donner un autre point de vue à votre site Web.

Tête incurvée

Tête incurvée

Un en-tête identifié par son style incurvé en bas ce qui en fait un en-tête très spécial pour un site Web ou un blog. C'est du pur CSS, il faut donc déjà du temps pour tester dans votre mise en scène Web à quoi il ressemblera si vous l'incluez dans votre blog.

Image d'en-tête Parallax

Parallaxe

Avec un excellent effet d'image Parallax, cet en-tête s'identifie par utiliser la position de l'image d'arrière-plan CSS. L'image d'en-tête serait positionnée en haut de la page pour un code de grand effet.

Tête fixe coudée

En-tête incliné

Cet en-tête est bien fixé en haut de la page Web pour différencier avec cette ligne diagonale qui traverse tout l'horizontale de la vue de l'utilisateur. Il montre comment les pseudo-éléments CSS peuvent être utilisés pour créer un en-tête fixe avec une image d'arrière-plan.

En-tête incliné

Biaisé

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

En-tête avec animation SVG

Svg courbé

Un en-tête très simple, bien qu'il utilise une animation SVG pour vous distinguer dont nous avons dans cette liste. Vous pouvez accéder à une grande liste de pages Web avec des animations SVG d'ici.

En-tête fixe avec Div

Div fixe

Avec l'effet d'image Parallax, un en-tête fixe qui se distingue par le grand effet réalisé avec l'image de fond fixe tandis que le reste défile pendant que nous faisons défiler avec la souris.

Illustration multicouche de parallaxe

Multicouche

Une tête de grande finition dans HTML, CSS et JavaScript multicouches et qui peut être parfaitement utilisé pour un site Web lié au monde des jeux vidéo. Excellente finition partout.

En-tête de publication fixe

Poste fixe

Un en-tête fixe pour chaque article réalisé en HTML, CSS et JavaScript. Au moment où nous roulons vers le bas, l'en-tête est minimisé et fixé au sommet.

En-tête plein écran avec animation

Vagues animées

Un en-tête qui fournit une animation qui se déplace latéralement et cela produit un effet relaxant sur le spectateur.

Image de héros en plein écran

Image de héros

Avec un effet de zoomcette en-tête plein écran il se révèle être d'une grande originalité. Parfait pour un site Web dans lequel le visiteur va faire un grand usage du défilement pour se déplacer.

Flexbox avec bouton 

Flexbox avec bouton

Un en-tête qui occupe toute la largeur de l'écran pour afficher un bouton. Parfait pour les pages de destination avec CSS flexbox.

En-tête Flexbox Hero

Héros de la Flexbox

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

En-tête collant sur le défilement

Tête collante

Comme son nom l'indique, un en-tête fixe lorsque on fait défiler avec la souris en se déplaçant pour voir le reste de la page Web.

Défilement réactif collant

Défilement réactif

Un autre en-tête fixe de grand effet lorsque le menu atteint le haut de la page, pourquoiet à ce moment-là il reste fixe et nous pouvons continuer à faire défiler le site.

En-tête de défilement

En-tête de défilement

Il diffère du reste par animation correcte et délicate pendant que nous bougeons. À la fin de celui-ci, la tête de lit reste fixe en haut.

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

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

Une autre grande animation pour distinguer cet en-tête du reste avec HTML, CSS et JavaScript.

En-tête entrée / sortie

animer l'en-tête

Un en-tête qui se distingue par l'effet Entrée / sortie après défilement et cela produit la sensation de rebond.

En-tête fondu

En-tête fondu

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

En-tête masqué

Masquage automatique

Un en-tête différent lors du masquage selon nous utilisons le défilement avec une animation cela passe inaperçu mais de grande qualité.

Pied de page de parallaxe

Pied de page de parallaxe

Un pied de page fixe ou fixe avec HTML, CSS et JavaScript. De grande qualité avec ombrage en effet.

Pied de page avec échelle de contenu

Échelle du pied de page

Un pied de page original et de haute qualité pour étonner le visiteur pour la manière élégante d'afficher cet espace Web.

Pied de page des réseaux sociaux

Réseaux sociaux

Un pied de page qui se démarque les boutons qui mènent aux réseaux sociaux plus connu. L'animation produite en laissant le pointeur de la souris sur chacun des réseaux sociaux se démarque.

Menu de pied de page mobile animé

Pied de page animé mobile

En réduisant la fenêtre du navigateur Web pour afficher ce pied de page, vous pourrez trouver les 2-3 sections que l'utilisateur peut trouver sur un appareil mobile. Il est affiché à 767px.

Pied de page fixe simple

Fixe simple

Made in HTML et CSS est un pied de page simple sans trop de fanfare et de fioritures.

En-tête vidéo de réaction

En-tête vidéo de réaction

Un en-tête avec vidéo simple React.js.

En-tête vidéo

En-tête vidéo

autre en-tête avec vidéo simple et de grande qualité.

En-tête vidéo plein écran avec Mix-Blend

Plein écran

Montrez un vidéo plein écran avec du texte sur un calque en utilisant le mode mix-blend.

Animation d'en-tête vidéo

Animation d'en-tête vidéo

L'animation était personnalisé avec Adobe After Effects pour être compatible avec tous les navigateurs. Cela ne fonctionne pas sur mobile.

En-tête vidéo réactif avec dégradé

.

El le dégradé est ce qui ressort à cet en-tête vidéo du reste.


2 commentaires, laissez le vôtre

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont marqués avec *

*

*

  1. Responsable des données: Miguel Ángel Gatón
  2. Finalité des données: Contrôle du SPAM, gestion des commentaires.
  3. Légitimation: votre consentement
  4. Communication des données: Les données ne seront pas communiquées à des tiers sauf obligation légale.
  5. Stockage des données: base de données hébergée par Occentus Networks (EU)
  6. Droits: à tout moment, vous pouvez limiter, récupérer et supprimer vos informations.

  1.   Technoku dit

    Ils m'ont tous convaincu. Merci

    1.    Manuel Ramirez dit

      Vous êtes les bienvenus!