10 astuces et propriétés CSS à utiliser en 2020

1. Ajouter une lettrine
2. Créer des bulles informatives
3. Un scrolling smooth
4. Insérer une image dans une forme
5. Faire bouger une image au survol
6. Changer la couleur du texte sélectionné
7. Rendre un tableau responsive
8. Changer le background en scrollant
9. Ajouter un effet de flou sur une image
10. Des images en guise de bordure

 

Ajouter une lettrine

La lettrine est la première lettre d’un paragraphe, elle est bien plus grande que les autres lettres et prend souvent plusieurs lignes. Cet élément esthétique permet d’habiller un texte.

Pour créer cette lettre géante, il nous faut tout d’abord la sélectionner. La pseudo-classe ::first-letter est parfaite pour cela. Afin qu’elle s’intègre parfaitement au texte, nous allons lui ajouter un float :left. Augmentons sa taille avec font-size et changeons sa couleur avec la propriété color. Ajoutons également une petite marge à sa droite, sans quoi la lettrine risque d’être trop collée au reste du texte.

<style>
p{
    font-size:24px;
    text-align: justify;
}
p::first-letter{
  font-size: 120px;
  color: #c1b696;
  float: left;
  margin-right: 8px;
}
</style>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris,
nisi ut aliquip ex ea commodo consequat.</p>

Généralement, la lettrine accentue le côté solennel, pouvant parfois alourdir l’esthétisme de la page. Dans ces cas-là, il est parfois plus élégant de ne garder du concept que le changement de couleur de la première lettre du paragraphe. Celle-ci permet de faire un rappel à la couleur primaire/secondaire du site, sans surenchère.

<style>
p{
    font-size:24px;
    text-align:justify;
}
p::first-letter{
    color:orange;
}
</style>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris,
nisi ut aliquip ex ea commodo consequat.</p>

Compatibilité navigateur : fonctionne sur tous les navigateurs récents.

 

Créer des bulles informatives

Guider ses visiteurs à l’aide de petites bulles informatives est une solution élégante non-encombrante, pouvant grandement améliorer l’expérience utilisateur.

Sans plus attendre, intéressons-nous à la mise en pratique.

Commençons par créer une <div> qui va inclure le texte pouvant être survolé, ainsi qu’une balise <span> qui elle va faire office de bulle d’informations. Cachons cette dernière grâce à la propriété visibility: hidden;, et à l’aide de la pseudo-classe :hover, nous la ferons apparaître quand le lien sera survolé à la souris.

Pour créer une bulle style BD, nous allons ajouter un peu de CSS dans .bulle::after. Celui-ci créera une petite pyramide inversée qui collera parfaitement avec notre bulle initiale.

Le bout de code .lien:hover .bulle rappel que nous pouvons très bien utiliser une pseudo-classe comme sélecteur même si celle-ci ne se trouve pas en dernière position.

