5 techniques CSS pour pimper vos sites web

Le résultat final ici :
https://www.wawasensei.dev/tutos/5-techniques-css/index.html

Vos sites manquent de quelque chose mais vous ne savez pas vraiment de quoi? Peut être que l'apprentissage de ces techniques vous donnera des pistes pour les rendre plus attractifs. Surtout n'oubliez pas.. "Less is more", utilisez ces techniques avec parcimonie!

Mise en place

Créons un fichier index.html basique qui importe un fichier style.css

<!DOCTYPE html>
<html>
  <head>
    <title>Le CSS c'est génial</title>
    <link href="style.css" rel="stylesheet" />
  </head>
  <body>
  </body>
</html>

A l'intérieur du body nous allons créer 5 sections sur lesquelles on va travailler

<section id="blend">
  <h1>RACLETTE</h1>
</section>
<section id="filter">
  <h1>MODE</h1>
</section>
<section id="overlay">
  <h1>VOYAGE</h1>
</section>
<section id="animation">
  <h1>JAPON</h1>
</section>
<section id="parallax">
  <h1>RELAX & CHILL</h1>
</section>

Maintenant créons le fichier style.css et appliquons lui un style de base sur le html et body pour lui retirer son margin/padding par défaut et mettre également une police d'écriture basique.

html, body {
  margin:0;
  padding:0;
  font-family: Arial, Helvetica, sans-serif;
}

On va également définir le style de nos sections qui seront la base sur laquelle on va travailler. Nos sections vont s'afficher en plein écran, on utilise flex pour centrer le contenu, et on définit le comportement de notre arrière plan par défaut pour qu'il soit centré et prenne tout l'espace disponible. On définit aussi le texte en très grand.

section {
  height: 100vh;
  width: 100%;
  display:flex;
  align-items: center;
  justify-content: center;
  background-repeat: no-repeat;
  background-position: center center;
  background-size:cover;
}

section h1 {
  font-size:150px;
  text-align:center;
}

Maintent que notre base de travail est prête, on peut attaquer le style des différentes sections.

Blend

Pour intégrer le texte avec l'image on utilise la propriété mix-blend-mode qui s'utilise comme ceci :

mix-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|color-burn|difference|exclusion|hue|saturation|color|luminosity;

Dans notre cas on va choisir la valeur overlay mais essayez les différentes valeurs pour voir comment ça se comporte.

Quand vous utilisez une propriété CSS que vous ne connaissez pas je vous recommande d'utiliser le site https://caniuse.com/?search=mix-blend-mode pour voir si c'est compatible avec tous les navigateurs. Dans ce cas là ça ne fonctionne pas sur InternetExplorer.. (mais ils auront juste une expérience moins bien que les utilisateurs de navigateurs modernes)

Les images sont tirées de la banque d'image libre de droits https://unsplash.com que je vous recommande fortement pour sa quantité et qualité, le tout GRATUITEMENT!

Le CSS de la section :

#blend {
  background-image: url('https://images.unsplash.com/photo-1500964757637-c85e8a162699?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1378&q=80');
}

#blend h1 {
  mix-blend-mode: overlay;
}

Filter

La propriété filter applique un ou plusieur filtre à un élément HTML (pas forcément une image) et s'utilise comme ceci :

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

Comme nous souhaitons appliquer le filtre qu'a notre image et ne pas impacter le titre, on définit la section en relative et on rajoute l'image d'arrière plan via la pseudo-class :before.

Le CSS de la section :

#filter {
  position:relative;
}

#filter:before {
  content:'';
  position:absolute;
  width:100%;
  height:100%;
  background-image: url('https://images.unsplash.com/photo-1511135232973-c3ee80040060?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1489&q=80');
  background-repeat: no-repeat;
  background-position: center center;
  background-size:cover;
  filter: grayscale(100%) blur(3px);
}

#filter h1 {
  z-index: 1;
}

Overlay

Quand notre texte n'est pas très visible sur une image d'arrière plan on peut rajouter un overlay qui est un calque semi-transparent entre l'image et le texte et qui a pour mission de lisser l'arrière plan pour gagner en visibilité sur le texte.

Pour créer l'overlay on utilise la pseudo-classe :before et on change son opacity entre 0 et 1 a la valeur qui convient le plus.

Il faut également penser à rajouter un z-index supérieur à 0 sur le contenu de la section pour qu'il ne soit pas recouvert par l'overlay.

Le CSS de la section :

#overlay {
  background-image: url('https://images.unsplash.com/photo-1520645521318-f03a712f0e67?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80');
  position:relative;
}

#overlay:before {
  position:absolute;
  content:'';
  width:100%;
  height:100%;
  background:black;
  opacity:0.5
}

#overlay h1 {
  color:white;
  z-index: 1;
}

Animation

Pour rajouter du mouvement au titre de notre section on utilise les animations CSS.

Pour créer l'animation on utilise @keyframes puis le nom de l'animation que l'on veut créer puis à l'intérieur les différents pourcentage des moments où on veut animer certaines propriétés CSS. Dans notre cas on rajoute à notre fichier CSS ceci :

@keyframes japan{
  0%   {
    opacity: 0;
  }
  25%   {
    margin-top:50px;
    transform: rotate(-5deg);
  }
  50%   {
    font-size:180px;
    color:red;
  }
  75%   {
    opacity: 1;
  } 
}

Puis sur notre titre on définit animation-name avec le nom de l'animation que l'on vient de créer, animation-duration pour la durée de l'animation (donc la vitesse d'exécution des animations), animation-delay pour le délai avant que l'animation ne soit jouée et animation-iteration-count pour le nombre de fois où vous voulez que l'animation s'exécute. (utilisez infinite) si vous souhaitez que votre animation ne s'arrête jamais.

Le CSS de la section :

#animation {
  background-image: url('https://images.unsplash.com/photo-1542051841857-5f90071e7989?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80');
}

#animation h1 {
  color: white;
  opacity: 1;
  animation-name: japan;
  animation-duration: 2s;
  animation-delay: 2s;
  animation-iteration-count: 1;
}

Pour toutes les propriétés et valeurs possible pour les animations rendez-vous sur https://www.w3schools.com/cssref/css3pranimation.asp

Parallax

Pour que l'arrière plan suive le défilement du scroll de l'écran on utilise la propriété CSS background-attachment avec la valeur fixed.

Le CSS de la section :

#parallax {
  background-image: url('https://images.unsplash.com/photo-1457195740896-7f345efef228?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80');
  background-attachment: fixed;
}

#parallax h1 {
  color:white;
}

Le code source complet est accessible ici :
https://github.com/wass08/5-techniques-css