Créer des coins arrondis à l'aide de Sprites CSS

Ma version des coins arrondis consiste à créer un div conteneur, contenant 4 div à l'intérieur, positionnés de manière absolue, dans lesquels les images des coins arrondis sont constituées en utilisant un unique sprite CSS. Nous allons faire ceci :

La possibilité de créer des éléments aux bordures arrondies avec une largeur et une hauteur fluide. Il n'y a pas de limite.

Cette technique, comme je l'ai indiqué plus tôt, est combinée avec les Sprites CSS. Si vous ne savez pas ce que c'est ou comment les utiliser, lisez d'abord mon article précédent. Vous avez compris les Sprites CSS ? Alors commençons !

Nous devons les positionner de manière absolue et définir leur largeur et leur hauteur (qui sera identique pour les 4 coins).

Mes coins ont une largeur et une hauteur de 17 pixels.

.corner { 
        position : absolute;
        width : 17px;
        height : 17px;
}

Si vous exportez une image en forme de rectangle lorsque vous créez votre premier coin, la largeur et la hauteur ne seront pas identiques !

.roundedBox {
        position : relative;
}

Ce code permet à tout élément positionné de manière absolue qui se trouve dans un élément possédant la classe .roundedBox, de se positionner en fonction de cet élément, au lieu de se positionner en fonction de l'élément body.

Nous devons également lui attribuer un padding, car sinon, dans le cas contraire, les coins apparaîtraient au-dessus de notre texte et ce n'est pas ce que nous voulons.

Le padding haut et bas doit être égal et identique à la hauteur de l'image représentant le coin. Le padding gauche et droite doit être égal et équivalent à la largeur de l'image représentant le coin.

Comme vous le savez déjà, la largeur et la hauteur de mes coins sont identiques, donc le padding est le même pour les 4 cotés.

.roundedBox {
        position : relative;
        padding : 17px;
        margin : 10px 0;
}

J'ai également inclus une marge pour donner un peu d'espace à notre div.

Nous allons définir la position absolue de chaque coin, ainsi que leur position d'arrière-plan (en fonction de notre Sprite).

.roundedBox {
        position : relative;
        padding : 17px;
        margin : 10px 0;
}

.corner {
       position : absolute;
       width : 17px;
       height : 17px;
}

.topLeft {
        top : 0;
        left : 0;
        background-position : -1px -1px;
}

.topRight {
        top : 0;
        right : 0;
        background-position : -19px -1px;
}

.bottomLeft {
        bottom : 0;
        left : 0;
        background-position : -1px -19px;
}

.bottomRight {
        bottom : 0;
        right : 0;
        background-position : -19px -19px;
}

Vous l'avez certainement noté mais notre feuille de style n'a pour l'instant pas chargée notre Sprite. Cela s'explique par le fait qu'on va utiliser différents Sprites, nous n'allons donc pas les définir de manière générique.

<div class="roundedBox" id="type1">
    <strong>Mon contenu dans l'exemple 1 de boite arrondie</strong>

    <div class="corner topLeft"></div>
    <div class="corner topRight"></div>
    <div class="corner bottomLeft"></div>
    <div class="corner bottomRight"></div>
</div>

Nous devons attribuer à notre div un id avec comme valeur #type1 pour appliquer un arrière-plan spécifique.

Il faudra d'abord faire correspondre la couleur d'arrière-plan de l'id #type1 à la couleur de fond de notre coin dans le Sprite.

#type1 {
        background-color : #CCDEDE;
}

Puis, en utilisant la classe .corner, charger la Sprite CSS pour ce modèle de boite arrondie.

#type1 {
        background-color : #CCDEDE;
}

#type1 .corner {
        background-image : url(../images/corners-type1.gif);
}

Voilà, notre premier rectangle arrondi est terminé. Consultez l'exemple N° 1 de boite arrondie (bleu).

VI-A-1. Code (X)HTML▲

<div class="roundedBox" id="type2">
    <strong>Mon contenu dans l'exemple 2 de boite arrondie</strong>

    <div class="corner topLeft"></div>
    <div class="corner topRight"></div>
    <div class="corner bottomLeft"></div>
    <div class="corner bottomRight"></div>
</div>

VI-A-2. Code CSS▲

Changez simplement la couleur des Sprites et de l'arrière-plan.

 

Sélectionnez

#type2 {
        background-color : #CDDFCA;
}

#type2 .corner {
        background-image : url(../images/corners-type2.gif);
}

