CSS3
Arrondis avec border-radius
Les arrondis, comme les ombres, sont des effets graphiques largement utilisés dans les pages web. Ils servent à diminuer l'effet trop rectiligne qu'induit le système de zones de block. La propriété border-radius pourra être utilisée et elle prendra des valeurs chiffrées qui permettront de spécifier la quantité d'arrondis souhaité, éventuellement pour chaque angle.
Créer des cercles ou rectangles arrondis en CSS
La configuration de base est donc la suivante, ici exprimée en pourcentage avec une ombre pour la mettre en évidence.
p{
box-shadow: 0px 0px 3px black;
border-radius : 50%;
}
Attention cependant parce que l'arrondi est proportionnel à la dimension de la zone. Pour obtenir le résultat précédent il faudrait donc ajouter des données de largeur et hauteur comme suit :
p {
margin-top:100px;
margin-left:10%;
padding:5px;
width:70%;
width:100px;
height:100px;
background:white;
text-align:center;
}
si l'on souhaite centrer le texte verticalement dans la zone, il sera impossible d'utiliser padding qui va élargir la zone, ni line-height qui ne suivra pas le texte si celui-ci est rallongé. On pourra alors utiliser le display sous forme de table :
display:table-cell; vertical-align:middle;
Il est aussi possible de faire des boutons réactifs en jouant sur le :hover du paragraphe.
Créer des onglets en CSS
Grâce à la possibilité de cumuler plusieurs valeurs, on pourra transformer un simple rectangle issu d'un paragraphe ou d'une liste (ou tout autre élément) en onglet.
Ainsi pour une liste qui servirait de menu tel que ceci :
<ul>
<li>Arrondis</li>
<li>Arrondis</li>
<li>Arrondis</li>
</ul>
Nous pourrions utiliser un code CSS comme le suivant pour obtenir des onglets pur CSS.
li {
display:inline;
padding:0 10px 0 10px ;
margin:1px;
height:20px;
background:yellow;
border-radius : 5px 5px 0px 0px;
}
Des images arrondies en CSS
La même chose peut être réalisée en changeant les valeurs pour chacun des angles et en l'appliquant à d'autres éléments, comme par exemple ici une image :
img {
height:100px;
border-radius : 10px 30px 10px 30px;
}
Créer arrondis elliptiques
Enfin, des arrondis irréguliers seront possibles par la possibilité de jouer sur un cumul de deux valeurs pour définir l'ellipse aux angles.
p{
box-shadow: 0px 0px 3px black;
border-radius : 50%/10% ;
}
La première valeur définit le rayon horizontal et la seconde le rayon vertical, les deux étant séparés par un slash.
On remarquera que l'arrondi en pourcentage ne peut pas dépasser les 50%. Pour avoir un arrondi complet sur un côté, il sera nécessaire de l'exprimer en pixel.
p {
display:table-cell;
vertical-align:middle;
padding:5px;
width:100px;
height:100px;
background:white;
text-align:center;
box-shadow: 0px 0px 3px black;
border-radius : 100px/30px 0 0 0;
}
Cette solution ne marchera cependant que si on applique la valeur à un seul angle ou à tous.
On pourra appliquer les changements horizontaux et verticaux séparément sous la forme :
border-radius : 100px 0 0 10px /30px 0 0 10px;
On pourra se reporter plutôt vers la définition d'angles séparés avec les propriétés spécifiques :
p{
box-shadow: 0px 0px 5px black;
border-top-left-radius : 100px 30px;
border-bottom-right-radius : 100px 30px;
}