5 astuces CSS que vous devriez utiliser en 2019

Que vous les connaissiez déjà ou non, n’oubliez pas d’appliquer ces différentes astuces et techniques CSS, afin d’agrémenter vos futurs projets web.

1 - Ajouter une transition aux survols

Tous éléments cliquables devraient bénéficier d’une petite animation lorsque nous les survolons. Cela permet d’indiquer aux visiteurs qu’ils peuvent cliquer dessus. Le CSS gère le survol avec l’état « hover ». Cependant, celui-ci peut-être un peu trop brutal. En effet, le changement d’état va se déclencher instantanément au moment du survol et l’état normal va passer en état « hover » en une fraction de secondes. Il n’y a donc pas de phase intermédiaire entre l’état normal et l’état « hover ».

Pour donner un effet animé et pour rendre la transition plus fluide, il est possible de jouer avec la propriété CSS « transition ».

Exemple :

<style>
  a {
    transition: border 0.3s ease-in-out;
    border-bottom: 1px solid transparent;
  }
  a:hover {
    border-color: blue;
  }
</style>
<a href="karac.ch">lien vers karac.ch</a>

Dans l’exemple ci-dessus, nous utilisons la propriété « border-bottom » pour y ajouter un effet de soulignement accentué. Le « border-bottom » est transparent, puis il devient bleu lorsque l’on survole le lien. Avec l’ajout d’une petite transition se déroulant en 0.3 seconde, nous obtenons le fameux effet d’animation.

2 - La position sticky

Sticky ? On appelle un élément sticky, un élément qui, au scroll reste « collé », souvent en haut de la page et y reste alors que le reste de la page bouge.

Nous voyons encore bien trop souvent des sites web appliquant du javascript pour gérer la position sticky, alors qu’il existe une propriété CSS le gérant à la perfection.

.menu{
      position: -webkit-sticky;
      position: sticky;
      top: 0px;
}

Dans l’exemple ci-dessus, nous spécifions la position en sticky, ainsi qu’un top 0px, ce qui permet à nos éléments de class « menu » de rester en haut de la page lorsque nous scrollons.

Attention, la position : sticky ne fonctionne pas sur IE11.

3 - Forcer les majuscules

Pour mettre en avant un titre, les bonnes pratiques actuelles veulent que vous mixiez avec les trois règles suivantes :

Mettre du gras (font-weight: bold)
Utiliser une grande taille de police (font-size:48px)
Mettre le texte en majuscules

Pour le troisième point, les majuscules, il est courant de taper le texte directement en lettres capitales. Cependant, Afin d’éviter d’éventuels oublis, vous avez la possibilité en CSS de forcer les majuscules en utilisant la propriété text-transform : uppercase.

<style>
       h1{
            text-transform : uppercase;
         }
</style>

<h1>Titre</h1>

Toutefois, évitez d’utiliser l’attribut capitalize qui a pour effet de transformer la première lettre de chaque mot en majuscule. En effet, en cas de nom composé par exemple, vous risqueriez de tomber sur de mauvaises surprises.

4 - Ajouter un overlay au background

Afin d’améliorer la lisibilité d’un texte se trouvant sur un fond imagé, il est conseillé d’ajouter un overlay directement sur le background-image. Avec cet overlay, vous pourriez par exemple assombrir légèrement l’image, ou lui ajouter une teinte de couleur.

Dans votre HTML, il vous faudra créer une div, que nous allons appeler « image-container », qui contiendra la balise img ainsi qu’une div « text-container », qui, elle, contiendra le texte (h1) inclus dans une div « inner ».

<div class="image-container">
    <img src="image-background" class="image">
    <div class="text-container">
        <div class="inner">
            <h1>titre</h1>
        </div>
    </div>
</div>

Une telle structure HTML nous permet de manipuler correctement les éléments moyennant des règles CSS. Par exemple, avec la balise contenant la classe « image-container », en ajoutant à l’état before un background noir (0,0,0), mais visible à 50% (0.5).

.image-container {
    max-width: 800px;
    position: relative;
}
 
.image-container::before {
    content: '';
    width: 100%;
    height: 100%;
    display: block;
    top: 0;
    left: 0;
    position: absolute;
    background: rgba(0,0,0,0.5);
}
 
.image {
    width: 100%;
    display: block;
}
 
h1 {
    font-size: 40px;
    color: #ffffff;
}
 
.image-container .text-container {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-51%, -50%);
    -moz-transform: translate(-51%, -50%);
    -ms-transform: translate(-51%, -50%);
    -o-transform: translate(-51%, -50%);
    transform: translate(-51%, -50%);
}
 
.image-container .text-container .inner {
    z-index: 2;
    text-align: center;
    position: relative;
}

En réalisant l’overlay directement en CSS, vous aurez l’avantage non négligeable de jouir d’une certaine homogénéité au niveau de l’affichage des images. Cela vous évitera de devoir modifier vos photos préalablement et de vous souvenir des réglages exacts de votre overlay.

5 - Afficher des images « outside the box »

Sur le web, pour enrichir un texte il est d’usage de l’agrémenter avec des illustrations. Cette façon de faire se popularise de plus en plus, car elle a su prouver qu’elle améliorerait significativement l’expérience utilisateur du lecteur.

La tendance actuelle consiste à afficher des images de manières originales, à penser « outside the box ». Il ne faut plus avoir peur de bien structurer le tout d’une manière très carrée. Sortez vos images de vos colonnes de textes, jouez avec les formes CSS et la transparence de vos images. Ces techniques toutes simples peuvent mener à de bien jolis résultats.

afficher-image-dans-texte-en-css-avec-shape-outside

Pour l’exemple ci-dessus, nous avons utilisé le paramètre CSS shape-outside qui permet de créer une forme à partir d’une image (la tasse de café dans notre cas). Ceci nous permet de définir une zone entourant l’illustration et d’y ajouter du texte tout autour.

Voici le code complet :

<style>
       img{
            shape-outside: url('cafe.png');
            display: inline-block;
            width: 380px;
            float: left;
            shape-margin: 20px;
            margin-left: -200px;
            margin-right: 16px;
        }
        p{
            font-size:14px;
            font-family: arial;
            line-height: 20px;
            text-align:justify;
        }
</style>
 
<img src="cafe.png">

<p>At vero eos et accusamus et iusto odio dignissimos ducimus
qui blanditiis praesentium voluptatum deleniti atque corrupti
quos dolores et quas molestias excepturi sint occaecati cupiditate
non provident, similique sunt in culpa qui officia deserunt
mollitia animi, id est laborum et dolorum fuga. Et harum quidem
rerum facilis est et expedita distinctio. Nam libero tempore,
cum soluta nobis est eligendi optio cumque nihil impedit quo
minus id quod maxime placeat facere possimus, omnis voluptas
assumenda est, omnis dolor repellendus. Temporibus autem
quibusdam et aut officiis debitis aut rerum necessitatibus saepe
eveniet ut et voluptates repudiandae sint et molestiae non recusandae.</p>

Sources

Transition : https://www.w3schools.com/css/css3_transitions.asp
Sticky : https://www.w3schools.com/howto/howto_css_sticky_element.asp
Text-transform : https://www.w3schools.com/cssref/pr_text_text-transform.asp
Shape-outside : https://www.w3cschool.cn/doc_css/css-shape-outside.html

Catégories :

Tech web

Tags :

CSS

Vous avez aimé cet article ? Suivez-nous sur Facebook pour ne rien manquer !