Boîte avec contour en css
Voici une façon de faire pour l'intégration d'une boite en CSS sur une page web.Code source :
<style type="text/css">.boite { width:200px; background: url(images/boite_bg.jpg) no-repeat; }
.boite .boite_debut { padding:5px; padding-bottom:0px; background: url(images/boite_droit.jpg) top right no-repeat; }
.boite .boite_bas { background: url(images/boite_bas.jpg) no-repeat; height:14px; }
.boite .boite_bas div { background: url(images/boite_coin_bas_droit.jpg) top right no-repeat; height:14px; }
</style>
<div class="boite"><div class="boite_debut">
texte dans la boite, texte dans la boite
</div>
<div class="boite_bas"><div></div>
</div>
Téléchargement du code source et du fichier photoshop de la boîte
Fonctionnement :
Pour permettre une largeur et hauteur flexible a la boîte j'utilise 4 images différentes pour le background de la boite.Voici les 4 images de background:
 |
 |
 |
 |
Le principe est très simple on fait le découpage d'une boîte plus grosse que prévus pour l'intégration dans notre page web ce qui va nous permettre de l'afficher petite ou moyenne ou grosse (le maximum de grosseur est la taille de notre images initial). Télécharger le fichier photoshop de la boite.
Avantage de cette méthode d'intégration de boîte
- Rapidité de mise en place
- Peu de code CSS et de balise nécessaire
- Permet redimentionnement facil de la hauteur de la boite et de sa largeur
Limite de cette intégration
- Pas de transparence permise
- Perte d'espace pour écrire du texte en bas de la boite
- Boite ne peuvent pas s'aggrandir à l'infinit
Résultats
Boîte 200px de large
Boîte 300px de large
Boîte 400px de large
exemple texte
Hauteur flexible
.......