[HTML] ombres sur les photos

Version imprimable

07/11/2007, 23h52
boolat

[HTML] ombres sur les photos

Bonjour,

je chercher le script le plus simple possible pour faire des ombres sur plusieurs page html que j'ai !

c'est a dire sur c'est photos : http://users.skynet.be/fb530984/airbrush.html

et des autres pages que j'ai encore ....

merci
08/11/2007, 11h11
SpaceFrog

perso je verrais bien un truc du genre avoir une image gif sur le serveur
puis ajouter dynamiquemnt derrièree toutes les document.Images[i], cette image (en z-index inférieur et lègèrement décallé ...)
08/11/2007, 12h24
boolat

pour le faire ...... je suis très loin pour taper les codes !
donc je cherche un code déjà fait :oops:

Hello,

Voici un code tout fait.
Tu mets ceci dans ta CSS ou dans l'entete de ta page :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 .img-shadow { float: left; background: url(images/shadowalpha.png) no-repeat bottom right !important; background: url(images/shadow.gif) no-repeat bottom right; margin: 10px 0 0 10px !important; margin: 10px 0 0 5px; } .img-shadow img { display: block; position: relative; background-color: #fff; border: 1px solid #a9a9a9; margin: -8px 6px 6px -8px !important; margin: -8px 6px 6px -4px; padding: 1px; }
Ensuite, quand tu dois afficher ton image tu fais ceci :
Code:

1 2 3 4 <div class="img-shadow"> <img alt="" src="monimage.jpg" border="0" hspace="5" vspace="5" width="150"> </div>
Il est donc très important que ton image soit dans une DIV !!!

Enfin il te faut les deux fichiers :
shadowalpha.png et shadow.gif que tu sauvegardes dans le répertoire images

Voici deux liens sur lesquels tu peux les chopper qui proviennent de mon site (tu fais clic droit enregistrer sous sur les liens).
shadowalpha.png

shadow.gif

Voila...
Cependant ce post aurais eu sa place dans la partie CSS du forum

@+
cadou
PS : N'oublie pas de nous dire si cela a fonctionné et de mettre le tag RESOLU si c'est le cas
PS2 : Chouette ton site, j'espere que tes problemes de santé sont réglés !:yaisse2:

08/11/2007, 12h52
SpaceFrog

heu si on va par là on peut faire beaucoup plus simple ...

Code:

<img style="border-bottom: solid 4px gray; border-right: solid 4px gray;" />

moins joli cependant ...

bon j'arrive pas !

j'ai mis le code <div class="img-shadow">
<img alt="" src="FYAKSION.jpg" border="0" hspace="10" vspace="10" width="400">
</div> dans la page fyaksion.html

le code css dans la page default.css comme ceci :

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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
html {min-height: 100%;}
 
 
 
* {
 
	margin: 0;
 
	padding: 0;
 
}
 
 
 
