[RESOLU] Ombres de chaque côté du contenu central (container)

[facedeharicot]

Bonjour,

 

Je reviens vers vous car je cherche à positionner une ombre de chaque côté de ma class container (le contenu central).

 

Une image sera peut-être plus parlante :

 

Étant sous PS1.6, je cherche une solution responsive... J'ai trouvé ce topic qui date de 4 ans : http://www.prestashop.com/forums/topic/51070-ajouter-une-ombre-au-body-en-du-background/?hl=%2Bombres&do=findComment&comment=334037, si la solution est envisageable, elle nécessite de faire plusieurs images de fond selon les résolutions pour que mon ombre s'affiche correctement.

 

J'ai déjà un pattern de fond sur mon body mais je peux appliquer mon ombre sur la classe "page".

 

Le box-shadow n'est pas applicable, on peut tricher pour n'avoir qu'une ombre à droite et à gauche mais celle-ci se voit quand même en top et bottom lorsqu'on l'applique sur la classe "container".

J'ai exclu la propriété border-image pour son manque de compatibilité.

Idéalement, il me faudrait border-right-image et border-left-image mais on va les oublier...

 

J'ai beau chercher, j'en reviens toujours à l'utilisation d'une image de fond de 1px répétée. Si vous avez une alternative, mes yeux sont grand ouverts.

Edited June 5, 2014 by facedeharicot (see edit history)

[MaximeCer]

Bonjour,

Essayez ceci : cela devrait marcher !

#page {

box-shadow: 8px 0 8px -10px #000000, -8px 0 8px -10px #000000;

}

En espérant avoir pu aider !

Edited June 5, 2014 by MaximeCer (see edit history)

[facedeharicot]

Merci pour votre réponse.

 

Il y a cependant un soucis : la div "page" fait 100% de de ma surface affichée donc en appliquant l'ombre sur celle-ci, je ne vois pas ladite ombre.

J'ai volontairement mis la taille de ma page à 80% de largeur pour illustrer en changeant la couleur de l'ombre en rouge.

En fixant la largeur de ma div "page" à 1170px et en la centrant sur mon viewport (propriétés de la classe "container" de bootstrap au final), ça serait jouable, mais ma barre "nav" ne ferait plus 100% de ma surface affiché mais 1170px par héritage, et comme je veux qu'elle fasse 100%...

Edited June 5, 2014 by facedeharicot (see edit history)

[MaximeCer]

Il y aurait-il une possibilité d'avoir un lien vers votre site ?
Ce serait beaucoup plus simple à visualiser !

[facedeharicot]

Pour clore ce topic : il fallait mettre le code donné par MaximeCer sur la class .container de mon design.

.container{ box-shadow: 8px 0 8px -10px #000000, -8px 0 8px -10px #000000; }

Merci beaucoup.