Une image de fond améliore agréablement la présentation. Toutefois, elle risque de mettre un peu de temps à se charger si elle est volumineuse. Une solution consiste à créer l'image avec deux résolutions différentes. L'image avec une faible résolution sera chargée en premier et rapidement, puis elle sera cachée et remplacée par l'image finale.
background-image: url("image_finale.jpg") no-repeat, url("image_faible_resolution.jpg") no-repeat;
Depuis peu, il est possible de créer des dégradés en CSS sur les navigateurs récents. Cela évite d'avoir à créer et importer une image. Cependant, chaque navigateur possède encore ses propres règles de nommages.
Il est donc recommandé :
Par exemple, pour un dégradé radial, cela donne :
background-color: couleur; // Anciens navigateurs background-image: -webkit-radial-gradient(paramètres); // Chrome, Safari background-image: -moz-radial-gradient(paramètres); // Firefox background-image: -ms-radial-gradient(paramètres); // IE background-image: -o-radial-gradient(paramètres); // Opera background-image: radial-gradient(paramètres); // Norme W3C
Le principe de réalisation d'un dégradé est très simple :
Exemple de style :
background-image: linear-gradient(#0000cc, #cc00cc);
Résultat :
Autre exemple de style :
background-image: linear-gradient(50deg, #77ee99, #cc7700);
Résultat :
Dernier exemple de style :
background-image: radial-gradient(#00cc00, #cc0000);
Résultat :
Exemple de dégradé pour une page entière :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body {
background-color: #68a; /*Navigateurs anciens*/
background-image: linear-gradient(#bdf, #024);
background-attachment: fixed;
}
</style>
</head>
<body>
<p>bla bla...</p><p>bla bla...</p>
</body>
</html>
Résultat :
Pour obtenir quatre bordures identiques, on écrit, dans la feuille de style :
border: width style color;
La valeur "style" peut être, par exemple :
Pour créer différentes bordures selon les cotés, on utilise les extensions -top, -botton, -right et -left.
Exemple de style :
background-image: linear-gradient(#555555, #aaaaaa); border-right: 3px solid #111111; border-bottom: 6px solid #333333;
Résultat obtenu :
Depuis un certain temps, il est possible de créer des coins arrondis en CSS. En principe, il n'est plus nécessaire d'utiliser des préfixes tels que -webkit ou -moz...
Pour obtenir quatre arrondis identiques, on écrit, dans la feuille de style :
border-radius: rayon;
Pour obtenir des arrondis différents selon les cotés, on indique quatre valeurs pour chaque coins. La première valeur correspond au coin haut gauche, puis on tourne dans le sens des aiguilles d'une montre.
Exemple de style :
background-image: linear-gradient(#555555, #aaaaaa); border-radius: 3px 6px 12px 24px;
Résultat obtenu :
La propriété "box-shadow" permet de créer des ombres sur un bloc.
Exemple de style :
box-shadow: 1px 3px 9px 5px black;
Résultat obtenu :
Les cinq valeurs indiquent, dans l’ordre :
Il existe également le mot-clé "inset" pour créer une ombre interne.
Exemple de style :
box-shadow: 0px 0px 2px white, 2px 2px 5px 4px black inset;
Résultat obtenu :
Remarque : Il est aussi possible de créer une ombre sur un texte.
Exemple de style :
color: #228800; text-shadow: 0.1em 0.1em 1.8px #333333;
Résultat obtenu :
La propriété de feuille de style "opacity" permet de spécifier le degré d'opacité ou de transparence d'un élément.
Exemple de style :
opacity: 0.7;
Résultat obtenu :
La propriété "transform" du langage CSS permet de modifier les coordonnées spatiales du modèle de formatage visuel de CSS. En l'utilisant, les éléments pourront subir des translations, rotations, homothéties ou être inclinées selon les valeurs définies.
Cette propriété n'est pas encore parfaitement reconnue par l'ensemble des navigateurs.
Il est recommandé :
La syntaxe est simple d'emploi :
transform: function(value);
Exemples de fonctions :
Exemple de code :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#cadre {
margin: auto;
padding: 10px;
width: 200px;
height: 100px;
background-color: #dddddd;
transform: skewX(10deg) rotate(5deg);
}
</style>
</head>
<body>
<br>
<div id="cadre">
Un contenu penché<br>et cisaillé...
</div>
</body>
</html>
Résultat obtenu :
Le W3C a introduit, depuis peu, la possibilité de réaliser des transformations en trois dimensions. La compatibilité des codes, même avec les versions récentes des navigateurs, reste aléatoire.
Exemple de code :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
img {
display: block;
margin: auto;
transform: perspective(500px) rotateY(50deg);
}
</style>
</head>
<body>
<br><br><img src="montagne.jpg">
</body>
</html>
Résultat obtenu :
La propriété "transition" du langage CSS permet de modifier les valeurs de propriétés CSS dans le temps, d’un état A à un état B. Par exemple, il est possible de modifier la taille d’un élément progressivement.
Cette propriété n'est pas encore parfaitement reconnue par l'ensemble des navigateurs.
Il est recommandé :
Cette propriété se décompose en plusieurs autres propriétés :
Il existe aussi la propriété raccourcie "transition". Les différentes propriétés et les durées de transformation sont séparées par des virgules.
Exemple de code :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#carre {
margin: auto;
width: 100px;
height: 100px;
background-color: #0000ff;
transition: width 1s, height 2s, background-color 4s, transform 5s;
}
#carre:hover {
width: 200px;
height: 200px;
background-color: #ffcccc;
transform: rotate(180deg);
}
</style>
</head>
<body>
<br><br><div id="carre"></div>
</body>
</html>
Résultat obtenu :
