Comment obtenir une ombre sur les côtés gauche et droit uniquement
N'importe quel moyen d'obtenir une ombre sur les côtés gauche et droit (horizontaux?) Uniquement, sans piratage ni image. J'utilise:
box-shadow: 0 0 15px 5px rgba(31, 73, 125, 0.8);
Mais ça donne de l'ombre tout autour.
Je n'ai pas de frontières autour des éléments.
NOTE: Je suggère de vérifier @ la réponse de Hamish ci-dessous; cela n'implique pas le "masquage" imparfait dans la solution décrite ici.
Vous pouvez vous en approcher avec plusieurs ombres de boîte; un pour chaque côté
box-shadow: 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 8px -4px rgba(31, 73, 125, 0.8);
Modifier
Ajoutez 2 autres ombres pour le haut et le bas en avant pour masquer le fond qui traverse.
box-shadow: 0 9px 0px 0px white, 0 -9px 0px 0px white, 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 15px -4px rgba(31, 73, 125, 0.8);
Je sais que c'est un ajout tardif, mais je n'étais pas satisfait du haut et du bas arrondi de l'ombre présente dans la solution de Deefour, alors j'ai créé le mien.
Encart box-shadow; crée une belle ombre uniforme avec le haut et le bas coupés:
box-shadow: -15px 0 15px -15px inset;
Pour utiliser cet effet sur les côtés de votre élément, créez deux pseudo-éléments :before et :after absolument placés sur les côtés de l'élément d'origine.
div {
position: relative;
}
div:before {
box-shadow: -15px 0 15px -15px inset;
content: " ";
height: 100%;
left: -15px;
position: absolute;
top: 0;
width: 15px;
}
etc...
Essayez ceci, ça marche pour moi:
box-shadow: -5px 0 5px -5px #333, 5px 0 5px -5px #333;
Approche classique: Négative propagation
CSS box-shadow utilise 4 paramètres: h-shadow, v-shadow, flou, diffusion:
box-shadow: 10px 0 8px -8px black;
La v-shadow (ombre virtuelle) est définie sur 0.
Le paramètre blur ajoute l'effet de dégradé, mais ajoute également une petite ombre sur les bordures verticales (celle dont nous voulons nous débarrasser).
Negative spread réduit l'ombre sur toutes les bordures: vous pouvez jouer avec elle en essayant de supprimer cette petite ombre verticale sans trop toucher à celle des côtés (c'est plus facile pour les petites ombres de 5 à 10 pixels .)
Voici un exemple de fiddle .
Deuxième approche: div absolu sur le côté
Ajoutez une div vide dans votre élément et mettez-la en forme avec un positionnement absolu afin qu'elle n'affecte pas le contenu de l'élément.
Ici le fiddle avec un exemple d’ombre gauche.
<div id="container">
<div class="shadow"></div>
</div>
.shadow{
position:absolute;
height: 100%;
width: 4px;
left:0px;
top:0px;
box-shadow: -4px 0 3px black;
}
Troisièmement: masquer l'ombre
Si vous avez un arrière-plan fixe, vous pouvez masquer l'effet d'ombre latérale avec deux ombres de masquage ayant la même couleur d'arrière-plan et le même flou = 0, par exemple:
box-shadow:
0 -6px white, // Top Masking Shadow
0 6px white, // Bottom Masking Shadow
7px 0 4px -3px black, // Left-shadow
-7px 0 4px -3px black; // Right-shadow
J'ai ajouté à nouveau une étendue négative (-3px) à l'ombre noire, pour qu'elle ne s'étende pas au-delà des coins.
Ici le violon .
Cela fonctionne très bien pour tous les navigateurs:
-webkit-box-shadow: -7px 0px 10px 0px #000, 7px 0px 10px 0px #000;
-moz-box-shadow: -7px 0px 10px 0px #000, 7px 0px 10px 0px #000;
box-shadow: -7px 0px 10px 0px #000, 7px 0px 10px 0px #000;
Une autre méthode consiste à: overflow-y:hidden sur le parent avec un remplissage.
#wrap {
overflow-y: hidden;
padding: 0 10px;
}
#wrap > div {
width: 100px;
height: 100px;
box-shadow: 0 0 20px -5px red;
}
Vous devez utiliser plusieurs box-shadow;. La propriété insérée le fait paraître beau et à l'intérieur
div {
box-shadow: inset 0 12px 15px -4px rgba(31, 73, 125, 0.8), inset 0 -12px 8px -4px rgba(31, 73, 125, 0.8);
width: 100px;
height: 100px;
margin: 50px;
background: white;
}
Une autre idée pourrait être de créer un pseudo-élément flou sombre avec éventuellement une transparence pour imiter l’ombre. Faites-le avec un peu moins de hauteur et plus de largeur, par exemple.
Dans certaines situations, vous pouvez masquer l'ombre par un autre conteneur. Par exemple, s'il existe une DIV au-dessus et en dessous de la DIV avec l'ombre, vous pouvez utiliser position: relative; z-index: 1; sur les DIV environnantes.
JOLI INSET SHADOW À GAUCHE ET À DROITE POUR DIVS, IMAGES OR
Pour une belle ombre incrustée dans les côtés droit et gauche des images ou de tout autre contenu, utilisez-la de cette manière.
*** L'indice z: -1 est une bonne astuce pour afficher des images ou des objets intérieurs avec des incrustations
<html>
<div class="shadowcontainer">
<img src="https://www.google.es/images/srpr/logo11w.png" class="innercontent" style="with:100%"/>
</div>
<style>
.shadowcontainer{
display:inline-flex;
box-shadow: inset -40px 0px 30px -30px rgba(0,0,0,0.9),inset 40px 0px 30px -30px rgba(0,0,0,0.9);
}
.innercontent{
z-index:-1
}
</style>
</html>
Pour l'horizontale uniquement, vous pouvez tromper l'ombre de la boîte en utilisant un débordement sur son div parent:
<div class="parent">
<div class="box-shadow">content</div>
</div>
.parent{
overflow:hidden;
}
.box-shadow{
box-shadow: box-shadow: 0 5px 5px 0 #000;
}
Vous pouvez utiliser 1 div à l'intérieur pour "effacer" l'ombre:
.yourdiv{
position:relative;
width:400px;
height:400px;
left:10px;
top:40px;
background-color:white;
box-shadow: 0px 0px 1px 0.5px #5F5F5F;
}
.erase{
position:absolute;
width:100%;
top:50%;
height:105%;
transform:translate(0%,-50%);
background-color:white;
}
Vous pouvez jouer avec "height:%;" et "width:%;" pour effacer quelle ombre vous voulez.
box-shadow: box-shadow: 0 5px 5px 0 #000;
Cela fonctionne de mon côté. J'espère que ça vous aide.