css - quitar - sombra png illustrator

¿Aplicar sombra paralela solo al borde superior?

Question

¿Cómo se aplica una sombra paralela a un borde de borde específico?

Por ejemplo, tengo el siguiente código:

header nav {
    border-top: 1px solid #202020;
    margin-top: 25px;
    width: 158px;
    padding-top:25px;
}

Quiero una sombra (1px 1px 1px #cdcdcd) aplicada solo al borde superior.

¿Cuál es la mejor manera de lograr esto?

EDITAR

Esto es esencialmente lo que estoy buscando

div {
    border-top: 1px solid #202020;
    margin-top: 25px;
    margin-left:25px;
    width: 158px;
    padding-top:25px;
    -webkit-box-shadow: 0px 1px 1px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    0px 1px 1px rgba(50, 50, 50, 0.75);
    box-shadow:         0px 1px 1px rgba(50, 50, 50, 0.75);
}

Sin embargo, la sombra parece ser impactada por el relleno. ¿Hay alguna forma de unir la sombra al borde solo sin ajustar el relleno?

Answer 1

¿Algo como esto?

div {
  border: 1px solid #202020;
  margin-top: 25px;
  margin-left: 25px;
  width: 158px;
  height: 158px;
  padding-top: 25px;
  -webkit-box-shadow: 0px -4px 3px rgba(50, 50, 50, 0.75);
  -moz-box-shadow: 0px -4px 3px rgba(50, 50, 50, 0.75);
  box-shadow: 0px -4px 3px rgba(50, 50, 50, 0.75);
}

<div></div>

Answer 2

En caso de que quiera aplicar la sombra al interior del elemento ( inset ) pero solo quiera que aparezca en un solo lado, puede definir un valor negativo para el parámetro "propagación" (quinto parámetro en el segundo ejemplo).

Para eliminarlo completamente, haga que tenga el mismo tamaño que las sombras borrosas (4º parámetro en el segundo ejemplo) pero como un valor negativo.

También recuerde agregar el desplazamiento a la posición y (tercer parámetro en el segundo ejemplo) de modo que lo siguiente:

box-shadow:         inset 0px 4px 3px rgba(50, 50, 50, 0.75);

se convierte en:

box-shadow:         inset 0px 7px 3px -3px rgba(50, 50, 50, 0.75);

Verifique este fiddle actualizado: http://jsfiddle.net/FrEnY/1282/ y más sobre los parámetros de box-shadow aquí: http://www.w3schools.com/cssref/css3_pr_box-shadow.asp

Answer 3

Encuentro que el uso de estas herramientas interactivas ayuda a visualizar lo que sucede y lo que es posible

http://css3gen.com/box-shadow/

http://www.cssmatic.com/box-shadow

http://css3generator.com/

Editar: Echa un vistazo a las otras herramientas para experimentar con los otros generadores y combinaciones. A veces tengo que recordarme que solo porque puedas, no significa que debas, ¡es fácil dejarse llevar!

Answer 4

La respuesta simple es que no puedes. box-shadow solo se aplica a todo el elemento. Podría usar un enfoque diferente y usar :: antes en CSS para insertar un elemento de 1 píxel en el encabezado de navegación y establecer la sombra de cuadro en su lugar.

Answer 5

Múltiples sombras de caja lo hicieron por mí.

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/

Answer 6

.item .content{
    width: 94.1%;
    background: #2d2d2d;
    padding: 3%;
    border-top: solid 1px #000;
    position: relative;
}
.item .content:before{
      content: "";
      display: block;
      position: absolute;
      top: 0px;
      left: 0;
      width: 100%;
      height: 1px;
      -webkit-box-shadow: 0px 1px 13px rgba(255,255,255,1);
      -moz-box-shadow: 0px 1px 13px rgba(255,255,255,1);
      box-shadow: 0px 1px 13px rgba(255,255,255,1);
      z-index: 100;
}

Soy como usar algo así para eso.