html: aplicar sombra de cuadro al borde en css

CorePress2024-01-24  8

Hice este diseño de botón en Figma y me gustaría aplicarlo en CSS.

Si miras de cerca puedes ver que apliqué un resaltado con una sombra blanca en el borde

Pero cuando lo hago con las siguientes líneas CSS solo tiene una sombra dentro y no en el borde como se muestra en esta imagen.

div {
  border-style: solid;
  border-width: 0.7em;
  border-color: var(--highlight);
  box-shadow: inset 0.2em 0.2em 0.4em rgba(255, 255, 255, 0.25), inset -2px -2px 4px rgba(0, 0, 0, 0.25);
  filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.25));
}
<div> Sign Up </div>

¿Cómo puedo aplicar las luces/sombras en el borde?

inset aplica la sombra dentro de un elemento en lugar de fuera

- tacoshy

27/03/2021 a las 11:45

Eso no me parece una sombra, parece un borde degradado

- Paulie_D

27 de marzo de 2021 a las 11:56



------------------------------------

He intentado crear un div que se parezca a tu diseño de Figma. Utilizo la combinación de sombra de cuadro normal (inicial) y sombra de cuadro insertada. El principio se usó para dar una sombra brillante y hacer que el div se vea más fuerte, y vi que la figura muestra la sombra interior más oscura para que el borde se vea un poco 3D..

NOTA: Utilizo border-style: ridge para que el borde se vea 3D como se muestra en Your Figma, puedes hacerlo plano usando border-style: solid [Captura adjunta a continuación

body{
  background-color: rgb(50, 53, 90);
}
div {
  width: 100px;
  margin: auto;
  color: white;
  padding-top: 4px;
  padding-bottom: 4px;
  border-radius: .6rem;
  text-align: center;
  border-style: ridge;
  border-width: 0.2em;
  border-color: rgb(251, 55, 102);
  box-shadow:  0em 0em 1.5px rgba(255, 255, 255, 0.25), inset 0px 0px 5px rgba(0, 0, 0, 0.25);
  filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.25));
}

Usando estilo de borde: cresta

body{
  background-color: rgb(50, 53, 90);
}
div {
  width: 100px;
  margin: auto;
  color: white;
  padding-top: 4px;
  padding-bottom: 4px;
  border-radius: .6rem;
  text-align: center;
  border-style: solid;
  border-width: 0.2em;
  border-color: rgb(251, 55, 102);
  box-shadow:  0em 0em 1.5px rgba(255, 255, 255, 0.25), inset 0px 0px 5px rgba(0, 0, 0, 0.25);
  filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.25));
}

Usando estilo de borde: sólido

Perdón si esto no es lo que quieres, espero que te guste mi respuesta

Respondido

27 de marzo de 2021 a las 12:44

Steffan Xavier

Steffan Xavier

21

2

2 insignias de bronce



------------------------------------

<style> 
#example3 {
  border: 10px solid red;
  border-radius: 5px
}
#bg{
background-color: #000;
color: #fff;
padding: 20px;
text-align: center
}
</style>
<div id="bg">
<div id="example3">
  <p>A pink shadow.</p>
</div>
</div>



------------------------------------

Imagen que muestra el efecto de sombra del cuadro> sombra de cuadro: 0 0 25px color de elección;

Esto creará una sombra tenue alrededor de la imagen o bloque. Asegúrate de que el color coincida con el color de fondo.

2

Si bien este enlace puede responder la pregunta, es mejor incluirloIncluya las partes esenciales de la respuesta aquí y proporcione el enlace como referencia. Las respuestas de solo enlace pueden dejar de ser válidas si la página enlazada cambia. - De la reseña

- Opción

14 de octubre de 2021 a las 13:11

@Opción el "enlace" es una imagen.

Espectrico

14/10/2021 a las 19:30

Su guía para un futuro mejor - libreflare
Su guía para un futuro mejor - libreflare