28172 sujets

CSS et mise en forme, CSS3

Bordure personnalisée d'image avec d'autres images!

Bonjour!
je voudrais faire ce style avec mes images:
http://nsa10.casimages.com/img/2010/01/22/100122051318201121.png

J'ai deux solutions à ma connaissance:
- faire un fond d'image avec l'ombre et positionner les images par dessus: mais ce n'est pas du tout flexible
- utiliser le CSS3 mais je ne crois pas que l'ombre puisse se faire tout autour, et en plus beaucoup de monde ne le vois pas encore bien!

Je pense qu'il faudrait trouver un systeme où il y aurait une image pour tous les angles et une pour les bordures: ça serait flexible et visible par tous!

Mais je ne sais pas comment m'y prendre! Avec un tableau on aurait pu faire facilement des angles mais avec une image... je vois pas!

Merci de m'aider Smiley cligne

@+
Modifié par Baptiste08 (22 Jan 2010 - 17:14)
ok merci! ça passe à peu près quand même avec IE!
j'espere que la prochaine version prendra enfin compte de tout ces trucs qui ne marchent pas avec IE actuellement! (une version est elle annoncée au fait?)

@+ et merci!
J'ai fait un truc rapide. Bon, c'est évident que le border-image et les éventuels multiple-background permettront à tous de faire ça de façon plus simple et plus propre mais voici une alternative. Ça reste cependant un code xhtml valide et CSS 2.0 ( donc compatible partout, même IE6 )

Au fait, j'ai découpé les images rapidement et donc on voit une coupure mais le principe est le même.


<body>
<div class="left">
<div class="right">
<div class="top">
<div class="bottom">
<div class="left_top">
<div class="right_top">
<div class="right_bottom">
<div class="left_bottom">
    <div class="img">
        <img src="http://forum.alsacreations.com/avatars/25339-dsc02456.jpg" height="150" width="150" alt="" />
    </div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>



div { float:left; }
.img { padding:15px; }

.right { background:url(http://img718.imageshack.us/img718/833/left.gif) repeat-y right top; padding:0 7px 0 0; }
.left { background:url(http://img39.imageshack.us/img39/7049/rights.gif) repeat-y left top; padding:0 0 0 7px; }

.top { background:url(http://img339.imageshack.us/img339/908/topx.gif) repeat-x left top; }
.bottom { background:url(http://img11.imageshack.us/img11/5066/bottomyx.gif) repeat-x left bottom; }

.left_top { background:url(http://img11.imageshack.us/img11/5342/lefttopy.gif) no-repeat left top; }

.left_bottom { background:url(http://img11.imageshack.us/img11/4638/leftbottome.gif) no-repeat left bottom; }

.right_top { background:url(http://img710.imageshack.us/img710/2826/righttope.gif) no-repeat right top; }
.right_bottom { background:url(http://img218.imageshack.us/img218/6816/rightbottom.gif) no-repeat right bottom; }


C'est extensible et s'ajustera à toutes les images que tu voudras mettre dedans. Tu peux copier coller le code dans un nouveau document ( le html dans le body et le css dans un tag <style> dans le head ) et ça va fonctionner.
Modifié par Sorano (22 Jan 2010 - 18:26)
Bonjour,

Sorano, sans vouloir être méchant, cette solution est affreuse.
Si on est prête à utiliser un code HTML aussi lourd, je conseillerais plutôt un bon vieux tableau à 9 cellules plutôt que 9 DIV imbriquées. Le code HTML sera plus lisible avec un tableau et on risquera moins la catastrophe en cas de </div> en trop ou oublié.

On peut lire aussi: http://covertprestige.info/css/boites-fluides/

Dans le cas présent je vois deux solutions intéressantes:
- box-shadow en CSS 3;
- une solution avec deux blocs imbriqués et deux éléments vides à placer dans les coins (ou, de manière similaire, un tableau à quatre cellules).

La deuxième solution permet d'avoir l'effet d'ombrage dans Internet Explorer 6-8 également. On peut par exemple partir d'un code comme ceci:
<a href="..." class="vignette">
  <span class="img">
    <img alt="..." src="...">
  </span>
  <span class="deco1"></span>
  <span class="deco2"></span>
</a><!--.vignette-->
Sujet clos
Aller à