¿Puede CSS3 box-shadow: inset hacer solo uno o dos lados? como el borde superior?

80

Me pregunto sobre el soporte para sombras internas específicas de los lados en css3.

Sé que esto funciona muy bien en navegadores compatibles.

div { box-shadow:inset 0px 1px 5px black; }

Solo tengo curiosidad por saber si hay una manera de lograr algo como: 

div { box-shadow-top:inset 0px 1px 5px black; }
css ndmweb
fuente
Posible duplicado de Cómo obtener una sombra de cuadro solo en los lados izquierdo y derecho , que tiene respuestas y explicaciones más detalladas.
brichins

Respuestas:

147

Esto es lo que funcionó para mí:

box-shadow: inset 1px 4px 9px -6px;

Ejemplo: http://jsfiddle.net/23Egu/

nischtname
fuente
9
La solución más elegante hasta ahora.
enyo
¡Increíble! Siempre he luchado con esto, pero esta única línea trae el borde lateral más sexy de todos los tiempos. ¡Gracias hombre!
Sliq
12
Vale la pena señalar que puede cambiar eso a box-shadow: inset 1px -4px 9px -6px;una sombra inferior.
Justin Russell
7
Sombra del lado izquierdo: Sombra del lado box-shadow: inset 4px 1px 9px -6px; derecho:box-shadow: inset -4px 1px 9px -6px;
bryanbraun
hmm, entonces todo lo que estamos haciendo es usar un valor de propagación grande y luego negarlo usando un desenfoque negativo. Inteligente
Samiullah Khan
11

No creo que realmente lo necesite box-shadow-topporque si establece offsetxen 0 y offsetyen cualquier valor positivo, solo la sombra restante está en la parte superior.

Si desea tener una sombra en la parte superior y una sombra en la parte inferior, simplemente puede usar dos divs:

<div style="box-shadow:inset 0 1px 5px black;">
  <div style="box-shadow:inset 0 -1px 5px black;">
    some content
  </div>
</div>

si desea deshacerse de la sombra en los lados, use en rgbalugar de hexcolor y configure más grande offsety:

box-shadow:inset 0 5px 5px rgba(0,0,0,.5)

De esta manera, le da a la sombra más opacidad para que los lados permanezcan ocultos y con más compensación obtenga menos opacidad

ejemplo completo:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
            body {
                background: #1C1C1C;
            }
            div {
                margin: 50px auto;
                width: 200px;
                height: 200px;
                background: #fff;
                -webkit-border-radius: 20px;
                -khtml-border-radiust: 20px;
                -moz-border-radius: 20px;
                -o-border-radius: 20px;
                border-radius: 20px;
                box-shadow:inset 0px 5px 5px rgba(0,0,0,.5); 
            }
            div > div {
                background:none;
                box-shadow:inset 0px -5px 5px rgba(0,0,0,.5); 
            }
        </style>
    </head>
    <body>
        <div><div></div></div>
    </body>
</html>
seler
fuente
Y la sombra estará más extendida de lo que quisieras. Y los lados también se han movido. Definitivamente es un resultado diferente al box-shadow-topque daría. editar Pero así es como yo también lo hago normalmente =)
Rudie
@Rudie, si desea deshacerse de la sombra en los lados, use en rgbalugar de hexcolor y establezca más grande offsety: box-shadow: 0 5px 5px rgba (0,0,0, .5) de esta manera le da a la sombra más opacidad para que los lados permanezcan ocultos y con más compensación se obtiene menos opacidad
seler
3
Para su información, en lugar de tener dos div anidados para lograr sombras superior e inferior al mismo tiempo, puede hacerlo con un div usando esto:box-shadow:inset 0 1px 5px black, inset 0 -1px 5px black;
Jake Wilson
10

usando :beforey afterelementos con sombras regulares cortadas overflow:hiddenen el cuadro principal como en este ejemplo: http://dabblet.com/gist/2585782

CSS

/**
 * Top and Bottom inset shadow
 */


#element{
  background-color: #E3F2F7;
  height: 55px;
  position: relative; /* to position pseudo absolute*/
  overflow: hidden; /* to cut of overflow shadow*/
  margin-top: 200px;    
}

#element:before , #element:after{
  content: "\0020";
  display: block;
  position: absolute;
  width: 100%;
  height: 1px; /* when 0 no shadow is displayed*/
  box-shadow: #696c5c 0 0 8px 0;
}

#element:before { top: -1px} /* because of height: 1*/
#element:after { bottom: -1px}  /* because of height: 1*/

HTML

<div id="element"></div>
Jakob Cosoroaba
fuente
Esta es la técnica que funcionó para mí. En mi caso, #element era desplazable, así que tuve que cambiar de posición a sticky para que funcionara.
Mihai Răducanu
5

Puede utilizar un degradado de fondo para solucionarlo en la mayoría de los casos:

Ejemplo de SCSS (con brújula):