Consultez l'exemple N° 2 de boite arrondie (vert).

VI-B-1. Code (X)HTML▲

<div class="roundedBox" id="type3">
    <strong>Mon contenu dans l'exemple 3 de boite arrondie</strong>

    <div class="corner topLeft"></div>
    <div class="corner topRight"></div>
    <div class="corner bottomLeft"></div>
    <div class="corner bottomRight"></div>
</div>

VI-B-2. Code CSS▲

Changez simplement la couleur des Sprites et de l'arrière-plan.

 

Sélectionnez

#type3 {
        background-color : #D3CADF;
}

#type3 .corner {
        background-image : url(../images/corners-type3.gif);
}

Consultez l'exemple N° 3 de boite arrondie (violet).

Vous avez compris le principe ? Alors allons maintenant un peu plus vite.

Ajoutez une bordure à vos coins dans le Sprite et faites correspondre l'arrière-plan et la bordure déclarée dans .roundedBox avec les coins du Sprite.

#type4 {
        background-color : #CCACAE;
        border :           1px solid #AD9396;
}

#type4 .corner {
        background-image : url(../images/corners-type4.gif);
}

C'est là qu'il y a un hic. Nos coins ne vont pas recouvrir correctement notre bordure déclarée dans l'id #type4. Nous devons donc corriger leur position en réécrivant les précédents styles relatifs au positionnement. Faisont cela :

#type4 {
        background-color : #CCACAE;
        border : 1px solid #AD9396;
}

#type4 .corner {
        background-image : url(../images/corners-type4.gif);
}

#type4 .topLeft {
        top : -1px;
        left : -1px;
}

#type4 .topRight {
        top : -1px;
        right : -1px;
}

#type4 .bottomLeft {
        bottom : -1px;
        left : -1px;
}

#type4 .bottomRight {
        bottom : -1px;
        right : -1px;
}

Nous en avons fini avec l'exemple 4. Consulter cet exemple de boite arrondie (rouge avec bordure).

Nous y sommes presque, ne partez pas maintenant.

Mon dégradé est vertical, du haut vers le bas. Nous devons donc augmenter la hauteur des coins supérieurs et changer le background-position des coins inférieurs. Vous allez comprendre pourquoi je fais ça en voyant mon nouveau Sprite, qui est le suivant :

Et voici l'image d'arrière-plan de mon div :

L'image a une largeur de 1 pixel, mais elle est bien là !

Mes coins inférieurs ont une couleur définie et nous allons faire en sorte qu'elle corresponde avec la couleur d'arrière-plan du div.

Parlons moins et agissons plus. Commençons avec notre div conteneur.

#type5 {
        background : #FECBCA url(../images/roundedbox-type5-bg.png) repeat-x 0 0;
        min-height : 110px;
}

Pour déterminer la couleur de l'arrière-plan, j'ai appliqué l'outil pipette sur l'arrière-plan des coins inférieurs. Puis j'ai ajouté l'image d'arrière-plan qui sera répétée dans l'abscisse x. Enfin j'ai ajouté un min-height, comme je vous l'ai dit plus tôt, pour que le dégradé ne soit pas interrompu. Nous pouvons maintenant ajouter les images des coins (j'ai changé le type d'image en .png pour améliorer la qualité du dégradé).

#type5 {
        background : #FECBCA url(../images/roundedbox-type5-bg.png) repeat-x 0 0;
        min-height : 110px;
}

#type5 .corner 
        background-image : url(../images/corners-type5.png);
}

Il faut maintenant augmenter la hauteur des coins supérieurs (qui va dépendre du moment où le dégradé atteint la couleur fixe).

#type5 {
        background : #FECBCA url(../images/roundedbox-type5-bg.png) repeat-x 0 0;
        min-height : 110px;
}

#type5 .corner 
        background-image : url(../images/corners-type5.png);
}

#type5 .topLeft,
#type5 .topRight {
        height : 140px;
}

Enfin, je corrige le background-position des coins inférieurs.

#type5 {
        background : #FECBCA url(../images/roundedbox-type5-bg.png) repeat-x 0 0;
        min-height : 110px;
}

#type5 .corner 
        background-image : url(../images/corners-type5.png);
}

#type5 .topLeft,
#type5 .topRight {
        height : 140px;
}

#type5 .bottomLeft {
        background-position : -1px -142px;
}

#type5 .bottomRight {
        background-position : -19px -142px;
}

Tout est fait. Consultez l'exemple 5 de boite arrondie (avec un dégradé vertical).