Comment obtenir box-shadow sur les côtés gauche et droit uniquement
Un moyen d'obtenir box-shadow à gauche et à droite (horizontal?) côtés seulement sans hacks ou des images. J'utilise:
box-shadow: 0 0 15px 5px rgba(31, 73, 125, 0.8);
, Mais il donne de l'ombre tout autour.
Je n'ai pas de frontières autour des éléments.
12 réponses
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 rapprocher avec plusieurs ombres de boîte; une 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
Ajouter 2 Plus boîte-ombres pour le haut et le bas vers le haut à l'avant pour masquer le qui saigne à travers.
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 arrondis à l'ombre présente dans la solution de Deefour donc créé le mien.
L'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 positionnés absolument 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, cela fonctionne pour moi:
box-shadow: -5px 0 5px -5px #333, 5px 0 5px -5px #333;
Approche Classique: Négatif propagation
CSS ombre utilise 4 paramètres: h-ombre, v-ombre, flou, propagation:
box-shadow: 10px 0 8px -8px black;
Le v-ombre (verical de l'ombre) est mis à 0.
Le flou paramètre ajoute l'effet de gradient, mais ajoute aussi un peu d'ombre sur les bordures verticales.
Négatif propagation réduit l'ombre sur toutes les frontières: vous pouvez jouer avec elle en essayant de supprimer le peu de ombre verticale sans affecter trop l'autre. (Il peut être simple pour les petites ombres, comme 5-10 px.)
Ici un violon exemple.
Deuxième approche: div absolu sur le côté
Ajoutez un div vide dans votre élément, et Stylez-le avec un positionnement absolu afin qu'il n'affecte pas le contenu de l'élément.
Ici la violon avec un exemple de gauche-ombre.
<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ème: masquage de 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 de l'arrière-plan et flou = 0, 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 un spread négatif (-3px) à l'ombre noire, de sorte qu'il ne s'étend pas au-delà des coins.
Ici la violon.
Cela fonctionne 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;
Vous devez utiliser les multiples box-shadow; . La propriété encart la rend belle 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 façon est avec: overflow-y:hidden sur le parent avec remplissage.
#wrap {
overflow-y: hidden;
padding: 0 10px;
}
#wrap > div {
width: 100px;
height: 100px;
box-shadow: 0 0 20px -5px red;
}
BELLE OMBRE EN MÉDAILLON SUR LES CÔTÉS GAUCHE ET DROIT POUR LES DIVS, LES IMAGES OU LE CONTENU INTÉRIEUR
Pour une belle ombre encart dans les côtés droit et gauche sur les images, ou tout autre contenu, utilisez-le de cette façon
* * * l'index z: -1 fait un bon tour lors de l'affichage d'images ou d'objets internes avec des encarts
<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>
Dans certaines situations, vous pouvez masquer l'ombre par un autre conteneur. Par exemple, s'il y a un DIV au-dessus et au-dessous du DIV avec l'ombre, vous pouvez utiliser position: relative; z-index: 1; sur les DIVs environnants.
Pour horizontal seulement, vous pouvez tromper la boîte-ombre en utilisant overflow 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;
}
Une autre idée pourrait être de créer un pseudo-élément flou sombre éventuellement avec de la transparence pour imiter l'ombre. Faites-le avec un peu moins de hauteur et plus de largeur i. g.
Vous pouvez utiliser 1 div à l'intérieur qu'à "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 l'ombre que vous voulez.