Gradients Linéaires
Les gradients linéaires permettent de créer des transiitons de couleur entre deux points.
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gradient Linéaire</title>
<style>
.gradient-vertical {
width: 200px;
height: 200px;
background: linear-gradient(to bottom, rouge, vert, bleu);
}
.gradient-horizontal {
width: 200px;
height: 200px;
background: linear-gradient(to right, rouge, vert, bleu);
}
</style>
</head>
<body>
<div class="gradient-vertical"></div>
<div class="gradient-horizontal"></div>
</body>
</html>
Gradients Radiaux
Les gradients radiaux créent des transitions de couleur autour d'un point central.
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gradient Radial</title>
<style>
.radial-uniform {
width: 200px;
height: 200px;
background: radial-gradient(circle, rouge, vert, bleu);
}
.radial-custom {
width: 200px;
height: 200px;
background: radial-gradient(ellipse at 70% 30%, rouge 10%, vert 30%, bleu 80%);
}
</style>
</head>
<body>
<div class="radial-uniform"></div>
<div class="radial-custom"></div>
</body>
</html>
Transitions CSS
Les transitions permettent de modifier progressivement les propriétés CSS d'un élément.
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transition</title>
<style>
.transition-box {
width: 100px;
height: 100px;
background-color: rouge;
transition: width 2s, height 2s, background-color 2s;
}
.transition-box:hover {
width: 200px;
height: 200px;
background-color: bleu;
}
</style>
</head>
<body>
<div class="transition-box"></div>
</body>
</html>
Transformations CSS
Les transformations permettent de modifier la position, la taille et l'orientation des éléments.
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transformation</title>
<style>
.transform-box {
width: 100px;
height: 100px;
background-color: vert;
transition: transform 2s;
}
.transform-box:hover {
transform: translate(100px, 50px) scale(0.5) rotate(45deg);
}
</style>
</head>
<body>
<div class="transform-box"></div>
</body>
</html>
Animations Clés
Les animations clés définissent une séquence d'états d'un élément à travers le temps.
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation Clés</title>
<style>
.keyframe-box {
width: 100px;
height: 100px;
background-color: bleu;
animation: exemple 3s infinite;
}
@keyframes exemple {
0% { transform: translateX(0); background-color: bleu; }
50% { transform: translateX(100px); background-color: vert; }
100% { transform: translateX(0); background-color: rouge; }
}
</style>
</head>
<body>
<div class="keyframe-box"></div>
</body>
</html>
Transformations 3D
Les transformations 3D ajoutent une dimension supplémentaire aux éléments.
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transformation 3D</title>
<style>
.scene {
width: 300px;
height: 300px;
perspective: 600px;
margin: 50px auto;
}
.cube {
width: 100%;
height: 100%;
transform-style: preserve-3d;
animation: rotation 5s infinite linear;
}
.cube div {
position: absolute;
width: 100%;
height: 100%;
background: rgba(255, 0, 0, 0.7);
border: 1px solid #000;
}
.front { transform: translateZ(150px); }
.back { transform: rotateY(180deg) translateZ(150px); }
.right { transform: rotateY(90deg) translateZ(150px); }
.left { transform: rotateY(-90deg) translateZ(150px); }
.top { transform: rotateX(90deg) translateZ(150px); }
.bottom { transform: rotateX(-90deg) translateZ(150px); }
@keyframes rotation {
from { transform: rotateX(0deg) rotateY(0deg); }
to { transform: rotateX(360deg) rotateY(360deg); }
}
</style>
</head>
<body>
<div class="scene">
<div class="cube">
<div class="front"></div>
<div class="back"></div>
<div class="right"></div>
<div class="left"></div>
<div class="top"></div>
<div class="bottom"></div>
</div>
</div>
</body>
</html>