sombra - resplandor css

Degradado lineal de sombreado de caja CSS3?

Question

¿Hay alguna manera en CSS3 de crear un sombreado de cuadro de selección entre navegadores (es decir, Mozilla, Webkit y Opera) que pasará de negro en la parte superior a blanco en la parte inferior? La forma más cercana que he encontrado para hacer esto solo permite que el exterior de la sombra sea de un color, luego la transición a otro color en el interior, en esta página: http://www.css3.info/preview/box-shadow /

Answer 1

Desafortunadamente, esto no es posible. Sugiero simplemente usar un div con una imagen de fondo que cree en Photoshop o similar.

Answer 2

Intenta usar un elemento: before para establecer una ''sombra''.

  .classname {
    &:before {
      content: '''';
      position: absolute;
      display: none;
      top: -20px;
      left: -20px;
      right: -20px;
      bottom: -20px;
      z-index: -1;
      background: linear-gradient(to bottom, red, blue);


    }

    &:hover {
      &:before {
        display: inline-block;
      }
    }
  }

Este código anterior es un ejemplo de cómo configurar dicho efecto de desplazamiento.

Answer 3

Eche un vistazo a este video de Lea Verou . La sección a la que me he vinculado habla de algo muy similar, donde se usan degradados de imágenes de fondo para crear algo así como una sombra de caja. Si puedo encontrar un buen ejemplo de trabajo, publicaré una respuesta, pero esto debería darte un buen lugar para comenzar. También puede hacer algunas cosas realmente geniales, como un curl de sombra de caja con la :after pseudoclase para hacer aparecer una sombra.

Aquí hay algunos ejemplos simples en la parte superior e inferior de un recuadro, y subrayando algunos textos. Tendrás que jugar con eso (mucho, probablemente) para que parezca como quieras, pero CSS tiene algunas características realmente increíbles (y habrá más y más).

body {
  display: flex;
  height: 100vh;
  width: 100vw;
  padding: 0;
  margin: 0;
}

.container {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  
  background:
    radial-gradient(at 50% 0, black, transparent 70%),
    linear-gradient(0deg, black, transparent 50%) bottom;
  background-size: 100% 15px;
  background-repeat: no-repeat;
}

.underline {
    width: 6em;
    text-align:center;
    font-size:30px;
}

.underline:after {
    content: ''/00a0'';
    background-image:
      radial-gradient(at 50% 0, blue 0%, red 50%, transparent 75%);
    background-size: 100% 2px;
    background-repeat: no-repeat;
    float:left;
    width:100%;
}

<div class="container">
  <div class="underline">Hello, world!</div>
</div>