PHPascal.com

PHPAscal rouge2 (Version bleu)


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


Recherche


cheap nike nfl jerseysWholesale cheap nfl jerseyscheap jerseys online from chinacheap nfl jerseys free shippingwholesale nba jerseysWholesale cheap nhl jerseyscheap nhl jerseys onlinecheap nba basketball jerseys

Valid HTML 5

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:
boite_bg.jpg en haut a gauche
coin


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

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

Autres articles sous la même catégorie


Pascal Dubreuil | © PHPascal.com 2024
Temps d'exécution : 0.13 sec
Imprimer le 6 December 2024 - 23:41:18
par Pascal Dubreuil organisateur du Marathon roller du Canada