@include background(linear-gradient(top, #666 1%, #999 3%, #ddd 6%, #f6f6f6 9%, #f6f6f6 92%, #ddd 94%, #999 97%, #666 99%) );
Omar Jalalzada
fuente
1
A veces necesitamos dar un paso atrás y pensar en lo que estamos tratando de lograr. Y esto es a menudo lo que buscamos con una sombra de caja interior de un solo lado. Brillante. ¡Votaría dos veces si pudiera!
random_user_name
Cuando vi este comentario por primera vez, pensé que parecía demasiado complicado para funcionar, pero funcionó perfectamente. ¡¡Gracias!!
Alex
4 
box-shadow: inset 5px 0 5px -5px rgba(0,0,0,0.5),inset -5px 0 5px -5px rgba(0,0,0,0.5);
-moz-box-shadow: inset 5px 0 5px -5px rgba(0,0,0,0.5),inset -5px 0 5px -5px rgba(0,0,0,0.5);
-webkit-box-shadow: inset 5px 0 5px -5px rgba(0,0,0,0.5),inset -5px 0 5px -5px rgba(0,0,0,0.5);
-o-box-shadow: inset 5px 0 5px -5px rgba(0,0,0,0.5),inset -5px 0 5px -5px rgba(0,0,0,0.5);

Esto funciona de maravilla :)

Aquí hay un codepen que lo ilustra: http://codepen.io/poopsplat/pen/cGBLy

poopsplat
fuente
3

Para la misma sombra pero solo en la parte superior:

box-shadow: inset 0px 6px 5px -5px black;

Para tener la sombra en una dirección, debe negar el parámetro "difuminar" con el parámetro "extender" y luego ajustar los parámetros "h-pos" y / o "v-pos" con este mismo valor. No funciona con borde opuesto o borde triple. Tienes que agregar una definición más.

Más ejemplos aquí: http://codepen.io/GBMan/pen/rVXgqP

GBMan
fuente
1

Yo solo tuve este problema. La solución que encontré fue con varias sombras de caja (una para cada lado en el que quieres tu sombra). Aquí está la definición:

box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit;

Así es como pensarlo:

  • primero, haga que la propagación sea 0 (esto deshabilitará el efecto en todos los lados)
  • el h-offset (si lo establece en positivo, se proyectará en el lado izquierdo, si lo establece en negativo, en el lado derecho)
  • el v-offset (si lo establece en positivo, se proyectará en el lado superior, si lo establece en negativo, en el lado inferior

Aquí puede ver mi estuche con sombra de caja en tres lados (izquierdo, superior, derecho y el inferior es del mismo color que el fondo para crear el efecto que quería: el lado izquierdo y el derecho van hasta el fondo ) https://codepen.io/cponofrei/pen/eMMyQX

Cristi Onofrei
fuente
0

Puede lograr una sombra interna de un solo lado configurando su div overflow:hiddeny agregando elementos de sombra a lo largo de los bordes.

Establezca una sombra interior en los bordes superior e inferior de una división:

HTML 

<div id="innerShadow">
    <div id="innerShadowTop">
        Content...
    <div id="innerShadowBottom">
</div>

CSS

#innerShadow
{
    position: relative;
    overflow: hidden;
}

#innerShadowTop
{
    width: 100%;
    height: 1px;
    margin: 0;
    padding: 0;
    position: absolute;
    top: -1px;
    -moz-box-shadow: 0px 1px 6px 1px rgba(0, 0, 0, 0.65);
    -webkit-box-shadow: 0px 1px 6px 1px rgba(0, 0, 0, 0.65);
    -o-box-shadow: 0px 1px 6px 1px rgba(0, 0, 0, 0.65);
    box-shadow: 0px 1px 6px 1px rgba(0, 0, 0, 0.65);
}

#bannerShadowBottom
{
    width: 100%;
    height: 1px;
    margin: 0;
    padding: 0;
    position: absolute;
    bottom: -1px;
    -moz-box-shadow: 0px -1px 6px 1px rgba(0, 0, 0, 0.65);
    -webkit-box-shadow: 0px -1px 6px 1px rgba(0, 0, 0, 0.65);
    -o-box-shadow: 0px -1px 6px 1px rgba(0, 0, 0, 0.65);
    box-shadow: 0px -1px 6px 1px rgba(0, 0, 0, 0.65);
}
Jason George
fuente
Muchos dirían que agregar un marcado adicional como este no es semántico y es una mala práctica. Esto podría lograrse usando insety siendo creativo usando los valores de box-shadow css. Recuerde que puede apilar sombras de caja en el mismo elemento. Entonces, uno podría usar algo como @Jakobud dijo en un comentario anterior: box-shadow:inset 0 1px 5px black, inset 0 -1px 5px black; Otra forma, que es solo un poco menos ofensiva que agregar marcas innecesarias, es usar :beforey :afterselectores. Pero, ¿por qué hacerlo si puede hacerlo seleccionando directamente y aplicando estilo al elemento original?
ORyan
0

box-shadowes para los cuatro lados. No puedes cambiar eso (¿todavía?). Los 4 tamaños en la box-shadowdefinición son OffsetX, offsetY, Blury Spread.

Rudie
fuente
1
Difundir y Desenfocar no son lo mismo. Hay valores separados para cada uno. Así que técnicamente no son 6. Inset/Outset, OffsetX, OffsetY, BlurRadius, SpreadRadiusy Color. Como han señalado otros, puede especificar un lado como estebox-shadow: inset 0 8px 6px -6px black;
ORyan
1
Cierto. Cambié la respuesta para reflejar los 4 tamaños .
Rudie
0

Varias sombras de caja me sirvieron.

box-shadow:
        inset 0 -8px 4px 4px rgb(255,255,255),
        inset 0 2px 4px 0px rgba(50, 50, 50, 0.75);

http://jsfiddle.net/kk66f/

Shaunw
fuente