Comment créer une ombre portée insérée d'un seul côté ?

Question

Est-il possible de faire en sorte que l'ombre de la boîte ne soit insérée que d'un seul côté d'une division ? encart box-shadow ici, et non le box-shadow extérieur normal.

Par exemple, dans le JSFiddle suivant, vous verrez que l'ombre en creux apparaît sur les 4 côtés, à des degrés divers.

Comment faire pour qu'il n'apparaisse qu'en haut de la page ? Ou tout au plus SEULEMENT en haut et en bas ?

JSFiddle : http://jsfiddle.net/ahmadka/KFrun/

.box {
  -webkit-box-shadow: inset 0px 5px 10px 1px #000000;
  box-shadow: inset 0px 5px 10px 1px #000000;
}

.text {
  padding: 20px;
}

<div class="box">
  <div class="text">
    Lorem ipsum ....
  </div>
</div>

Answer 1

C'est ce que vous recherchez. Il y a des exemples pour chaque côté que vous voulez avec une ombre.

.top-box
{
    box-shadow: inset 0 7px 9px -7px rgba(0,0,0,0.4);
}
.left-box
{
    box-shadow: inset 7px 0 9px -7px rgba(0,0,0,0.4);
}
.right-box
{
    box-shadow: inset -7px 0 9px -7px rgba(0,0,0,0.4);
}
.bottom-box
{
    box-shadow: inset 0 -7px 9px -7px rgba(0,0,0,0.4);
}

Voir l'extrait pour plus d'exemples :

body {
    background-color:#0074D9;
}
div {
    background-color:#ffffff;
    padding:20px;
    margin-top:10px;
}
.top-box {
    box-shadow: inset 0 7px 9px -7px rgba(0,0,0,0.7);
}
.left-box {
    box-shadow: inset 7px 0 9px -7px rgba(0,0,0,0.7);
}
.right-box {
    box-shadow: inset -7px 0 9px -7px rgba(0,0,0,0.7);
}
.bottom-box {
    box-shadow: inset 0 -7px 9px -7px rgba(0,0,0,0.7);
}
.top-gradient-box {
    background: linear-gradient(to bottom, #999 0, #ffffff 7px, #ffffff 100%);
}
.left-gradient-box {
    background: linear-gradient(to right, #999 0, #ffffff 7px, #ffffff 100%);
}
.right-gradient-box {
    background: linear-gradient(to left, #999 0, #ffffff 7px, #ffffff 100%);
}
.bottom-gradient-box {
    background: linear-gradient(to top, #999 0, #ffffff 7px, #ffffff 100%);
}

<div class="top-box">
        This area has a top shadow using box-shadow
</div>

<div class="left-box">
        This area has a left shadow using box-shadow
</div>

<div class="right-box">
        This area has a right shadow using box-shadow
</div>

<div class="bottom-box">
        This area has a bottom shadow using box-shadow
</div>

<div class="top-gradient-box">
        This area has a top shadow using gradients
</div>
<div class="left-gradient-box">
        This area has a left shadow using gradients
</div>
<div class="right-gradient-box">
        This area has a right shadow using gradients
</div>
<div class="bottom-gradient-box">
        This area has a bottom shadow using gradients
</div>

Answer 2

L'astuce est une seconde .box-inner à l'intérieur, dont la largeur est supérieure à celle de l'original. .box y el box-shadow est appliqué à cela.

Ensuite, j'ai ajouté plus de rembourrage à la .text pour compenser la largeur supplémentaire.

Voici à quoi ressemble la logique :

Et voici comment on procède en CSS :

Utiliser la largeur maximale pour .inner-box pour ne pas causer .box pour s'élargir, et overflow pour s'assurer que le reste est coupé :

.box {
    max-width: 100% !important;
    overflow: hidden;
}

110% est plus large que le parent qui est 100% dans le contexte de l'enfant (devrait être le même lorsque le parent .box a une largeur fixe, par exemple). Les marges négatives compensent la largeur et font que l'élément est centré (au lieu de ne cacher que la partie droite) :

.box-inner {
    width: 110%;
    margin-left:-5%;
    margin-right: -5%;
    -webkit-box-shadow: inset 0px 5px 10px 1px #000000;
    box-shadow: inset 0px 5px 10px 1px #000000;
}

Et ajoutez un peu de rembourrage sur l'axe X pour compenser la largeur de l'axe. .inner-box :

.text {
    padding: 20px 40px;
}

Voici un violon qui fonctionne.

Si vous inspectez le violon, vous verrez :

Answer 3

Avec un peu de retard, mais une réponse en double qui ne nécessite pas de modifier le remplissage ou d'ajouter des divs supplémentaires peut être trouvée ici : Un problème avec le box-shadow Inset en bas seulement . Il est dit : "Utilisez une valeur négative pour la quatrième longueur qui définit la distance d'écartement. Ceci est souvent négligé, mais est supporté par tous les principaux navigateurs".

De la part de la personne qui répond violon :

box-shadow: inset 0 -10px 10px -10px #000000;

Answer 4

Ceci s'en rapproche un peu.

.box
{
    -webkit-box-shadow: inset -1px 10px 5px -3px #000000;
    box-shadow: inset -1px 10px 5px -3px #000000;
}

Answer 5

Ce n'est peut-être pas exactement ce que vous recherchez, mais vous pouvez créer un effet très similaire en utilisant l'option rgba en combinaison avec linear-gradient :

  background: linear-gradient(rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 30%);

Cela crée un dégradé linéaire à partir du noir avec une opacité de 50 % ( rgba(0,0,0,.5) ) à transparent ( rgba(0,0,0,0) ) qui commence à être transparente de manière compétente à 30 % du sommet. Vous pouvez jouer avec ces valeurs pour créer l'effet que vous souhaitez. Vous pouvez l'avoir sur un autre côté en ajoutant une valeur deg ( linear-gradient(90deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 30%) ) ou en changeant les couleurs. Si vous voulez des ombres vraiment complexes, comme des angles différents sur des côtés différents, vous pouvez même commencer à superposer des couches. linear-gradient .

Voici un extrait pour le voir en action :

.box {
  background: linear-gradient(rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 30%);
}

.text {
  padding: 20px;
}

<div class="box">
  <div class="text">
    Lorem ipsum ....
  </div>
</div>