Box avec coins arrondis et dégradé.

Box avec coins arrondis et dégradé. - HTML/CSS - Programmation

Marsh Posté le 18-07-2007 à 17:29:17    

Bijour,
 
J'aurai besoin de vos lumières pour réaliser des box avec coins arrondis, bordures et dégradé. Tout ceci redimensionable.
 
Pour l'instant je fais avec un tableau et 4 coins (qui sont des images), et une image de 1px de large pour le dégradé.
 

Code :
  1. <table border="0" cellspacing="0" cellpadding="0" width="190" height="500" bgcolor="FFFFFF">
  2.     <tr height="10">
  3.      <td class="hautgauche"></td>
  4.      <td class="bhaut">&nbsp;</td>
  5.      <td class="hautdroit"></td>
  6.     </tr>
  7.     <tr height="480">
  8.      <td class="bgauche">&nbsp;</td>
  9.      <td class="contenupubdeg">
  10.       <div class="titreContenu">Titre</div>
  11.      </td>
  12.      <td class="bdroit">&nbsp;</td>
  13.     </tr>
  14.     <tr height="10">
  15.      <td class="basgauche"></td>
  16.      <td class="bbas">&nbsp;</td>
  17.      <td class="basdroit"></td>
  18.     </tr>
  19.     </table>


 
Donc c'est bien beau ça marche :), mais si je redimensionne ma box en hauteur, ca ne marche plus du tout :x. Et pour cause le dégradé dépend de l'image d'1px. Donc si la box fait plus que la hauteur de l'image, c'est foutu :(.
 
J'ai trouvé pleins de site pour faire des box automatiquement, mais aucuns ne propose de degradé à l'interieur...
 
Bref si vous avez une idée ça m'interesse fortement :)


Message édité par Kyfun le 18-07-2007 à 17:36:02

---------------
Comme dirait quelqu'un de beaucoup plus avisé que moi, quelquefois c'est toi qui cognes le bar mais d'autres fois, et ben, c'est le bar qui te cogne.
Reply

Marsh Posté le 18-07-2007 à 17:29:17   

Reply

Marsh Posté le 19-07-2007 à 00:12:38    

si tu veux faire un dégradé propre sur une boite qui s'allonge verticalement, une solution est d'avoir en background de ta boite une image par exemple de 600px de haut que tu fais tenir en 100% dans une boiteayany par exemple une hauteur mini de 150px et une hauteur maxi de 600px.. comme ca, quelque soit la hauteur de ta boite, ton degradé tiendra à 100% dedans.. c'est l'image de background qui s'auto-redimensionne..
 
pour le css : .boite{background :url("boite.jpg" ) no-repeat scroll center bottom } devrait marcher


Message édité par bixibu le 19-07-2007 à 00:14:49
Reply

Marsh Posté le 19-07-2007 à 05:43:10    

Reply

Marsh Posté le 23-07-2007 à 11:42:31    

J'ai finallement opté pour une solution sans dégradés, et ça rend mieux en plus :p
 
Merci quand même :)


---------------
Comme dirait quelqu'un de beaucoup plus avisé que moi, quelquefois c'est toi qui cognes le bar mais d'autres fois, et ben, c'est le bar qui te cogne.
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed