18041 sujets

Questions générales et questions de débutants

Ombres portées [RESOLU]

Bonjour,

Je cherche à créer un effet d'ombre portés sous le bandeau principalde mon site.
J'ai crée sur illustrator deux .gif de 5x2 px un dégradé vers la gauche et un autre vers la droite.
J'aimerai les placer dans deux DIV de part et d'autre de mon conteineur en repeat-y.
C'est la première idée que j'ai eu mais cela ne fonctionne pas.
Auriez-vous la solution pour créer cet effet ultra répendu sur la toile.

Merci
Modifié par ElFabio (20 Apr 2007 - 16:11)
Un simple effet "ombre portée" sur l'image avec Photoshop, enregistrement en .png ou .gif... et c'est tout... Smiley smile

Ou si tu veux te la jouer un peu plus "pro", avec plusieurs images, des div imbriquées et tout et tout regarde un peu ce tuto :

Cadre graphique en CSS
Modifié par BeliG (20 Apr 2007 - 11:21)
C'est autour d'une DIV #container que je veux créer ces ombres et pas autour d'une image.
Je te remercie pour le lien de ce tuto ou je vais surement trouver mon bonheur
As-tu un site qui réalise cette ombre portée à me montrer ? J'crois que tu te trompes un peu sur la méthode de réalisation de ces ombres...
C'est ce que je pensais... Un design comme celui de Css Zen Garden se réalise grâce à 3 images :

- Une fixe pour la partie haute du site,
- Une image qui se répète plusieurs fois verticalement,
- Une fixe pour le bas.

Code pour réaliser un design de ce genre :

HTML


<div id="global">

     <div id="haut">
     </div>

     <div id="contenu">
     </div>

     <div id="bas">
     </div>

</div>


CSS


body {
margin:0; }

#haut {
background:url("img/haut.png") no-repeat;
height:...px;
width:...px; }

#contenu {
background:url("img/fond.png") repeat-y;
width:...px; }

#bas {
background:url("img/bas.png") no-repeat;
height:...px;
width:...px; }

Attention, si tu utilises des .png pour tes images il faudra penser à :
- mettre en place un hack pour gérer la transparence sous IE <= 6,
- debugger les liens et les champs de formulaire qui seront inaccessibles.

Voilà Smiley smile
Modifié par BeliG (20 Apr 2007 - 14:22)
Du pain...beni mec,

Je comprends mieux pourquoi ça fonctionnait pas.
DOnc je centre #contenu en lui attribuant une largeur et des
margin left-right en auto.
je me crée une image de la même largeur avec un petit dégradé sur le coté et le tour est joué!!
Je suis ravi, je me la tente après le boulot

Thank You
Florent V,

Alors la je suis scié j'avais capté la possibilité de choper les image de Css Zen
Qui aurait grandement facilité ma compréhension

Merci à tous les deux
Si tout est bon met [RESOLU] a ton titre ^^

Mais si tu as encore une question --> n'hésite pas !
Sujet clos
Aller à