Discussion :

[jexl]

Bonjour @ tous,
je finalise une galerie photo, et je souhaiterais ajouter a mes photos lorsqu'elle s'affichent un effet d'ombre portée.
Je voulais éviter de faire ca en HTML, avec des tableaux et tout et tout.
Je penche plus pour une solution CSS.
auriez-vous une idée sur la manière de procéder ?

Mon choix est-il le bon ?

merci @ vous et @+

[francis m]

suis fatigué, mais en vrac, tu t'inspires du code suivant qui crée une ombre des lettres :

html

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<h1>texte avec contour<span class="ombre">texte avec contour</span></h1>

css

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
h1 {
position: relative;
top: 0px;
left: 0px;
color: green;
}
.ombre {
position: absolute;
top: 4px;
left: 4px;
color: red;
}

[tfe]

tu as de bonnes astuces ici:
http://www.alistapart.com/articles/onionskin/

avec un exemple ici http://www.alistapart.com/d/onionskin/gallery.html

rien à rajouter

[denisC]

Je penche plus pour une solution CSS.

Teste les différents border possibles. Par exemple border-style: inset ou outset doit donner à 95% ce que tu cherches à faire...

[Oluha]

sinon y'a un filtre dropshadow mais IE only.

[jexl]

Merci beaucoup pour vos conseils,
C'est exactement ce qu'il me fallait.
@+

[jexl]

Au fait, voici ce que j'avais en HTML

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="13" height="11"><img src="images/Coin_haut_gauche.gif" width="13" height="11" /></td>
    <td height="11" background="images/Bord_haut.gif"><img src="images/spacer.gif" width="1" height="1" /></td>
    <td width="14" height="11"><img src="images/Coin_haut_droite.gif" width="14" height="11" /></td>
  </tr>
  <tr>
    <td width="13" background="images/Bord_gauche.gif"><img src="images/spacer.gif" width="1" height="1" /></td>
    <td><img src="images/azur.gif" width="48" height="30" /></td>
    <td width="14" background="images/Bord_droit.gif"><img src="images/spacer.gif" width="1" height="1" /></td>
  </tr>
  <tr>
    <td width="13"><img src="images/Coin_bas_gauche.gif" width="13" height="14" /></td>
    <td height="14" background="images/Bord_bas.gif"><img src="images/spacer.gif" width="1" height="1" /></td>
    <td width="14" height="14"><img src="images/Coin_bas_droite.gif" width="14" height="14" /></td>
  </tr>
</table>

Je vais mettre des CSS la dedans, ce sera mieux.
@+

[denisC]

Je vais mettre des CSS la dedans, ce sera mieux.
@+

Je crois que c'est clair

[Space Cowboy]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

  filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=300);

IE seulement, applicable au texte et au div, mais par contre pour la div, c'est seulement sur un div accroché au curseur.
Source : http://www.dynamicdrive.com/dynamicindex5/dhtmltooltip.htm

[jexl]

Voci ce que ca donne en CSS / HTML :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<style type="text/css">
<!--
.galerie_haut_gauche {
	background-image: url(../images/galerie/Coin_haut_gauche.gif);
	background-repeat: no-repeat;
	height: 11px;
	width: 10px;
}
.galerie_bas_gauche {
	background-image: url(../images/galerie/Coin_bas_gauche.gif);
	background-repeat: no-repeat;
	height: 12px;
	width: 10px;
}
.galerie_haut_droite {
	background-image: url(../images/galerie/Coin_haut_droit.gif);
	background-repeat: no-repeat;
	height: 11px;
	width: 12px;
}
.galerie_bas_droite {
	background-image: url(../images/galerie/Coin_bas_droit.gif);
	background-repeat: no-repeat;
	height: 12px;
	width: 12px;
}
.galerie_bord_haut {
	height: 11px;
	background-image: url(../images/galerie/Bord_haut.gif);
	background-repeat: repeat;
}
.galerie_bord_gauche {
	width: 10px;
	background-image: url(../images/galerie/Bord_gauche.gif);
	background-repeat: repeat;
}
.galerie_bord_bas {
	height: 12px;
	background-image: url(../images/galerie/Bord_bas.gif);
	background-repeat: repeat;
}
.galerie_bord_droite {
	width: 12px;
	background-image: url(../images/galerie/Bord_droit.gif);
	background-repeat: repeat;
}
-->
</style>
 
<table border="0" cellspacing="0" cellpadding="0"> 
  <tr> 
    <td class="galerie_haut_gauche"></td> 
    <td class="galerie_bord_haut" ></td> 
    <td class="galerie_haut_droite"></td> 
  </tr> 
  <tr> 
    <td class="galerie_bord_gauche"></td> 
    <td>fffff</td> 
    <td class="galerie_bord_droite"></td> 
  </tr> 
  <tr> 
    <td class="galerie_bas_gauche" ></td> 
    <td class="galerie_bord_bas"></td> 
    <td class="galerie_bas_droite" ></td> 
  </tr> 
</table>

Qu'en pensez-vous ?

Merci, et @+, JexL