a {color: #048;}
 
a:hover {color: #06C;}
 
 
 
body {
 
	background: #E7E7E2 url('img/body.jpg') no-repeat center top;
 
	color: #444;
 
	font: normal 62.5% Tahoma,sans-serif;
 
	padding-top: 64px;
 
}
 
 
 
p,code,ul {padding-bottom: 1.2em;}
 
 
 
li {list-style: none;}
 
 
 
h1 {font: normal 1.8em Tahoma,sans-serif;}
 
h2 {font: bold 1.4em sans-serif;}
 
h3 {font: bold 1em Tahoma,sans-serif;}
 
 
 
form,input {margin: 0; padding: 0; display: inline;}
 
 
 
code {
 
	background: #FFF;
 
	border: 1px solid #EEE;
 
	border-left: 6px solid #CCC;
 
	color: #666;
 
	display: block;
 
	font: normal 1em Tahoma,sans-serif;
 
	line-height: 1.6em;
 
	margin-bottom: 12px;
 
	padding: 8px 10px;
 
	white-space: pre;
 
}
 
 
 
blockquote {
 
	background: url(img/quote.gif) no-repeat;
 
	display: block;
 
	font-weight: bold;
 
	padding-left: 28px;
 
}
 
 
 
h1,h2,h3 {padding-top: 6px; color: #553; margin-bottom: 4px;}
 
 
 
/* misc */
 
.clearer {clear: both; font-size: 0;}
 
.left {float: left;}
 
.right {float: right;}
 
 
 
/* structure */
 
.inner-container {
 
	border: 2px solid #D7D7D2;
 
	background: #FFF;
 
	font-size: 1.2em;
 
	margin: 0 auto;
 
	padding: 10px;
 
	width: 780px;
 
}
 
 
 
.outer-container {
 
	background: url('img/container.jpg') no-repeat center bottom;
 
	padding-bottom: 64px;
 
}
 
 
 
/* headere & title */
 
.header {
 
	background: #222 url('img/header.jpg') no-repeat;
 
	height: 160px;
 
	margin-bottom: 5px;
 
	text-align: center;
 
}
 
.header .title {
 
	color: #FFF;
 
	padding-top: 50px;
 
}
 
.header .title .sitename a {
 
	border-bottom: 1px dashed #657382;
 
	color: #FFF;
 
	font: normal 3em sans-serif;
 
	padding-bottom: 2px;
 
	text-decoration: none;
 
}
 
.header .title a:hover {border-color: #F60;}
 
.header .title .slogan {
 
	font: normal 1.1em Verdana,sans-serif;
 
	padding-top: 6px;
 
}
 
 
 
/* path */
 
.path {
 
	background: #949490;
 
	color: #FFF;
 
	font: normal 1.1em Verdana,sans-serif;
 
	padding: 8px 12px;
 
}
 
.path a {
 
	color: #FAFAFA;
 
	text-decoration: none;
 
}
 
.path a:hover {
 
	color: #FFE;
 
	text-decoration: underline;
 
}
 
 
 
/* main */
 
.main {
 
	background: url(img/main.gif) repeat-y;
 
	border-top: 4px solid #FFF;
 
	padding: 8px 12px 0 0;
 
}
 
 
 
/* content */
 
.content {
 
	float: right;
 
	width: 538px;
 
}
 
.content .descr {
 
	color: #664;
 
	font-size: 0.9em;
 
	margin-bottom: 6px;
 
}
 
.content li {
 
	list-style: url(img/li.gif);
 
	margin-left: 18px;
 
}
 
.content p {font-family: "Lucida Sans Unicode",sans-serif;}
 
 
 
/* navigation */
 
.navigation {
 
	float: left;
 
	width: 210px;
 
}
 
.navigation h2 {
 
	color: #5A5A43;
 
	font: bold 1.1em Tahoma,sans-serif;
 
	line-height: 30px;
 
	margin: 0;
 
	padding-left: 12px;
 
}
 
.navigation ul {
 
	padding: 0;
 
	border-top: 1px solid #EAEADA;
 
}
 
.navigation li {border-bottom: 1px solid #EAEADA;}
 
.navigation li a {
 
	font-size: 1.1em;
 
	color: #554;
 
	display: block;
 
	padding: 8px 0 8px 5%;
 
	text-decoration: none;
 
	width: 95%;
 
}
 
.navigation li a:hover {
 
	background: #F0F0EB;
 
	color: #654;	
 
}
 
 
 
/* footer */
 
.footer {
 
	background: #949490;
 
	color: #F7F7F2;
 
	font: bold 1em sans-serif;
 
	margin-top: 5px;
 
	padding: 10px 12px;
 
}
 
.footer a {
 
	color: #F7F7F2;
 
	text-decoration: none;
 
}
 
.footer a:hover {color: #FFC;}
 
.img-shadow {
	float: left;	
	background: url(images/shadowalpha.png) no-repeat bottom right !important;
	background: url(images/shadow.gif) no-repeat bottom right;
	margin: 10px 0 0 10px !important;
	margin: 10px 0 0 5px;
}
 
.img-shadow img {
	display: block;
	position: relative;
	background-color: #fff;
	border: 1px solid #a9a9a9;
	margin: -8px 6px 6px -8px !important;
	margin: -8px 6px 6px -4px;
	padding: 1px;
 
}

les deux image dedans :
http://users.skynet.be/fb530984/images/shadow.gif
http://users.skynet.be/fb530984/images/shadowalpha.png

puis résultat rien ? http://users.skynet.be/fb530984/fyaksion.html

hello,

je viens de regarder le fichier css qui est en ligne :
http://users.skynet.be/fb530984/default.css

Dedans je n'ai pas trouvé cela :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
.img-shadow {
	float: left;	
	background: url(images/shadowalpha.png) no-repeat bottom right !important;
	background: url(images/shadow.gif) no-repeat bottom right;
	margin: 10px 0 0 10px !important;
	margin: 10px 0 0 5px;
}
 
.img-shadow img {
	display: block;
	position: relative;
	background-color: #fff;
	border: 1px solid #a9a9a9;
	margin: -8px 6px 6px -8px !important;
	margin: -8px 6px 6px -4px;
	padding: 1px;
 
}

@+
cadou

09/11/2007, 11h02
blueice

Balise head en trop dans tes pages...

Pourquoi ne pas faire un script avec un logiciel d'image pour faire l'ombrage des images...
09/11/2007, 12h12
boolat

Citation:

Envoyé par blueice

Balise head en trop dans tes pages...

Pourquoi ne pas faire un script avec un logiciel d'image pour faire l'ombrage des images...

oui je croie que c'est le mieux !
je suis entrain de faire des test avec gimp, résultat :

http://img266.imageshack.us/img266/8...ttest01wt4.png

je cherche le moyen de traité 100 photo avec les mêmes ombre+signature une idée ?

merci
09/11/2007, 19h57
blueice

Quel système ?
Quel logiciel d'images as-tu ?
09/11/2007, 20h03
boolat

j'utilise Ubuntu 7.10 - Gutsy Gibbon avec GIMP 2.4.0 RC3

merci
12/11/2007, 15h38
cadoudal56

Hello,

Désolé d'insister mais comme je le disais plus haut, tu n'as pas mis la déclaration des class .img-shadow et .img-shadow img dans la page defaut.css, du coup c'est sur cela ne va pas marcher...

Tu peux afficher ta css ebn cliquant sur le lien ci dessous...
Donc met a jour ta css et tu verras que cela fonctionnera
http://users.skynet.be/fb530984/default.css

@+
cadou