24 janvier 2013
Category:
CSS
Comments: 1

Réaliser un Rond en CSS

Le web est par tradition statique, dans un espace à deux dimensions. Les feuilles de style CSS nous ont permis de modifier la largeur et la hauteur des différents éléments que composent nos sites Internet. Il reste difficile de donner une impression de profondeur sans passer par un grand nombre d’images, cette technique étant plutôt réservé au site en Flash et Javascript. Mais heureusement les choses évoluent.

Le CSS3 nous offre un grand nombre de possibilités avec de nouveaux outils , nous permettent d’avoir des rendu impressionnant de manière simple. Alors que tous les navigateurs ne supportent pas encore parfaitement ces tout nouveaux outils, il reste amusant d’essayer de voir ce que le web de demain pourra nous proposer.

Dans ce micro tuto, je vais essayer de vous montrer comment il est possible de transformer un simple bloc en cercle, en utilisant uniquement le HTML et le CSS.

Le HTML

Il n’y a pratiquement pas de HTML nécessaire ici. On peut utiliser à peu près n’importe quelle balise pour réaliser notre rond. J’ai choisi dans l’exemple la balise gras.

Le CSS

Maintenant nous allons pouvoir commencer la partie fun. L’élément gras est un élément en ligne, mais on peut également en faire un bloc de manière simple. On va pouvoir lui attribuer ensuite une largeur, une hauteur, une couleur, et des marges pour l’espacer. Ceci nous donne un carré comme base de travail.

L’étape suivante consiste à transformer ce carré en cercle. Cette action parait complexe au premier abord et pourtant il ne suffit que d’une ligne :

La propriété border-radius applique un rayon aux bordures de notre élément en les arrondissant. Si on fixe un border-radius de 50%, les coins sont automatiquement arrondi à 50% de la largeur / hauteur de l’élément. Ce qui nous donne un cercle.

Maintenant que nous avons un cercle, nous pouvons essayer de lui donner une impression de profondeur. Pour cela, on va se pencher sur la lumière et l’ombre, exemple donner à titre de test et qui saura être perfectionné par de vrai designer …

La propriété Shadow est la plus simple des manières pour donner cette impression de profondeur dans notre espace de travail à deux dimensions. Si on utilise la valeur inset au départ, les valeurs d’ombre seront appliquées à l’intérieur de notre élément et plus en dehors.

Je reviens sur la technique employée ici avec box-shadow. Le premier élément signifie que l’ombre est à l’intérieur de l’élément. Ensuite je règle la distance sur laquelle l’ombre va s’étaler depuis le côté gauche. ( ici -25px signifie que l’ombre va s’étendre depuis la droite), puis la distance depuis le haut ( ici aussi négative ) et ensuite je règle la valeur de flou à ajouter à cette ombre ( 0 étant une ligne nette ). Pour finir on choisir la couleur de l’ombre avec l’aide de rgba, ce qui nous permets d’appliquer une transparence à cette couleur. Dans l’exemple l’opacité de la couleur noir a été réglé à 50%.

On pourrait ensuite s’arrêter là. Mais on va essayer de pousser un peu plus loin pour le rendre plus réalise. Où il y a de l’ombre, il y a de la lumière ! Cette phrase n’est pas tirer d’un grand roman que j’aurais lu par inadvertance, c’est un simple constat. On va donc essayer d’ajouter de la lumière à notre sphère.

L’ombre est sur le quart inférieur droit, donc la lumière doit provenir du quart supérieur gauche. Je pourrais utiliser une technique différente ici, mais je préfère choisir un dégradé linéaire pour notre lumière.

Un dégradé en CSS est appliqué en tant qu’image d’arrière-plan. J’ai utilisé les différents préfixes qui correspondent au principaux navigateurs moderne.

On utilise toujours une couleur rgba ( blanc avec 30% d’opacité ) pour donner une impression de lumière sur le côté. On applique une rotation de -45° pour que le dégradé parte du coin supérieur gauche et non du haut vers le bas, on utilise une rotation antihoraire.

Et voilà, notre cercle est terminée, vous pouvez voir une démonstration ci-dessous, et modifier les éléments HTML et CSS pour réaliser votre propre cercle.

N’hésitez pas à partager cette article, et nous posez toutes vos questions dans les commentaires ci-dessous.



Une réponse pour “Réaliser un Rond en CSS

  1. Super résultat! Merci beaucoup

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *