10 Effets « Waouh » pour Développeurs en Herbe
Le CSS (Cascading Style Sheets) est un langage de style puissant qui permet aux développeurs web de créer des conceptions visuelles étonnantes.
La bonne nouvelle, c’est qu’avec un peu de patience et de bon sens, le CSS est finalement à la portée de tous.
Il offre une variété d’effets, sans limite de personnalisation, que vous pouvez intégrer dans vos pages. Que vous soyez débutant ou jeune développeur front-end, voici 10 effets « waouh » que vous pouvez facilement implémenter.
1. Animation de texte en « glitch »
L’animation de texte en style « glitch » donne à vos titres et textes un aspect défaillant qui peut rappeller des écrans de télé brouillés, ou une touche rétro / futuriste à votre site web (question de perception…)
Pour jouer l’animation en continue, ajouter infinite à la ligne animation de la class .glitch-text
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
font-family: sans-serif;
overflow: hidden;
}
.glitch-text {
font-size: 3em;
color: #fff;
letter-spacing: 5px;
position: relative;
animation: glitch 7s infinite;
}
@keyframes glitch {
0% {transform: skew(0deg); text-shadow: none;}
25% {transform: skew(-5deg);
text-shadow: 2px 2px 0 #ED6673, -2px -2px 0 #00f3ff;}
50% {transform: skew(5deg); text-shadow: -2px -2px 0 #ED6673, 2px 2px 0 #00f3ff;}
75% {transform: skew(-3deg);text-shadow: 2px 2px 0 #ED6673, -2px -2px 0 #00f3ff;}
100% {transform: skew(2deg);text-shadow: -2px -2px 0 #ED6673, 2px 2px 0 #00f3ff;}
}
2. Texte en cours d’écriture
Simulez l’écriture en direct avec l’effet de texte « typewriter ». Cela donne l’impression que le texte est en train d’être tapé, idéal pour raconter des histoires ou mettre en avant des fonctionnalités.
Pour jouer l’animation en continue, ajouter infinite à la ligne animation de la class .glitch-text
.typewriter-text {
width: 0;
overflow: hidden;
animation: typing 3s steps(40, end);
}
@keyframes typing {
from { width: 0; }
to { width: 100%; }
}
3. Menu de navigation animé
Ajoutez une touche d’interactivité à votre menu de navigation avec des transitions fluides et des animations au survol. Cela rendra la navigation plus agréable pour vos visiteurs.
menu {
padding: 10px 0;
}
.menu ul {
list-style: none;
padding: 0;
text-align: left;
}
.menu li {
display: inline;
margin: 0 20px;
}
.menu a {
text-decoration: none;
color: #2F3556;
transition: color 0.3s, transform 0.3s;
padding: 5px;
}
.menu a:hover {
color: #ED6673;
font-weight: bold;
box-shadow: 0 4px 0 #ff5733;
transform: scale(1.3);
}
4. Survol d’image en 3D
Transformez des images 2D en éléments 3D interactifs en utilisant des propriétés CSS telles que transform et perspective.
.image-3d {
transform-style: preserve-3d;
perspective: 800px;
transition: transform 0.5s;
}
.image-3d:hover {
transform: rotateY(45deg);
}
5. Effet de défilement parallaxe
Le défilement parallaxe donne une profondeur visuelle à votre site web en faisant bouger différents éléments à des vitesses distinctes lors du scrolling. Idéal pour vos landing pages.
.parallax-container {
perspective: 1px;
overflow-x: hidden;
overflow-y: auto;
}
.parallax-layer {
transform: translateZ(-1px) scale(2);
background-image: url(‘votre-image.jpg’);
background-size: cover;
background-position: center;
height: 100vh;
}
6. Boutons en 3D
Personnalisez vos boutons / Call To Action avec des effets d’ombre et de changement de couleur au passage souris.
.button-3d {
background: #ED6673;
border: none;
color: #fff;
padding: 10px 20px;
border-radius: 5px;
transition: all 0.2s;
cursor: pointer;
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2);
}
.button-3d:hover {
background: #2F3556;
transform: translateY(3px);
}
7. Effet de boîte en mouvement
Animez n’importe quel type de conteneur pour créer des mises en page dynamiques. Vous pouvez les faire pivoter, rebondir ou changer de taille au survol. Mes deux exemples n’affichent rien mais il est possible d’y ajouter du texte, une image…
.gradient-background {
background: linear-gradient(90deg, #ED6673, #F6B86D, #2F3556);
background-size: 200% 200%;
animation: gradient 7s linear infinite;
width: 100%;
border-radius: 20px;
height: 450px;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 100% 50%;
}
}
9. Bouton de chargement dans une forme personnalisée
.loader {
border: 5px solid #ED6673;
border-top: 5px solid #fff;
border-radius: 50%; /* Dans mon exemple, il est à 20% */
width: 40px;
height: 40px;
margin: 10px;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
10. Effet de glissement de texte
Animez le texte pour qu’il apparaisse et disparaisse au passage souris. Cela peut être utilisé pour afficher l’auteur d’une citation, une source ou une info bulle comme dans mon exemple.
Passez la souris sur l’icone :
.info-bubble {
position: relative;
display: inline-block;
margin:60px;
}
.info-trigger {
display: inline;
cursor: pointer;
position: relative;
}
.info-content {
display: none;
position: absolute;
background: #2F3556;
color: #ffff;
padding: 20px;
border: 1px solid #ccc;
border-radius: 15px;
margin:40px;
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2);
z-index: 1;
transition: transform 0.3s;
width: auto;
white-space: nowrap;
}
.info-trigger:hover + .info-content {
display: block;
transform: translateY(-100%);
}