Bordes de sable de luz en CSS — Amit Merchant — Un blog sobre PHP, JavaScript y más

Bordes de sable de luz en CSS — Amit Merchant — Un blog sobre PHP, JavaScript y más

¿Alguna vez te has preguntado cómo crear un borde de sable de luz en CSS? Si no eres fanático de Star Wars, un sable de luz es una espada de energía ficticia que se encuentra en el universo de Star Wars.

Consiste en un mango de metal pulido que proyecta una hoja de plasma de unos 1,33 metros de largo. Esto es lo que parece.

Un personaje de Star Wars sostiene un sable de luz.

Entonces, ¿cómo podemos crear un borde de sable de luz en CSS? Resulta que es bastante fácil.

Solo tenemos que jugar con eso. border Y box-shadow propiedades. Tenga en cuenta que este efecto funciona mejor en un fondo oscuro.

Entonces, por ejemplo, si queremos crear un borde de sable de luz en un div elemento con clase lightsaberpodemos hacerlo así.

<div class="lightsaber">
    Lightsaber Borders
</div>

Aquí está el CSS.

body {
  --darkblue: #040a2c;
  --lightblue: #00f0ff;
  background-color: var(--darkblue);
}

.lightsaber {
  border: 3px solid var(--lightblue);
  box-shadow: 0 0 15px var(--lightblue),inset 0 0 15px var(--lightblue);
}

Como puede ver, el border La propiedad se utiliza para crear el borde del sable de luz que se puede considerar como una hoja de sable de luz. EL box-shadow La propiedad se utiliza para crear el efecto de brillo a su alrededor. Utiliza sombras internas y externas para crear el efecto.

Aquí hay un CodePen para verlo en acción.

Consulte Bordes de degradado de pluma en CSS por Amit Merchant (@amit_merchant) en CodePen.

Si quieres conocer otros artículos parecidos a Bordes de sable de luz en CSS — Amit Merchant — Un blog sobre PHP, JavaScript y más puedes visitar la categoría Código.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

Esta página web utiliza cookies para analizar de forma anónima y estadística el uso que haces de la web, mejorar los contenidos y tu experiencia de navegación. Para más información accede a la Política de Cookies . Ver mas