L'APPARENCE EN CSS

Présentation des blocs

Le fond en dégradé

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>
      div {
        position: absolute;
        top: 0px;
        bottom: 0px;
        left: 0px;
        right: 0px;
        padding-left: 20px;
        background-image : linear-gradient(#bbddff, #002244);
      }
    </style>
  </head>
  <body>
    <div><p>bla bla...</p><p>bla bla...</p></div>
  </body>
</html>

Résultat :

Les bordures

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 :

Les coins arrondis

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 :

Les ombres

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 :

Le degré d'opacité

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 :

Outils de transformation

Définition

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é :

Utilisation

La syntaxe est simple d'emploi :

transform: function(value);

Exemples de fonctions :

Réalisation

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 :

Transformation en 3D

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 :

Outils de transition

Définition

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é :

Utilisation

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.

Réalisation

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 :