[Plan du site]
Vous êtes ici ---
> Le Site du Zéro
> Les tutoriels
> Non-Officiels
> Site Web
> XHTML / CSS
> Créer un arrondi en CSS
> Lecture du tutoriel
Créer un arrondi en CSS
Vous vous apprêtez à lire un tutoriel rédigé par un membre de ce site. Malgré tout le soin que ce membre a pu apporter au tutoriel, nous ne pouvons pas garantir que les informations contenues sur cette page sont exactes à 100%. Merci de garder cela en tête lorsque vous lirez cette page ;o)
Bonjour à tous !
Cela fait quelques temps que vous maîtrisez XHTML et CSS.
Vous avez tenté de faire un arrondi. Que ça ait marché ou pas, je vais dans ce tuto vous détailler des méthodes possibles pour faire un arrondi.
Nous allons aborder trois méthodes.
- Une méthode entièrement extensible.
- Une méthode extensible en hauteur.
- La propriété CSS "-moz-border-radius".
Allons-y !
La méthode entièrement extensible
Pour commencer tout de suite, il faut que je vous dise que cette méthode rajoute 4
div dans le code XHTML par cadre arrondi, une méthode qui peut se révéler assez lourde à force. Mais elle a le mérite de fonctionner.
La méthode que je vais vous décrire ici est assez simple, et c'est aussi celle qui vient le plus rapidement à l'esprit.
Code : HTML1
2
3
4
5 | <div id="cadre">
<div class="hautdroit"></div> <div class="hautgauche"></div>
<p class="texte"></p>
<div class="basdroit"></div> <div class="basgauche"></div>
</div>
|
C'est vrai, c'est lourd, mais je vous avais prévenus !
Essayez de trouver le code CSS qui va avec ! Ce sont de bons entraînements en CSS.
[...]
Entraînement en cours
[...]
Vous avez essayé ? C'est bien.
Voilà le code CSS qui fonctionne avec le code XHTML qui précède pour créer un arrondi :
Code : CSS 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34 | #cadre /* Propriétés qui s'appliquent au cadre en général */
{
width: 200px;
background-color: #eeeeee;
}
.hautgauche` .hautdroit` .basgauche` .basdroit /* Propriétés communes aux quatre coins de notre arrondi */
{
height: 20px;
width: 20px;
background-repeat: no-repeat;
}
.hautgauche
{
background-image: url('hautgauche.png');
}
.basgauche
{
background-image: url('basgauche.png');
}
.hautdroit
{
background-image: url('hautdroit.png');
float: right;
}
.basdroit
{
background-image: url('basdroit.png');
float: right;
}
|
Vous avez compris le code ? Tant mieux !
Mais je vais quand même le détailler, pour ceux qui n'auraient pas compris.
#cadre contient deux propriétés qui s'appliquent au cadre en général.
Deux propriétés assez communes que, j'espère, vous connaissez.
Les propriétés communes aux quatre coins définissent la hauteur et la largeur d'un coin (en l'occurrence, 20 pixels), et précisent que le fond du coin ne devra pas être répété. C'est logique.
.hautgauche et
.basgauche sont identiques, mis à part l'image mise en
background. (On ne va pas mettre le haut en bas et le bas en haut, quand même ?)
.hautdroit et
.basdroit possèdent, encore une fois, mis à part l'image en background, le même code.
Si vous êtes normaux (
), une question s'agite dans votre esprit...
Pourquoi as-tu appliqué un
float: right à
.hautdroit et
.basdroit, alors que tu n'as pas appliqué de
float: left à
.hautgauche et
.basgauche ?
Excellente question, cher Zéro !
Tout simplement parce qu'un élément qui ne reçoit pas de
float, est placé à gauche (du moins, tant que l'on n'a pas utilisé la propriété
direction) !
La propriété direction permet de définir la direction d'écriture, de gauche à droite (ltr = left to right), ou de droite à gauche (rtl = right to left). Elle sert notamment pour les langues où l'écriture se fait de droite à gauche.
Vous êtes toujours vivants ? On continue !
Maintenant, nous allons aborder les arrondis, mais de largeur fixe...
Pour réussir des arrondis de largeur fixe, vous avez énormément de manières d'arriver au même résultat. Je vais vous montrer, celle qui est, à mon goût, la plus simple...
La manière logique !
Code : HTML 1
2
3
4
5
6
7
8
9
10
11 | <div class="hautmenu"></div>
<div class="menu">
<h1>Menu du jour</h1>
<ul>
<li>Roblochon</li>
<li>Couscous</li>
<li>Anchois</li>
<li>Indigestion</li>
</ul>
</div>
<div class="basmenu"></div>
|
Ce code, je l'espère, vous le comprenez : il n'y a rien qui doit vous choquer...
Et si vous êtes forts, vous avez compris tout de suite comment on allait fonctionner avec le CSS...
Pour les retardataires, je vous laisse chercher..
[...]
Eh oui, c'est ça ! Le
.hautmenu servira à placer le haut du menu, le
.menu, à placer le fond du menu, et le
.basmenu, le bas du menu...
Maintenant, on va passer directement au code CSS...
Code : CSS 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39 | .hautmenu
{
background-image: url('haut.png');
background-repeat: no-repeat;
height: 30px;
width: 100px;
}
.menu
{
background-image: url('menu.png');
background-repeat: repeat-y;
color: #9bbdcf;
width: 100px;
}
ul
{
list-style-type: none;
list-style-position: inside;
}
h1
{
font-size: 1.5em;
text-align: center;
text-decoration: underline;
font-weight: bolder;
color: #9bbdcf;
}
.basmenu
{
background-image: url('bas.png');
background-repeat: no-repeat;
height: 30px;
width: 100px;
}
|
Ça ne marche pas, espèce de #$%~!/\(e !!
Holà, doucement.
Si je vous donnais la solution sur un plateau, ce serait trop facile pour vous, et à la longue, ça ne servira à rien... Et puis, vous êtes là pour apprendre, non ?
Tout d'abord, on va s'expliquer le code CSS.
.hautmenu et
.basmenu sont les mêmes codes, mis à part l'image en
background. Il faut absolument indiquer une hauteur (
width) et une largeur (
height), pour que le
background s'affiche...
.menu rejoint
.hautmenu et
.basmenu, sauf que son image de fond doit se répéter... Logique, non ?
Quant à
h1 et
ul, c'est uniquement d'un point de vue esthétique...
On va arriver au point le plus intéressant : je vais vous montrer, puis vous expliquer comment faire pour que cet arrondi fonctionne correctement...
Code : CSS 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45 | .hautmenu
{
margin: 0;
background-image: url('haut.png');
background-repeat: no-repeat;
height: 30px;
width: 100px;
}
.menu
{
margin: 0;
background-image: url('menu.png');
background-repeat: repeat-y;
color: #9bbdcf;
width: 100px;
}
ul
{
margin: 0;
list-style-type: none;
list-style-position: inside;
}
h1
{
font-size: 1.5em;
text-align: center;
text-decoration: underline;
font-weight: bolder;
color: #9bbdcf;
margin: 0;
margin-bottom: 10px;
}
.basmenu
{
margin: 0;
background-image: url('bas.png');
background-repeat: no-repeat;
height: 30px;
width: 100px;
}
|
Il n'y a pas grand-chose en plus... Juste une ligne magique qui se répète plusieurs fois
...
Le "
margin: 0;" indique au navigateur qu'il ne faut pas laisser de marges entre les différents éléments
blocks, car c'est bien ça qui buggait le code CSS.
Par défaut, les éléments
h1 et
ul possèdent une marge, et grâce à
margin: 0;, les marges sont réduites à 0, et le menu arrondi s'affiche correctement...
Je vous pense maintenant capables de réaliser un arrondi extensible en hauteur... Je vous ai expliqué le fonctionnement, et une fois qu'on a compris, il ne reste plus qu'à appliquer... Essayez sur votre ordinateur d'effectuer des changements dans le code, et regarder ce que ça change, c'est un
excellent entraînement!
Dans ce chapitre, le principal smiley sera:
Non, c'est pas vrai, mais presque.
On a vu que créer un arrondi en XHTML et CSS, ce n'était pas du gâteau... Eh bien pourtant, avec cette propriété CSS (qui sera sans doute officiellement intégrée lors de la version 3 de CSS), il n'y a pas plus facile.
Tout d'abord, les présentations
Pour l'instant, cette propriété n'est pas intégrée à la norme CSS. Mais le W3C l'étudie, elle est déjà présente dans le premier jet de CSS 3.
La seule chose qu'elle a de mal, c'est qu'elle est propre à un moteur de rendu. C'est une astuce introduite par le
moteur de rendu Gecko, ce qui signifie qu'il n'y a que les navigateurs fondés sur Gecko qui l'interprètent.
Les navigateurs fondés sur le moteur de rendu Gecko les plus connus sont :
- Firefox (le plus répandu)
- La suite Internet Mozilla
- Camino.
Cela exclut logiquement de nombreux navigateurs, dont... Internet Explorer. Mais sur ce point, Internet Explorer ne peut être blâmé, cette propriété n'a rien d'officiel.
D'autres navigateurs, basés sur un autre moteur de rendu, reconnaissent une propriété similaire.
Logiquement, dans l'avenir, cette propriété rentrera dans la norme CSS, sera reconnue par tous les navigateurs du marché, et donc facilitera grandement le travail des designers Web, puisqu'elle sera une manière de créer un arrondi sans avoir recours à des images...
La pratique
Imaginons un paragraphe anodin sur votre site.
Code : HTML1
2
3
4
5 | <p class="anodin">
Je suis un paragraphe anodin !<br />
Je me balade un peu partout dans les sites, et je surgis là où l'on ne m'attend pas !<br />
Pom Pom Pom !
</p>
|
Votre design est beau, mais ce bloc dérange... et puis de toute façon, vous n'avez pas envie de rajouter des
div tout autour de ce pauvre paragraphe anodin... D'autant plus que vous trouvez que le design est déjà assez lourd comme ça...
La solution à ce problème, vous l'avez compris, c'est la propriété
-moz-border-radius !
A l'aide de ce code, le paragraphe anodin sera arrondi à ses quatre coins de 15 pixels, et sera plus joli.
Code : CSS1
2
3
4
5
6 | .anodin
{
width: 80%;
-moz-border-radius: 15px; /* C'est cette ligne qui nous intéresse : les autres ne devraient pas vous poser de problèmes. ;o) */
background-color: #f8f8f8;
}
|
Je vous laisse faire l'essai chez vous...
[...]
Alors, elle est super cette propriété, non ?
Personnellement, j'attends qu'elle soit prise en compte dans la norme, car je la trouve magique ! (
)
Une autre manière de l'utiliser est de spécifier pour chaque coin le nombre de pixels d'arrondi.
Code : CSS1 | -moz-border-radius:15px 15px 15px 15px;
|
Dans l'ordre, les spécifications de pixels correspondent au coin :
- en haut à gauche
- en haut à droite
- en bas à gauche
- en bas à droite
Vous pouvez, si vous avez peur de ne plus vous y retrouver dans l'ordre des coins, utiliser de cette façon la propriété :
Code : CSS1 | -moz-border-radius-topleft: 15px;
|
est bien sûr remplaçable par
topright,
bottomleft, et bien entendu
bottomright.
Regardez la page sous Internet Explorer...
Effectivement, ça ne fonctionne pas.
Rappelez-vous, cette propriété fonctionne seulement sur certains navigateurs !
Le cas de khtml
Si
-moz-border-radius ne fonctionne que sur les navigateurs basés sur le moteur de rendu Gecko, le moteur de rendu KHTML comprend lui aussi une propriété similaire, qui ne fonctionnera alors que sur les navigateurs basés sur KHTML. Les plus connus sont :
- Safari (navigateur principal de Mac OS X)
- Konqueror.
Je ne vais pas vous faire languir plus longtemps, voici la propriété :
Code : CSS
Elle fonctionne
exactement de la même façon que
-moz-border-radius, sauf qu'elle fonctionne sur les navigateurs basés sur KHTML.
Car rien ne sera jamais fini,
tout mérite d'être approfondi.
Les bonnes adresses
Autres applications
Nous avons étudié dans ce tutoriel comment créer différents arrondis en CSS.
- Les méthodes que je vous ai montrées ne sont pas les seules existantes, ce sont surtout celles que je maîtrise le mieux, donc celles que je pouvais le mieux vous expliquer.
N'hésitez pas à visiter les liens que je vous ai donnés pour étendre votre savoir-faire !
- Nous n'avons parlé dans ce tutoriel que d'arrondis... Mais ce n'est pas tout ! Cette méthode s'applique aussi aux cadres graphiques ! Il vous suffit pour cela de changer les images, c'est tout !
Et voilà : ce tutoriel touche à sa fin ; j'espère que vous avez tout compris, et que vous savez maintenant réaliser à la perfection un arrondi en CSS.
Si une question vous taraude ou vous tarabiscote, n'hésitez pas à
m'envoyer un MP, ou à commenter ce tutoriel.
Tutoriels
Communauté
Mon compte
Recherche
Livre d'or
Publicité
264 Zéros connectés |
9 requêtes |
0.0313s (0.0198s)
