9.1 Combinaison des fonctions de couleur
Le design web exige une compréhension plus approfondie et une application des fonctions de couleur pour créer des interfaces complexes mais harmonieuses et adaptatives. Voyons des manipulations plus complexes avec les couleurs en CSS, en utilisant les fonctions rgba(), hsla(), hsl() et rgb().
Exemple 1 : Création d'un dégradé semi-transparent
Pour créer des dégradés complexes, on peut combiner plusieurs fonctions de couleur.
Dans cet exemple, on utilise un dégradé linéaire qui combine des couleurs semi-transparentes définies avec rgba() et hsla():
<div class="gradient"></div>
.gradient {
min-height: 200px;
background: linear-gradient(
to right,
rgba(255, 0, 0, 0.8),
hsla(240, 100%, 50%, 0.7),
rgba(0, 255, 0, 0.6)
);
}
Exemple 2 : Dégradé avec transition entre plusieurs couleurs
Ici, un dégradé linéaire sous un angle de 45 degrés est utilisé, qui passe en douceur à travers cinq couleurs, chacune définie par différentes fonctions de couleur :
<div class="gradient"></div>
.gradient {
min-height: 200px;
background: linear-gradient(
45deg,
hsl(0, 100%, 50%) 0%,
rgb(255, 255, 0) 25%,
hsla(240, 100%, 50%, 0.7) 50%,
rgba(0, 255, 0, 0.6) 75%,
rgb(0, 255, 255) 100%
);
}
9.2 Création d'ombres complexes et d'effets semi-transparents
Exemple 3 : Ombres en utilisant rgba()
Dans cet exemple, une ombre complexe est créée, utilisant des couleurs semi-transparentes pour créer un effet de volume et de lumière :
<div class="shadow"></div>
.shadow {
min-height: 155px;
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5),
-10px -10px 20px rgba(255, 255, 255, 0.2);
}
Exemple 4 : Bordures et arrière-plans semi-transparents
Des bordures et arrière-plans semi-transparents peuvent être créés en utilisant rgba() et hsla(), permettant de créer des effets en couches et texturés :
<div class="border-background"></div>
.border-background {
min-height: 200px;
border: 2px solid rgba(0, 0, 0, 0.5);
background-color: hsla(120, 100%, 50%, 0.3);
}
9.3 Animation et transitions utilisant des fonctions de couleur
Exemple 5 : Animation d'arrière-plan en utilisant hsl()
Dans cet exemple, une animation est utilisée pour changer en douceur la couleur de l'arrière-plan à travers différentes teintes en utilisant hsl():
<div class="animated-background"></div>
@keyframes color-change {
0% {
background-color: hsl(0, 100%, 50%);
}
50% {
background-color: hsl(120, 100%, 50%);
}
100% {
background-color: hsl(240, 100%, 50%);
}
}
.animated-background {
min-height: 200px;
animation: color-change 5s infinite;
}
Exemple 6 : Transition de couleur du texte
Ici, le texte change en douceur de couleur et de transparence au survol, en utilisant rgba() et la propriété transition:
<div class="text-transition">Some text</div>
.text-transition {
min-height: 100px;
color: rgba(255, 0, 0, 1);
transition: color 2s;
}
.text-transition:hover {
color: rgba(0, 0, 255, 0.5);
}
9.4 Utilisation des variables CSS
Voyons des exemples d'utilisation des variables CSS avec des fonctions de couleur.
Exemple 7 : Variables et fonctions de couleur
L'utilisation de variables CSS avec des fonctions de couleur permet de gérer centralement les couleurs et de créer des styles complexes mais facilement gérables :
<div class="advanced"></div>
:root {
--primary-color: rgba(255, 0, 0, 0.8);
--secondary-color: hsl(240, 100%, 50%);
--border-color: rgba(0, 0, 0, 0.5);
}
.advanced {
min-height: 200px;
background: linear-gradient(
to right,
var(--primary-color),
var(--secondary-color)
);
border: 2px solid var(--border-color);
}
Exemple 8 : Combinaison de plusieurs dégradés
Dans cet exemple, deux dégradés linéaires se superposent, créant un effet complexe en couches :
<div class="multi-gradient"></div>
.multi-gradient {
min-height: 200px;
background: linear-gradient(to right, rgba(255, 0, 0, 0.5), rgba(0, 255, 0, 0.5)),
linear-gradient(to bottom, hsla(240, 100%, 50%, 0.5), hsla(60, 100%, 50%, 0.5));
}
GO TO FULL VERSION