Message original par abscondita
Bonjour,
J'aimerais apprendre à faire des angles arrondis en CSS. Qui pourrait me diriger vers des didactiels où m'expliquer comment faire svp ?
Merci
abscondita.
Bonjour "abscondita",
Faire un cadre arrondi en CSS et XHTML
Concevoir un cadre entièrement fluide, c'est à dire étirable à la fois dans le sens de la hauteur et de la largeur est un peu plus délicat et nécessite quelques extravagances supplémentaires.
Voila le résultat
La méthode qui va être exposée ici n'est qu'un moyen parmi beaucoup d'autres, pour la bonne raison qu'il n'existe aucune "bonne" méthode, chacune ayant des inconvénients.
Le principe général est de créer les quatre coins arrondis à l'aide d'un éditeur graphique puis de les placer un par un en position absolue dans un conteneur lui-même placé en position relative.
Nous éviterons l'usage de la balise <img> puisque dans notre cas, les coins arrondis ne constituent pas une image pertinente pourvue de sens, mais servent uniquement à la décoration. C'est donc une balise neutre qui contiendra ces quatre coins arrondis : <div>.
Voici les images utilisées pour les bordures. Notez que la couleur de fond des coins devra s'adapter à la couleur d'arrière plan de votre document !
hautdroit.gif (coin haut droit. Dimension : 19px X 19px)
hautgauche.gif (coin haut gauche. Dimension : 19px X 19px)
basdroit.gif (coin bas droit. Dimension : 19px X 19px)
basgauche.gif (coin bas gauche. Dimension : 19px X 19px)
L'objectif sera d'obtenir un habillage arrondi tel qu'il est représenté sur la figure ci-dessous.
Pour obtenir cet habillage, nous devons résoudre ple problème suivant : le bloc doit être étirable en largeur et en hauteur, d'où la nécessité de scinder en quatre images séparées qui seront placées dans chaque coin. Les images de droite seront placées en positionnement flottant.
La structure générale que nous cherchons à réaliser est présentée sur la figure ci-dessous :
Voici le code HTML et CSS qui ont permis la conception de ce cadre arrondi. Vous devriez à présent être capables de comprendre le principe et de le reproduire. Quelques commentaires explicatifs développent les quelques points importants.
Vous remarquerez l'inversion dans le code HTML des coins droits et gauches, ceci pour que le positionnement flottant fasse effet.
HTML :
<div id="cadre">
<div id="hautdroit"></div><div id="hautgauche"></div>
<div id="contenu">
<p>Texte de contenu</p>
<p>Texte de contenu</p>
<p>Texte de contenu</p>
</div>
<div id="basdroit"></div><div id="basgauche"></div>
</div>
CSS :
body {
font: 1em black verdana, sans-serif;
background-color: white;
}
#cadre { /* taille du cadre, à titre d'exemple */
width: 15em;
background-color: #909090;
}
/* propriétés communes à l'ensemble des 4 coins */
#hautgauche, #hautdroit, #basgauche, #basdroit {
height: 19px; width: 19px;
background-repeat: no-repeat;
font-size:1px; /* correction d'un bug IE */
}
/* propriétés spécifiques à chaque coin */
#hautgauche {
background: url(hautgauche.gif);
}
#hautdroit {
float: right;
background: url(hautdroit.gif);
}
#basgauche {
background: url(basgauche.gif);
}
#basdroit {
float: right;
background: url(basdroit.gif);
}
#contenu p {
color: white;
margin: 0.5em; /*gestion des espaces interparagraphes */
}
coin arrondi en CSS
Maîtresse astucienne
Tu peux t'en sortir en affichant le code source et la feuille de styles des exemples.
