Termes CSS clés employés : border-radius, linear-gradient, radial-gradient.
Compatibilité navigateurs : IE10+, Firefix22.0+, Chrome28.0+, Safari5.1+ avec préfixe, Opera16+.
Créer un arrière-plan avec des couleurs pastel se modifiant par superposition.
Dans l’exemple précédents, les couleurs transparentes se mélangeaient à l’aide d’une animation pour créer un effet hypnotique. Les transparences peuvent toutefois être exploitées de façon plus simple, pour créer simplement une variété de couleurs. Nous allons employer encore des arrière-plans, rectangulaires ou ronds (à l’aide de dégradés radiants) afin d’obtenir des combinaisons de couleurs, par superposition. Un texte semi-transparent sera appliqué dans l’élément.
Nous allons employer un simple élément div qui va contenir un élément p pour
le texte.
<div class=transparence>
<p>PAS<br/> TELS</p>
</div>
Le début de la définition CSS du div est classique :
div.transparence {
width:500px;
height:200px;
border:10px solid grey;
}
Ajoutons ensuite la couleur de fond, fixons une unique taille d’arrière-plan, puis ajoutons les dégradés
successifs, ici cinq cercles et un rectangle. Il ne s’agit ici pas réellement de dégradés, mais de
formes de couleur pleine : leur dimension réelle est ajustée lors de leur définition. Nous aurions pu
procéder inversement, en définissant des images identiques à la couleur près, puis en leur attribuant
une taille individuelle.
…
background-color: rgba(240,216,223,0.5);
background-size: 200px 200px;
background-image:
radial-gradient(circle, rgba(17,216,242,0.3) 0,
rgba(17,216,242,0.3) 25%,
rgba(255,255,255,0) 26%),
radial-gradient(circle, rgba(252,19,200,0.3) 0,
rgba(252,19,200,0.3) 50%,
rgba(255,255,255,0) 50%),
radial-gradient(circle, rgba(252,19,200,0.5) 0,
rgba(252,19,200,0.5) 40%,
rgba(255,255,255,0) 40%),
linear-gradient(rgba(255,242,0,0.4) 0px,
rgba(255,242,0,0.4) 50%,
rgba(255,255,255,0) 51% ),
radial-gradient(circle, rgba(252,176,64,0.3) 0,
rgba(252,176,64,0.3) 70%,
rgba(255,255,255,0) 70%),
radial-gradient(circle, rgba(5,240, 25,0.3) 0,
rgba(5,240, 25,0.3) 60%,
rgba(255,255,255,0) 60%);
}
Il faut une seule image de chaque type dans l’élément, il est donc nécessaire de fixer la propriété
background-repeat à no-repeat. Vous fixez ensuite la position de chaque
image dans l’élément. Les valeurs retenues ici ne sont qu’indicatives.
…
background-repeat:no-repeat;
background-position: -85px 30px, 0 30px, 220px 70px,
120px 40px, 350px 100px, -50px -50px;
}
Passons enfin à la définition de l’élément p renfermant le texte. La position est ajustée,
une couleur transparente définie, de même que les caractéristiques de la police :
p {display:inline-block;
margin-top: 20px;
margin-left:250px;
color:rgba(5,220, 25, .4);
font-size: 50px;
font-family:Segoe Script, cursive;
font-weight:bold;
}
PAS
TELS
Remarquez que nous aurions pu obtenir la même chose en empilant des éléments HTML,
normaux pour une forme rectangulaire et modifiés à l’aide de la propriété border-radius pour les cercles, puis dotés d’une couleur de fond uniforme et transparente. Mais employer HTML à des fins de présentation reste une pratique déconseillée : la méthode CSS est préférable…
|
|---|