blognote-info.com

Il y a une multitude de méthode qui permettent de représenter une boite a coin ronds en CSS... Bien sur toutes ces methodes utilisent des trucs, car CSS n'est pas capable en soit de créer une boite ronde. Disons dans la version actuelle !!!

Je vais vous présenter la mienne sans dire que c'est la meilleure mais je l'ai trouvée assez légère et assez facile a mettre en place ... donc après une fois que vous avez pigé le truc il suffit d'adapter a vos besoins mais dans l'absolu.

Cette technique permet d'avoir une boite de taille variable comparée a des technique qui utilisent moins de calques mais dont la largeur ou la hauteur est fixée...

Au niveau HTML ça ce passe comme ça :

 <div class="tleft">
   <div class="tright">
     <div class="bleft">
       <div class="bright">
         <p>Ici votre texte ou code html qui doit 
         se situer a l'intérieur de votre boite ronde !!!</p>
       </div>
     </div>
   </div>
 </div>

Il y a donc 4 calques imbriqués ... le calque de plus haut niveau fixe la largeur et celui de plus bas niveau la hauteur ... Dans chaque calque on positionne une image dans le coin et dans le calque le plus petit on définit un padding permettant de fixer une zone d'écriture qui n'empiète pas sur les images ... les images doivent avoir comme fond, la couleur du fond sur lequel la boite est posibionné. La couleur interne doit également coïncider... De toute façon si vous testez vous allez rapidement comprendre ce que je veux dire !!!

Voici maintenant ce qu'il faut écrire dans le fichier CSS pour que toute la magie opère :

 body {
     background-color:#20B1AA;
     /*même couleur que le fond de l'image*/
 }
 .tleft {
     /*c'est ici que l'on fixe la largeur de la boite*/
     width:200px;
     margin:auto;
   
     /*couleur de la boite en elle même*/
     background-color:#353C91;
   
     /*image de coin haut gauche*/
     background-image:url(images/tl.gif);
     background-repeat:no-repeat;
     background-position:top left;
 }
 .tright {
     /*haut droit et ainsi de suite ...*/
     background:url(images/tr.gif) no-repeat scroll top right;
 }
 .bleft {
     background:url(images/bl.gif) no-repeat scroll bottom left;
 }
 .bright {
     /*ici on fixe la hauteur de la boite
     ainsi que l'aspect de ce qui doit se trouver à l'intérieur*/
     height:200px;
     color:white;
     padding:20px;
 
     background:url(images/br.gif) no-repeat scroll bottom right;
 }

et voili preuve à l'appui tout marche :)

D'autres technique permettent de donner un effet d'ombre mais il faut 9 calques ... le principe est le même on rajoute simplement un calque pour la gauche la droite le haut et le bas en plus des coins et du centre ...
Si vous n'avez que des boites de largeur fixe vous pouvez diminuer le nombre de calque en créant une image fixe pour le haut et le bas ... du coup 2 calques suffisent ...

A vous de jouer !!!