Tutoriel : Créer un rectangle arrondi avec PHP et CSS
![[zip]](http://www.lecoindunet.com/img/Icones/Files/zipFile.png "zip"){kind=small}
Voici un tutoriel décrivant une méthode pour créer des rectangles aux coins arrondis dynamiquement avec PHP. Croyez-moi, si vous vous mordez les doigts pour créer des rectangles arrondis vous n'êtes pas le seul ! Il existe plusieurs méthodes. Chacune ont leurs avantages et inconvénients. Voici les principales méthodes :
- Méthode 1 : Créer 4 coins arrondis en images puis les placer dans chaque extrémité des cellules d'un tableau à l'intérieur d'un conteur <div> .
- Avantages : Compatibilité, la largeur du conteneur peut être exprimée en % donc élastique.
- Inconvénients : Il faut créer 4 images
- Avantages : Compatibilité, la largeur du conteneur peut être exprimée en % donc élastique.
- Méthode 2 : Créer une image d'une largeur fixe et très haute. la technique est dite coulissante
- Avantages : Compatibilité
- Inconvénients : Il faut créer 1 image, la largeur du conteneur doit être exprimée en pixel donc fixe.
- Méthode 3 : Utiliser le CSS sur un <div> avec le style "border-radius"
- Avantages : Facile à mettre à place
- Inconvénients : Compatibilité: cette propriété est compatible avec CSS 3 et n'est donc pas compatible avec tout les navigateurs
- Avantages : Facile à mettre à place
Voici un exemple du résultat attendu :
Explications :
Nous allons utiliser un tableau qui va contenir les quatre images de coins arrondis à chaque extrémité puis nous allons insérer le contenu à afficher sur la deuxième ligne du tableau (Je n'ai pas opté pour un affichage de div superposés pour des questions de compatibilités avec IE6). Plutôt que de créer une image pour chaque coin, nous allons faire appel à script qui va générer le coin dans chaque extrémité. Nous allons lui fournir en paramètre les couleurs du rectangle arrondi. Pour faciliter la création du rectangle, nous ferons appel à une classe qui automatisera le traitement.
Pour les pressés, il suffit de télécharger l'archive Zip en haut de l'article puis de la décompresser. Faites ensuite appel au script boite.php dans votre navigateur.
Contenu du fichier boite.php :
Code PHP :
Ne pas oublier les balises <?php ... ?>
<?php
include_once('./class/constructBox.class.php');
$cheminBuildImgCorner = './img/buildImgCorner.php'; // chemin complet du fichier buildImgCorner.php
$conteneurBgColor = '#CDEB8B'; //Valeur en hexa pour la couleur de fond du conteneur
$boxBgColor = '#C3D9FF';//Valeur en hexa pour la couleur de fond du rectangle arrondi
$borderColor = '#F8F8ED'; //Valeur en hexa pour la couleur de la bordure
$borderSize = 4; //Largeur de la bordure en Px. Valeur comprise entre 0 et 9
$radius = 30; //Angle d'arrondis : valeur numrique comptrise entre 1 et 35
$contenu = '<div align="center"><br>Contenu de ma boite <br><br>aux coins arrondis !!<br><br></div>'; //Contenu de la boite
//Affichage du conteneur
echo '<div style="width:20%; padding: 5px; background-color: '.$conteneurBgColor.'; ">';
//Initialisation de la classe
$newBox = new constructBox($conteneurBgColor, $boxBgColor, $borderColor, $borderSize, $radius);
//Affichage de la boite aux coins arrondis avec son contenu
$newBox ->contenu = $contenu;
echo $newBox->showBox();
//Fermeture du conteneur
echo '</div>';
?>
Pour les curieux :
Voici un schéma de la structure attendu
Premièrement, nous allons définir le code PHP qui va générer les coins arrondis en images JPG.
Nous appellerons ce script dans l'attribut HREF d'une balise <img> dans chaque coins du tableau.
Voici le contenu du script qui va nous permettre de générer l'image. Nous allons appeler ce script dans la attribut HREF d'une balise <img>. La balide <img> sera présente dans les cellules du tableau à chaque extrémité avec les paramètres requis : La couleur de fond, la couleur du coin arrondi, la taille de la bordure, la couleur de la bordure, l'angle d'arrondi.
Code Html :
<--! Exemple -->
...
<tr><td><img
src="./buildImgCorner.php?corner=1&bgColor=CDEB8B&cornerColor=C3D9FF&borderColor=F8F8ED&borderSize=0&radius=30"></td>
...
Un autre exemple avec une bordure :
Fichiers du tutoriel : Fichiers du tutoriel
Tags : Css, GD, PHP, coins arrondis, Librairie
| << Dupliquer ou copier des lignes d'une table vers une autre avec MySQL | Généralités sur UTF-8 >> |
Ces articles peuvent vous intéresser :