<style>
.lien{
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.bulle{
  visibility: hidden;
  width: 140pxs;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
}

.bulle::after{
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.lien:hover .bulle{
  visibility: visible;
  opacity: 1;
}
</style>

<div class="lien">SURVOLEZ-MOI
  <span class="bulle">Message d'aide</span>
</div>

Compatibilité navigateur : fonctionne sur tous les navigateurs récents

 

Smooth scroll

La propriété CSS scroll-behavior permet de définir le comportement du scroll (défilement) à l’intérieur d’un container.

Grâce à elle, nous allons pouvoir ajouter un effet smooth (lisse, doux) à notre scroll. Il est courant d’en faire usage pour les déplacements sur une même page web (utilisation d’ancres), afin d’éviter de perdre l’utilisateur avec un effet de « téléportation instantanée » indésirable.

Pour bénéficier de cet effet smooth, il nous suffit de déclarer la propriété scroll-behavior à smooth sur notre balise globale html.

html {
  scroll-behavior: smooth;
}

Il est également possible de définir cette propriété CSS sur des éléments spécifiques et non sur l’ensemble de notre contenu HTML. A vous de vous amuser avec 😊

Compatibilité navigateur : fonctionne sur tous navigateurs récents, sauf Safari.

 

Insérer une image dans une forme

Vous en avez marre que vos photos soient affichées basiquement, en simples rectangles ? Si oui, vous êtes au bon endroit. Nous allons voir comment changer leur forme.

Pour ce premier exemple, lançons-nous dans l’affichage d’une image dans un cercle.

Pour ce faire, nous allons utiliser la propriété CSS clip-path en lui passant la valeur circle.

<style>
img{
  width: 250px;
}
.forme{
  clip-path: circle(80px at center);
}
</style>

<img src="https://images.unsplash.com/photo-1551972251-12070d63502a?ixlib=rb-1.2.1" class="forme">

Nous pouvons bien évidemment créer des formes plus compliquées. En jouant avec la valeur polygon, libre à nous de placer nos différents points.

Cependant, cela peut vite devenir fastidieux. Heureusement, il existe un générateur de clip-path. Grâce à celui-ci, vous pourrez avoir un résultat rapide en quelques clics 😊

<style>
img{
  width: 250px;
}
.forme{
    clip-path: polygon(18% 59%, 30% 6%, 89% 9%, 90% 66%, 73% 98%, 0 100%, 2% 69%);
}
</style>

<img src="https://images.unsplash.com/photo-1551972251-12070d63502a?ixlib=rb-1.2.1" class="forme">

Compatibilité navigateur : fonctionne sur tous les navigateurs récents, sauf Microsoft Edge.

 

Faire bouger une image au survol

Pour indiquer aux utilisateurs qu’ils peuvent interagir avec un élément, il est courant d’ajouter un effet lorsque celui-ci est survolé. Nous pouvons par exemple inverser les couleurs d’un bouton, souligner progressivement un texte important ou encore faire vibrer un élément. Nous allons nous pencher spécifiquement sur ce dernier.

Pour ce faire, nous allons utiliser la propriété CSS animation. Celle-ci sera enclenchée au survol de notre image grâce à la pseudo-classe hover. Nous allons lui définir un temps de 4 secondes. Afin de rendre l’animation fluide, nous allons la découper en 10 étapes différentes à intervalles réguliers (à chaque fois 10%), à l’aide de @keyframes que nous allons appeler "vibration". Nous pouvons jouer avec les différentes valeurs de transform suivant l’effet de vibration voulu. Quant à l’HTML, nous allons basiquement afficher une image.

<style>
img:hover{
  animation: vibration 0.4s;
  animation-iteration-count: infinite;
}

@keyframes vibration{
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-2px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 3px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(2px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(2px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}
</style>
<img src="https://karac.ch/icon/karac-white-logo-blog-noshadow.svg">

Compatibilité navigateur : fonctionne sur tous les navigateurs récents.

 

Changer la couleur du texte sélectionné

On ne dirait pas comme ça, mais cette finition peut faire la différence entre un « site » et un « site soigné ».

Et c’est franchement pas compliquée pas mettre en place, alors pensez-y 😊

Il suffit d’utiliser la pseudo classe ::selection et de définir la couleur du texte ainsi que celle du background. Voilà, le tour est joué !

<style>
p::selection{
  color: white;
  background: orange;
}
</style>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris,
nisi ut aliquip ex ea commodo consequat.</p>

Compatibilité navigateur : fonctionne sur tous les navigateurs récents.

 

Rendre un tableau responsive

Nous sommes d’accord, un site qui s’adapte à la taille des écrans est devenu la norme. Malheureusement, il arrive encore (trop) souvent que l’affichage des tableaux ne soit pas correctement responsive.

Avec la technique que nous allons voir, notre tableau rétrécira jusqu’à son maximum. En continuant de réduire la largeur de l’écran, une barre de scroll vertical apparaîtra, afin de pouvoir consulter le tableau sans avoir de textes qui se chevauchent, de données coupées, etc.

Pour ce faire, nous devons entourer notre tableau <table>, par une <div> à laquelle nous lui ajouterons une règle CSS qui permet d’ajouter automatiquement une barre de défilement, si le besoin se présente, à savoir overflow-x:auto.

<div style="overflow-x:auto;">
  <table>
    ...
  </table>
</div>

Compatibilité navigateur : fonctionne sur tous les navigateurs récents.

 

Changer le background en scrollant

Nous allons nous intéresser au changement de fond (background) lors d’un défilement d’une page web.

Pour cet exemple, nous allons avoir besoin de 5 images différentes. Celles-ci apparaîtront au fur et à mesure du scrolling. Des images en fond qui défilent et un texte au milieu de la page, une chouette page d’accueil non ? Voici un aperçu du résultat désiré :

Concentrons-nous sur la pratique.

L’astuce est toute simple. Elle consiste à placer des éléments en position fixe (fixed), puis d’ajuster différentes images derrière.

Concernant le CSS, nous pouvons cacher la barre de défilement à l’aide de la pseudo-classe ::-webkit-scrollbar, attention cela ne fonctionne que sur Chrome et Edge. Le z-index :2 de notre <div> contenant le texte n’est pas obligatoire, cependant pour éviter d’éventuels conflits avec d’autres éléments, il est préférable de le spécifier.

Pour ce qui est de l’HTML, nous allons simplement ajouter une <div> pour chaque image, ainsi qu’une <div> qui contiendra notre texte central.

<style>
html, body{
  height: 100%;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  box-sizing: border-box;
}

html::-webkit-scrollbar {
  display: none;
}

.fond-image{
  height: 50%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.image1{ background-image: url("https://images.unsplash.com/photo-1518457607834-6e8d80c183c5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1267&q=80"); }
.image2{ background-image: url("https://images.unsplash.com/photo-1477436637632-85d08d035630?ixlib=rb-1.2.1&auto=format&fit=crop&w=1337&q=80"); }
.image3{ background-image: url("https://images.unsplash.com/photo-1506368153642-f361edca71a1?ixlib=rb-1.2.1&auto=format&fit=crop&w=1407&q=80"); }
.image4{ background-image: url("https://images.unsplash.com/photo-1499285052060-2e5b1834f295?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80"); }
.image5{ background-image: url("https://images.unsplash.com/photo-1555339990-18e05015e062?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80"); }

.titre{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  background-color: rgba(0,0,0, 0.5);
  color: #FF4E3B;
  font-weight: bold;
  font-size: 64px;
  border: 8px solid #FF4E3B;
  width: 280px;
  padding: 20px;
  text-align: center;
}
</style>

<div class="fond-image image1"></div>
<div class="fond-image image2"></div>
<div class="fond-image image3"></div>
<div class="fond-image image4"></div>
<div class="fond-image image5"></div>

<div class="titre">TITRE</div>

 

Compatibilité navigateur : fonctionne sur tous les navigateurs récents.

Ajouter un effet de flou sur une image

En modifiant les images avec du CSS, nous facilitons considérablement le travail du webmaster. En effet, celui-ci n’a plus à travailler les photos avant de les téléverser sur le site. De plus, cela assure une certaine uniformité entre les images.

Cette astuce consiste à ajouter un effet de flou sur une image. Ce processus est couramment utilisé lorsque nous désirons afficher du texte par-dessus une image. Effectivement, sans cet effet, le texte devient vite difficilement lisible.

Pour notre cas, la propriété CSS filter, qui permet d’appliquer des filtres sur des images, nous convient parfaitement. Nous allons l’utiliser en spécifiant comme valeur blur(6px). Plus la valeur du blur est élevée, plus votre image sera floue. À vous de la régler comme vous le désirez.

<style>
.image-floue{
  filter: blur(6px);
  -webkit-filter: blur(6px);
  width:100%;
  height:auto;
}
</style>
<img class="image-floue" src="https://images.unsplash.com/photo-1518457607834-6e8d80c183c5?ixlib=rb-1.2.1">

Et voilà, le tour est joué! À présent, si vous désirez afficher du texte par-dessus, il est conseillé d’utiliser une <div> ayant pour background une image, plutôt que de recourir à la balise <img>. C’est à l’intérieur de cette <div> que nous pourrions placer d’autres éléments, comme un titre, qu’il faudra bien évidement mettre en page correctement à l’aide de règles CSS.

<style>
.image-floue{
  background-image: url("https://images.unsplash.com/photo-1518457607834-6e8d80c183c5?ixlib=rb-1.2.1");
  filter: blur(8px);
  -webkit-filter: blur(8px);
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
…
</style>

<div class="image-floue">
…
</div>

Compatibilité navigateur : fonctionne sur tous les navigateurs récents.

 

 

Des images en guise de bordure

Il est possible d’utiliser des images pour embellir nos bordures.

Pour cet exemple, l’image SVG vient du site Flaticon.

Examinons le code permettant d’obtenir un tel résultat.

Comme nous pouvons le remarquer, nous jouons avec les propriétés relatives aux bordures, principalement border-image. Il est important de spécifier une taille, un style et une couleur à notre border de base, sans quoi cette astuce ne fonctionne tout simplement pas. Pour la rendre invisible, il suffit de lui attribuer la « couleur » transparente. Il est également nécessaire de spécifier une taille, ici 40px, assez grande pour pouvoir accueillir l’image.

<style>
#element{
    font-family: arial;
    font-size: 20px;
    line-height: 30px;
    font-weight: bold;
    text-align:center;
    border: 40px solid transparent;
    border-image: url(https://image.flaticon.com/icons/svg/2836/2836488.svg);
    border-image-slice: 100%;
    border-image-width: 60px;
    padding: 15px;
    background-color: #fff5e8;
}
</style>

<div id="element">
  Notre carte de Burgers !
</div>

Compatibilité navigateur : fonctionne sur tous les navigateurs récents.

 

Voilà, c’est terminé pour aujourd’hui 😊 Comme d’habitude, si vous avez d’autres astuces à me proposer, n’hésitez pas à m’écrire.

 

Sources :

• ::first-letter
• scroll-behavior
• clip-path
• animation
• ::selection
• overflow-x
• filter

 

Catégories :

Tech web

Tags :

CSS

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