Des bords arrondis, sans images, avec les CSS3

Publié dans HTML et CSS | Marqué avec , , ,
Share

Je suis actuellement en train de faire le design d’un nouveau site, et pour la première fois, je me suis amusé un petit peu avec les CSS 3. Je n’ai utilisé que des bords arrondis (border-radius), et des effets d’ombres (box-shadow), et je suis impressionné par ce que l’on peut faire en quelques lignes. Quand je pense aux transitions, aux couleurs RGBa (pour gérer la transparence facilement), les arrières-plans multiples, j’ai vraiment hâte que les navigateurs l’implémentent ! Il est déjà possible de tester un rendu temporaire en utilisant les préfixes -moz- (pour Firefox), et -webkit- (pour Safari et Google Chrome), et sans préfixe pour Opéra à partir de la version 10.5 . Pour Internet Explorer, il faut se rabattre sur les créations anciennes ou nouvelles des développeurs de Microsoft, qui, quand elles existent, ne suivent pas de standard particulier. Welcome in the real world!

Un peu d’arrondi pour la douceur

Nous allons commencer par voir comment réaliser des bords arrondis sans utiliser d’images. Et en ajoutant une petite image pour la déco quand même, on va créer la chose suivante :


Utilisation de border-radius

Pour cela on va utiliser la propriété border-radius. Elle est implémentée sous Firefox, Opera, Safari et Google Chrome, en utilisant les préfixes cités précédemment. Dans mes exemples j’utiliserai border-radius tout court.
Cette propriété peut prendre plusieurs arguments :

  • un seul pour définir l’arrondissement des 4 angles du bloc de manière identique
  • deux pour définir l’arrondissement des angles supérieurs et inférieurs du bloc (supérieur correspond à : top left, bottom right. Inférieur correspond à : top right, bottom left. C’est la même logique qu’avec les propriétés globales margin, padding, etc)
  • deux pour définir l’arrondissement des angles top left, bottom right et inférieurs
  • quatre pour définir l’arrondissement des 4 angles du bloc séparément

Par exemple, avec un seul argument :

.arrondi { border-radius: 20px; }

Nous donne le résultat suivant : Tester sur votre navigateur

Par contre, avec 2 arguments :

.arrondi { border-radius: 20px 50px; }

Nous donne : Tester sur votre navigateur

Si on précise 3 arguments :

.arrondi { border-radius: 10px 30px 50px; }

On obtient : Tester sur votre navigateur

Et pour finir :

.arrondi { border-radius: 10px 30px 50px 70px; }

Nous donne : Tester sur votre navigateur

Maintenant que nous voyons comment construire des bords arrondis, voyons à quoi correspond la valeur que l’on fournit. Cette valeur peut être en pixel, en pourcentage, en pt ou en em, et elle correspond au rayon du cercle formant l’arrondi. Voyons cela sur une illustration prise sur le site du W3C dans le cas d’un ovale (ce que l’on verra bientôt) :

Il me semble que c’est assez clair maintenant. Voyons donc comment utiliser un ovale plutôt qu’un cercle. Il faut préciser 2 valeurs par argument, en les séparant par un slash ( / ) :

.arrondi { border-radius: 10px / 50px; }

On obtient alors ce résultat plutôt sympathique : Tester sur votre navigateur

Pour deux arguments, il faut utiliser la syntaxe suivante :

.arrondi { border-radius: 10px 30px / 50px 70px; }

Ce qui nous donne : Tester sur votre navigateur

On comprend maintenant comment faire avec 3 et 4 arguments. On peut noter qu’on aurait pu utiliser border-top-left-radius, border-top-right-radius, border-bottom-left-radius et border-bottom-right-radius pour séparer tout ça, cela dit, cela ne semble pas encore fonctionné sur les différents navigateurs.

Du Javascript pour Internet Explorer

Il est possible d’obtenir un effet similaire sur Internet Explorer en utilisant du Javascript. Il existe apparemment de nombreuses techniques pour y parvenir, pour ma part, celles présentées sur Alsacréations me satisfait très bien. Cela ne fonctionne pas sur les derniers exemples que j’ai cité, mais c’est déjà ça.

Place à l’exemple final

Tout d’abord, le code HTML :

<div id="recherche">
	<h2>Rechercher</h2>
	<form action="./recherche" method="post">
	<p>
		<input type="text" name="recherche" id="recherche" />
		<input type="submit" value="Ok" />
	</p>
	</form> </div> <div id="categorie"> <h2>Catégorie</h2>
	<ul>
		<li><a href="#">Javascript</a></li>
		<li><a href="#">HTML</a></li>
		<li><a href="#">CSS</a></li>
	</ul>
	<a href="#">Toutes les catégories</a> </div>

Maintenant, c’est parti pour les CSS :

#recherche { background-color: #88BD2D; border: 0 none; border-radius: 80px 180px 0 0; margin: 0; padding: 30px 0 18px 0; }
	#recherche h2 {
	color: #704D3B;
	} #categorie { background-color: #DFD7C0; border: 0 none; border-radius: 0 0 300px 55px; margin: 0; padding: 2px 0 120px 0; }
	#categorie {
	color: #88BD2D;
	}

On obtient bien le résultat escompté, ou presque :

Pour obtenir l’effet arrondi entre les 2 couleurs, on a deux solutions :

  • soit utiliser une image « comme dans l’temps »
  • soit se la jouer ruser
#recherche {
	position: relative;
	z-index: 2;
	background-color: #88BD2D;
	border: 0 none;
	-moz-border-radius: 80px 180px 150px 200px / 80px 180px 15px 15px;
	-webkit-border-radius: 80px 180px 200px 200px / 80px 180px 20px 20px;
	-o-border-radius: 80px 180px 200px 200px / 80px 180px 20px 20px;
	border-radius: 80px 180px 200px 200px / 80px 180px 20px 20px;
	margin: 0;
	padding: 50px 0 10px 0;
	}
		#recherche h2 {
		color: #704D3B;
		}
	#categorie {
	position: relative;
	top: -15px;
	z-index: 1;
	background-color: #DFD7C0;
	border: 0 none;
	-moz-border-radius: 0 0 300px 55px;
	-webkit-border-radius: 0 0 300px 55px;
	-o-border-radius: 0 0 300px 55px;
	border-radius: 0 0 300px 55px;
	margin: 0;
	padding: 15px 0 100px 0;
	}
		#categorie {
		color: #88BD2D;
		}

Et on obtient bien : Tester sur votre navigateur

Pour aller plus loin

Bon éh bien voilà pour mon explication de border-radius. Je pensais pouvoir parler box-shadow, mais ce sera pour une autre fois ! Je me suis bien inspiré d’un tutoriel d’Alsacréations Créer des coins arrondis en CSS et sans images et bien sûr des descriptions du W3C. Je viens aussi de découvrir cet exemple d’utilisation fort amusant : Logo Opera.

2 Responses to Des bords arrondis, sans images, avec les CSS3

Laisser un commentaire

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