[CSS] ombre portée sur image

Version imprimable

24/11/2005, 00h04
jexl

[CSS] ombre portée sur image

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 @+
24/11/2005, 00h12
francis m
suis fatigué, mais en vrac, tu t'inspires du code suivant qui crée une ombre des lettres :

html

Code:

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

css
Code:

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; }
24/11/2005, 06h48
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 ;)
24/11/2005, 09h20
denisC

Re: ombre portée sur image en CSS

Citation:

Envoyé par jexl

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...
24/11/2005, 13h59
Oluha

sinon y'a un filtre dropshadow mais IE only.
24/11/2005, 15h31
jexl

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

Au fait, voici ce que j'avais en HTML

Code:

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.
@+

24/11/2005, 17h22
denisC

Citation:

Envoyé par jexl

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

Je crois que c'est clair :fou:
24/11/2005, 17h36
Space Cowboy

Code:

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

Voci ce que ca donne en CSS / HTML :

Code:

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