Effet d'ombre autour d'une page web [Résolu]

Bonjour à tous, j'ai créé une page web avec un body de 900px de large et une marge de 20px en haut et en bas, je souhaite créer un effet d'ombre autour de ma page, c'est à dire sur les cotés ainsi qu'en haut et en bas.
comment faire?

Thomas.
Modifié par cabhoffman (29 Apr 2009 - 19:44)

Salut,

Des images ?

salut je voudrais créer le meme effet que sur le forum alsa sur lequel nous somme, c'est à dire cet effet d'ombre autour de la partie blanche.

Bonjour,

Tout d'abords, je commencerais par faire une recherche sur le forum , avec comme mot clé "ombre" on obtient un bon nombre de résultats.

Salut,

Des images ?

Ok, je la refais.

Salut,

En utilisant des images ?

peu importe, avec ou sans images, je suis ouvert à toutes propositions.

cabhoffman a écrit :
peu importe, avec ou sans images, je suis ouvert à toutes propositions.

Dans ce cas, merci de faire une recherche sur le forum, tu y trouvera des informations et mes des portions de code. Tu pourrais également regarder du côté de la section apprendre où tu pourrais trouver cet article.


Je rappelle, au cas où, que le but du forum est d'offrir une aide à ceux qui seraient bloquer, par d'offrir une solution sur-mesure prête à l'emploi. Donc montre nous que tu as au moins essayé de réfléchir au problème, que tu as essayé de coder quelquechose et nous t'aiderons à trouver ce qui ne fonctionne pas et comment le faire fonctionner.

cabhoffman a écrit :
peu importe, avec ou sans images, je suis ouvert à toutes propositions.

C'était une question rhétorique ...

j'ai bien réfléchi j'ai posé les choses et j'ai déjà trouvé une solution pour pouvoir donner cette effet sur les cotés avec une bande de 1 pixel répété sur l'axe y avec pour effet un dégradé du centre vers l'extérieur ce qui me donne donc sur les coté de ma pages cette effet d'ombre mais je ne parvient pas à trouver de solutions pour le faire également en haut et en bas, ma solution n'est pas adapté.

ceci dit je ne voudrais pas vous déranger un mercredi matin je vais tacher de me débrouiller merci quand même.

Ce n'est pas très difficile à faire... ni surtout à découvrir :

Dans les styles :

/* Pour les ombres latérales */
#page.full {
  background: #EFECE2 url(img/center-bg-full.png) center top repeat-y;
}

qui met donc cette image en fond, au centre, à partir du haut, et en la répétant verticalement : http://www.alsacreations.com/css/img/center-bg-full.png du div principal.

Pour l'ombre du bas, c'est carrément tout un div avec une image en fond qui prend toute la place :

#footer {
  clear: both;
  background: url(img/footer.jpg) center top no-repeat;
  /* D'autres déclarations */
}

Qui pointe vers cette image : http://www.alsacreations.com/css/img/footer.jpg

Voilà, en attendant l'implémentation par tous les navigateurs importants de la propriété CSS3 'box-shadow'...

N.B. : J'espère ne pas fâcher les designers de Alsacreations en aidant à dévoiler une partie de leurs secrets de fabrication... Ce n'était pas du tout mon intention.

@+

merci pour ta réponse Laruiss, je pense que je devrais m'en sortir avec ça.

Salut,

laruiss a écrit :
N.B. : J'espère ne pas fâcher les designers de Alsacreations en aidant à dévoiler une partie de leurs secrets de fabrication... Ce n'était pas du tout mon intention.

Ben comme tu as pu le remarquer c'est un peu le but d'Alsa d'aider dans l'apprentissage donc regarder le code va dans le bon sens.

Si tu espères qu'on te fasse tout à ta place c'est pas l'esprit de la maison...

Avant de poser une question, recherchez si le sujet n'a pas déjà été abordé !!

Salut Arthure69, si tu viens sur le forum pour faire des réflexions désobligeantes ou prendre les gens pour des imbéciles tu peux rester chez toi, surtout si c'est pour n'apporter aucune aide.

À voir aussi: box-shadow, installé en 2 minutes, candidat parfait pour l'amélioration progressive.