Ombrer seulement 1 coté d'une div

[Tibimac]

Bonjour à tous,

Je commence en espérant que vous avez tous passé de bonnes fêtes lol.

Mon problème..

Je sais comment mettre une ombre sur une div ou une "section" ou autre (cf HTML5) mais en revanche je ne sais pas, et ne trouve pas, comment ombrer seulement 1 seul coté d'une div.

Si vous pouviez m'éclairez ca serait cool

Merci d'avance

[ornitho13]

Salut,

tu utilises la propriété CSS3 box-shadow?
Si oui, essaye ce code

Code css :

1
2
3
4
5
 
-moz-box-shadow: 10px 0px 5px #656565;
-webkit-box-shadow: 10px 0px 5px #656565;
-o-box-shadow: 10px 0px 5px #656565;
box-shadow: 10px 0px 5px #656565;

le 10px c'est pour le x (peut être négatif), donc si tu mets 0 pour le y, l'ombre apparaitera sur la droite de la div


voici d'autres exemples;
ombre à gauche:

Code css :

1
2
3
4
5
 
-moz-box-shadow: -10px 0px 5px #656565;
-webkit-box-shadow: -10px 0px 5px #656565;
-o-box-shadow: -10px 0px 5px #656565;
box-shadow: -10px 0px 5px #656565;

ombre en haut:

Code css :

1
2
3
4
5
 
-moz-box-shadow: 0px -10px 5px #656565;
-webkit-box-shadow: 0px -10px 5px #656565;
-o-box-shadow: 0px -10px 5px #656565;
box-shadow: 0px -10px 5px #656565;

ombre en bas:

Code css :

1
2
3
4
5
 
-moz-box-shadow: 0px 10px 5px #656565;
-webkit-box-shadow: 0px 10px 5px #656565;
-o-box-shadow: 0px 10px 5px #656565;
box-shadow: 0px 10px 5px #656565;

et ainsi de suite.

j'espère que cela répond à ta question.

[Tibimac]

Salut,

Désolé de répondre si longtemps après mais j'étais en famille (Eh ouai c'était Noël lol).

J'ai essayé ta solution sauf qu'en fait quand la "force" du dégradé est supérieur a son décalage alors l'ombre va dépasser même sur l'autre coté.
Ainsi même si j'indique que je veux l'ombre qu'en bas en mettant

Code :

-webkit-box-shadow: 0px 3px 15px #656565;

j'ai quand même un dépassement sur les côtés car la "force" du dégradé (15) est supérieur au décalage (3). :/

Et si certes mettre une valeur negative au y décalait l'ombre pour plus qu'elle dépasse du coté génant ca ne convenait pas dans ma "mise en place".

Du coup pour palier au problème simplement j'ai fait une div "bottom-shadow" spéciale pour faire l'ombre d'un seul tenant.

[e-fitz]

Bonjour

Tu devrais utiliser une image ayant de la transparence pour faire ton ombre au moins ton code sera compatible avec la plupart des navigateurs, car le html5 n'est pas compatible et n'est pas définit complétement (finis)

Bonne journée

[Tibimac]

Utiliser une image en png pour faire l'ombre, je l'ai fait un temps maintenant je préfère apprendre et avancer donc maintenant je ne fais plus les ombres qu'avec CSS3 qui n'a rien a voir avec HTML5. Si les navigateurs ne sont pas à jour c'est pas ma faute et c'est tant pis pour le mec qui utilise un navigateur qui est "a coté de la plaque".

[CCyrillus]

bonsoir,

peut-être tardif, mais la regle box-shadow peut recevoir 6 variables:

1) facultative :inset ou rien : pour une ombre interne ou externe

2) numerique positive ou négative . decalage horizontale


3) numerique positive ou négative . decalage verticale


4) numerique determine la taille de l'ombrage

5) numerique, positive ou negative facultatif (et implementé partout) reduit ou elargit la zone d'affichage de l'ombrage <-- Celle qui t'interesse

6) facultatif mais conseillé : determine la couleur de l'ombrage, par defaut c'est la valeur de color qui est appliquée.

Les ombrages peuvent etre multiple et produire des effets intéressant si tu as du talent coté graphisme (pas mon cas ).

ex: http://yidille.free.fr/plux/valign/?...aux-sans-image des boites revues avec ombrages et effets de fonds

http://yidille.free.fr/plux/valign/?46-ipod-nano-css dessiner un ipod avec les ombrages ou une télevision : http://yidille.free.fr/plux/valign/?...de-transitions

ces possibilités sont nouvelles et encore en evolution, (W3C et navigateurs) maintenant a savoir ce qui sera vraiment possible dans 1 an ou deux ... ?

cordialement,
GC

[telliak]

Envoyé par Tibimac

tant pis pour le mec qui utilise un navigateur qui est "a coté de la plaque".

Charmant accueil pour tes visiteurs; ceux-ci ne faisant pas nécessairement la course à la nouveauté, au bout du compte c'est toi qui est pénalisé s'ils s'en vont.

[Tibimac]

Envoyé par CCyrillus

bonsoir,

peut-être tardif, mais la regle box-shadow peut recevoir 6 variables:

1) facultative :inset ou rien : pour une ombre interne ou externe

2) numerique positive ou négative . decalage horizontale


3) numerique positive ou négative . decalage verticale


4) numerique determine la taille de l'ombrage

5) numerique, positive ou negative facultatif (et implementé partout) reduit ou elargit la zone d'affichage de l'ombrage <-- Celle qui t'interesse

6) facultatif mais conseillé : determine la couleur de l'ombrage, par defaut c'est la valeur de color qui est appliquée.

Les ombrages peuvent etre multiple et produire des effets intéressant si tu as du talent coté graphisme (pas mon cas ).

ex: http://yidille.free.fr/plux/valign/?...aux-sans-image des boites revues avec ombrages et effets de fonds

http://yidille.free.fr/plux/valign/?46-ipod-nano-css dessiner un ipod avec les ombrages ou une télevision : http://yidille.free.fr/plux/valign/?...de-transitions

ces possibilités sont nouvelles et encore en evolution, (W3C et navigateurs) maintenant a savoir ce qui sera vraiment possible dans 1 an ou deux ... ?

cordialement,
GC

Je vais tester ca et je te tient au courant du résultat
Merci.

[Tibimac]

Envoyé par telliak

Charmant accueil pour tes visiteurs; ceux-ci ne faisant pas nécessairement la course à la nouveauté, au bout du compte c'est toi qui est pénalisé s'ils s'en vont.

Je préfère qu'il en soit ainsi et pousser les gens à avancer sans forcément faire la "course à la nouveauté" plutot que de se faire *bip* a devoir maintenir unecompatibilité avec 3-4 versions de IE différentes, safari, opera, chrome et firefox etc..

Je ne cherche que la compatibilité avec les dernières version des navigateur modernes.

Et ds ce cas ci s'agissant d'une application web de gestion utilisé en interne ds mon asso pas de soucis de perte de visiteur.