Julien Dubreuil

Pour ceux d’entre vous qui souhaitent réaliser un design un peu moins linéaire, je vous propose un petit tuto pour ajouter facilement des coins arrondis à vos pages.

Comment ça marche ?

Votre conteneur peut être une page, un article, un widget sous wordpress, peu importe. L’essentiel est de repérer dans la structure de votre site, l’endroit où vous allez effectuer la modification. Si vous utilisez un CMS ou un blog il vous faut trouver le fichier .php à modifier.

Un dessin vaut mieux qu’un long discours voici comment ça marche :

En fait on insert au dessus et en dessous de notre conteneur les balises nous permettant d’obtenir une forme aux coins arrondis. Bien sur cet exemple n’est qu’une des nombreuses possibilités.

Création des images aux bords arrondis

Pour cela nous allons utiliser un générateur d’image aux bords arrondis pour créer les images que l’on placera en haut et en bas.

Rendez vous en bas de la page, dans la partie « Single RoundedCornr Image » et remplissez les champs suivants :

- Height : 10 /* C’est la hauteur de votre image
- Width : 500 /*Cela correspond à la largeur de votre conteneur
- Corner background /* Cette option permet de définir la couleur de fond de l’image générée, par défaut l’option transparente est activée
- Pour chaque coin il est possible d’avoir soit l’angle arrondi ou un angle droit
- Corner radius : 10 /* On définit l’angle du bord
- Solid color /* Insérez la couleur que vous voulez, de préférence la même que votre conteneur.

Pour valider cliquer sur Create Roundedcornr.

L’image apparait, si celle-ci vous convient enregistrez la et renommez la.

Exemple :
Nous allons créer des coins arrondis à afficher sur les billets de votre blog. Notre billet à pour fond la couleur bleu(#3d8ec1), et pour fond la couleur blanche(#ffffff), voici les options à paramétrer :

Pour l’image supérieure :
Height : 10 ; Width : 300 ; Corner background : #ffffff ; Top-left-corner : Rounded ; Top-right-corner : Rounded ; Bottom-left-corner : Square; Bottom-right-corner: Square; Corner radius : 10; Solid color : # 3d8ec1;
Sauvegardez et Renommez l’image rounded_top.gif

Pour l’image inferieure:
Height : 10 ; Width : 300 ; Corner background : #ffffff ; Top-left-corner : Square; Top-right-corner : Square ; Bottom-left-corner : Rounded ; Bottom-right-corner: Rounded ; Corner radius : 10; Solid color : # 3d8ec1;
Sauvegardez et Renommez l’image rounded_bottom.gif

Mise en place

- Insérez vos images dans votre répertoire image.
- Ouvrez le fichier style.css, et copiez les lignes suivantes à la fin du fichier.

.roundcornertop{
width:300px;
height:10px;
background: url(images/rounded_top.gif) no-repeat top left;
}
. roundcornerbottom{
width:300px;
height:10px;
background: url(images/rounded_bottom.gif) no-repeat bottom left;
}

Le plus dur reste à faire, il vous faut trouver les pages à modifier pour placer les balises contenant les images autour du conteneur.
< div class= »roundcornertop »>< /div>
< div> Votre conteneur< /div>
< div class= »roundcornerbottom »>< /div>