On a vu comment fabriquer un cercle avec border-radius. On va essayer d'aller un peu plus loin en donnant un peu de volume à nos cercles de façon à ce qu'ils aient un peu plus de consistance.

 Les boules 


La différence entre un cercle et une "pseudo" sphère tient en peu de chose. Ce n'est qu'une question d'habillage. En général, on va partir d'un cercle noir sur lequel on va appliquer un dégradé circulaire plus ou moins important. Le plus compliqué va être de choisir les couleurs.


On commence par créer un cercle noir ayant un diamètre de 200 pixels sur lequel on applique notre dégradé. Sur les pages "Formulaires" et "Photos", nous avions vu l'utilisation de linear-gradient. Ici nous allons parler de sa cousine radial-gradient. Les deux servent à faire des dégradés. On parlera également de repeating-linear-gradient ainsi que de repeating-radial-gradient afin d'avoir la famille au complet.

Dans l'exemple, nous utilisons un dégradé circulaire dont le point de départ est situé à 20% horizontalement et verticalement du coin supérieur gauche de ball1. Si nous ne voulons pas d'un dégradé circulaire, on remplace circle par ellipse. Si nous voulons que le dégradé débute au centre de notre boîte, il suffit d'omettre "at 20% 20%". Les valeurs ne sont pas forcément exprimées en pourcentages, elles peuvent être en pixels, centimètres, point etc.

Les deux couleurs (il peut y en avoir plus) du dégradé sont un rose moyen et le noir. Le rose à une transparence de 50% et le noir une transparence de 80% ce qui, mélangé au noir du background-color donne les tons plus ou moins violacés de notre sphère. Le dernier pourcentage (85%), indique que le dégradé s'arrête à 85% de la limite du cercle.

Plutôt qu'un long discours barbant, je vais vous montrer quelques exemples de dégradés.















farther-side dirige vers le côté le plus éloigné

closest-side dirige vers le côté le plus proche

farthest-corner dirige vers l'angle le plus éloigné

closest-corner dirige vers l'angle le plus proche





Voilà un aperçu de ce que l'on peut faire avec les dégradés. Si les douze premiers exemples ne posent pas de problème particulier, le dernier mérite une explication. Vous avez deux fonctions (on peut en utiliser plus) qui se suivent. Elles sont séparées par une virgule. On peut considérer que les effets sont empilés. Celui qui est décrit en premier se retrouve en haut de la pile et le dernier se retrouve au fond. Cela rend inévitable l'utilisation des couleurs rgba(). Si vous utilisez des couleurs "normales" pour l'effet sur le dessus de la pile, il sera le seul à s'afficher à l'écran. Seul le dernier de la liste peut se permettre d'utiliser des couleurs opaques.

A propos des 7^ème, 8^ème et 9^ème exemples, il faut ajouter -webkit- et -o- devant radial-gradiant pour Chrome et Opera. Firefox fonctionne sans préfixe vendeur. Pour ce qui est d'Internet Explorer (version 11), c'est toujours sans espoir. J'ai regardé sur MSDN, il faut mettre une virgule après circle; Il suffit de le savoir. Tout le reste fonctionne sans problème.

L'intérêt de l'empilement des effets est de pouvoir créer des textures. A gauche, on a un exemple qui n'est sans doute pas le meilleur mais qui illustre ce que je veux dire. La boule a pratiquement la même structure que celle du dernier exemple sur laquelle s'applique une couche d'un bleu léger avec radial-gradient.

L'ombre est légèrement vers la droite et c'est sans doute ici qu'est la plus grande difficulté. Il faut la positionner de façon à ce que l'ensemble garde une certaine cohérence.


Je vais essayer d'être clair dans ce que je vais vous raconter. Un peu plus haut, j'ai parlé d'empilement. Pour pouvoir gérer correctement les empilements, il faut que les objets soient "positionnés" à l'aide de la propriété position:.

En général, on utilise trois types de positionnement plus un qui ne sert qu'à mettre la propriété position: dans le style.

• position: absolute L'objet est positionné par rapport au conteneur dans lequel on le positionne
• position: relative L'objet est positionné par rapport à son emplacement naturel (emplacement où serait l'objet si on ne le positionnait pas.
• position: fixed L'objet reste à la place où on le positionne même si la page est redimensionnée ou bien si elle défile (voir le code)
• position: static L'objet se place comme si on n'indiquait rien

Si la propriété position: nous permet de positionner les objets en X et en Y, la propriété z-index: va nous permettre de les positionner en profondeur.






Si on compare les deux exemples plus haut, on voit que dans le premier, les balises <div> sont affichées dans l'ordre où elles apparaissent dans le code. La première est au-dessus de la deuxième qui est elle-même recouverte en partie par la troisième. Sur le deuxième exemple, on peut constater que le rectancle jaune est passé sur le dessus de la pile de div. Cela est dû à la ligne que j'ai mise en rouge dans le style de #div22 : z-index: 3;. La propriété z-index accepte des valeurs numériques. Plus la valeur est grande, plus notre objet va être placé haut sur la pile. Si vous devez mettre de nombreux objets sur votre page, plutôt que de mettre des valeurs qui se suivent directement (1, 2, 3...), utilisez à la place des valeurs espacées, 10, 20, 30 etc. par exemple. Cela vous permettra, si vous devez ajouter un objet, d'insérer cet objet sans avoir à renuméroter l'ensemble de vos objets.