Suite à vos nombreuses suggestions concernant l’article 5 astuces CSS que vous devriez utiliser en 2019, il m’a paru intéressant de les regrouper et d’en faire un best-off.
Au programme :
- Zoom sur les images au survol
- Personnaliser une liste à points
- Image en parallax
- Afficher un fil d’Ariane
- Effet de transparence sur un titre
Zoom sur les images au survol
Vous voulez indiquer à vos utilisateurs qu’ils peuvent cliquer sur vos images ? L’effet de zoom au survol (hover), discret et effiace, est fait pour vous !
Pour commencer, il nous faut une simple balise <div>, à laquelle nous allons lui ajouter la classe « div-image ». A l’intérieur de celle-ci, plaçons notre balise <img> ayant comme paramètre src le lien de l’image que nous désirons afficher. Nous allons également lui ajouter une classe « image-zoom ».
<div class="div-image">
<img class="image-zoom" src="/image.jpg" />
</div>Pour que notre effet de zoom fonctionne, il va tout d’abord falloir définir une largeur et une hauteur à notre <div> englobant notre image. Puis, grâce à la propriété CSS overflow, nous allons faire en sorte que le dépassement de contenu soit masqué.
.div-image {
width: 400px;
height: 400px;
overflow: hidden;
}Nous pouvons désormais ajouter l’effet de zoom sur le hover de notre image « image-zoom » en utilisant la propriété CSS transform.
.image-zoom:hover {
transform: scale(1.2);
}Plus la valeur du scale est haute, plus le zoom sera puissant. A vous de faire des tests jusqu'à arriver au résultat qui vous convient :)
Bien que l’effet de zoom est désormais fonctionnel, celui-ci apparaît trop brusquement. Comme vu dans 5 astuces CSS que vous devriez utiliser en 2019, nous allons ajouter un petit effet de transition.
.image-zoom {
transition: 0.4s;
}Et voilà le travail ! Ci-dessous, le code complet.
CSS :
.div-image {
width: 400px;
height: 400px;
overflow: hidden;
}
.image-zoom {
transition: 0.4s;
}
.image-zoom:hover {
transform: scale(1.2);
}HTML :
<div class="div-image">
<img class="image-zoom" src="/img/image.jpg" />
</div>Personnaliser une liste à points
La liste à points (ou liste à puces, ou encore bullet points en anglais...) est l’un des moyens les plus apprécié pour structurer du contenu sur le web. Facile à mettre en place, elle peut rendre certains textes bien plus lisibles, améliorant ainsi l'expérience utilisateur de votre site internet.
Imaginons que nous désirons afficher une checklist, avec à la place des points de base ; des vus et des croix. Commençons par une liste à puces standard. Nous allons ajouter aux <li> une classe « ok » ou « nok ».
<ul>
<li class="ok">Item 1</li>
<li class="ok">Item 2</li>
<li class="ok">Item 3</li>
<li class="nok">Item 3</li>
</ul>Puis, nous allons utiliser le pseudo-élément ::before et y mettre comme content les caractères spéciaux ✗ ou ✓ selon la classe du <li> ; à savoir « ok » pour le vu, et « nok » pour la croix.
ul {
list-style: none;
}
li.ok::before {
content: '✓ ';
}
li.nok::before {
content: '✗ ';
}
Image en parallax
Le parallax est un effet très populaire sur internet. Celui-ci est souvent intégré à l’aide de JavaScript. La méthode que je vous propose n’en utilise pas ! De l’HTML et du CSS suffisent 😊 Regardons cela ensemble.
Pour la structure HTML, il suffit d’intégrer une <div> qui aura comme background-image l’image que nous désirons afficher en parallax, dans une <div> dont la hauteur doit impérativement être définie.
HTML :
<div class="div-image-parallax">
<div class="image-parallax"></div>
</div>CSS :
.div-image-parallax{
height: 500px;
}
.image-parallax{
height: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-image: url(('/img/image.jpg');
}
Afficher un fil d’Ariane
Suivant la hiérarchie du site internet, un fil d’Ariane (aussi appelé Breadcrumbs) est nécessaire, afin d’offrir à ses internautes une navigation efficace.
Faisant les choses simplement et créons une structure HTML à l’aide de balises <a>. Celles-ci sont intégrées dans une div ayant une classe que nous allons appeler « fil-ariane ».
Exemple :
<div class="fil-ariane">
<a>Accueil</a>
<a>Shop</a>
<a>Films</a>
<a>Blu-ray</a>
</div>Pour le CSS, nous allons jouer avec les pseudo-classes, ainsi qu'avec les propriétés content, de façon à afficher les bons caractères aux bons endroits.
CSS :
.fil-ariane a::after {
content: " /";
}
.fil-ariane a:last-child::after {
content: "";
}
Effet de transparence sur un titre
La dernière astuce du jour consiste à manipuler la transparence d’un titre, afin de l’intégrer d’une façon originale sur une image. Avec cette technique, vous pourrez créer des effets de ce type-là :
Et pas besoin de Photoshop ! Tout se fait en CSS !!! Pratique non ? Commençons sans plus tarder.
Pour la structure HTML, rien de bien sorcier. Ajoutons un titre <h1> dans une div ayant une classe que nous allons appeler « image-fond ». Vous l’aurez compris, nous allons utiliser cette div pour afficher l’image de fond 😊
<div class="image-fond">
<h1> Texte de démo</h1>
</div>Pour ce qui est du CSS, nous allons, pour notre titre <h1>, définir la propriété mix-blend-mode avec color-dodge. Puis, faire quelques réglages pour que notre démo, bien que minimaliste, ne soit pas trop laide ^^.
h1{
mix-blend-mode: color-dodge;
font-family: Roboto;
font-size: 5rem;
text-align: center;
margin: 0;
padding: 10% 200px;
color: orange;
}
body{
margin: 0;
background-color: white;
}
.image-fond{
background-image: url('/img/image.jpg');
background-repeat: no-repeat;
background-size: cover;
min-height: 100vh;
overflow: hidden;
}
C’est tout pour aujourd’hui ! Si vous avez d’autres astuces CSS sympas à partager, n’hésitez pas à m’écrire. Qui sait, un 3ème article pourrait peut-être voir le jour dans quelques mois 😊
Catégories :
Tech webTags :
jQuery CSS HTML UXVous avez aimé cet article ? Suivez-nous sur Facebook pour ne rien manquer !