Programmation web CSS HTML PHP Javascript RSS SQL SSH, serveur linux Outils
  PHPascal a 95 articles


Recherche

Modifier la couleur:

• Bleu
• Orange
• Mauve
• Noir
• Rouge
• Vert

Programmation web / CSS / Boîte avec contour

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

---

---

Article écrit le 12 septembre 2010
Article modifié le 16 septembre 2010

Autres articles sous la même catégorie

• Ajouter des background avec transparences en CSS - couleur bg avec opacité CSS
• Ajout d'une police en css - ajouter votre font via CSS
• Toutes les façons de mettre du style dans une page HTML
• Ajouter une feuille de style spécifique a Internet Explorer - IE CSS
• Plusieurs feuilles de style différentes - Style d'affichage modifiable par l'utilisateur
• Gestion global des CSS - programmation CSS
• Couleurs des liens en CSS
• Feuilles de style pour l'impression