¡Descubre cómo lograr el efecto de letras neón!✨💖
¡Dale un toque vibrante a tus textos con este impresionante efecto de letras neón! 🌟✨ Sorprende a todos con este sencillo tutorial de CSS que te enseña cómo lograrlo. ¡No te lo pierdas!
<!DOCTYPE html>
<html>
<head>
<title>Neon Letter Effect</title>
<style>
h1 {
width: 50%;
margin: 20% auto;
}
.neon {
font-size: 78px;
color: white;
text-shadow: 0 0 5px hotpink,
0 0 10px hotpink,
0 0 20px hotpink,
0 0 30px hotpink,
0 0 40px hotpink,
0 0 50px hotpink,
0 0 60px hotpink;
}
/* Optional: Add black backgroundto enhance effect */
body {
background-color: black;
}
</style>
</head>
<body>
<h1 class="neon">Neon Text!!</h1>
</body>
</html>La clave de este efecto es el text-shadow en la linea 13.
- El primer valor especifica el desplazamiento horizontal de la sombra con respecto al texto. Un valor positivo desplaza la sombra hacia la derecha, mientras que un valor negativo la desplaza hacia la izquierda. Si se establece en
0, la sombra estará alineada verticalmente con el texto. - El segundo valor indica el desplazamiento vertical de la sombra. Un valor positivo desplaza la sombra hacia abajo, mientras que un valor negativo la desplaza hacia arriba. Si se establece en
0, la sombra estará alineada horizontalmente con el texto. - El tercer valor especifica el desenfoque o la difuminación de la sombra. Cuanto mayor sea este valor, más difusa será la sombra. Un valor de
0significa que la sombra estará completamente nítida.
text-shadow: 0 0 5px hotpink,
0 0 10px hotpink,
0 0 20px hotpink,
0 0 30px hotpink,
0 0 40px hotpink,
0 0 50px hotpink,
0 0 60px hotpink;Por ejemplo, consideremos la siguiente declaración de text-shadow con tres valores:
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);- El primer valor,
2px, indica que la sombra se desplazará 2 píxeles hacia la derecha con respecto al texto. - El segundo valor,
2px, especifica que la sombra se desplazará 2 píxeles hacia abajo en relación al texto. - El tercer valor,
4px, indica que la sombra tendrá un desenfoque de 4 píxeles, lo que resultará en una apariencia más difusa.
Además, se ha utilizado rgba(0, 0, 0, 0.5) como color de la sombra. En este caso, se trata de un negro semitransparente, donde 0.5 indica una opacidad del 50%. Esto significa que la sombra será menos intensa y permitirá que se vea parte del fondo a través de ella.
En resumen, al utilizar tres valores en la propiedad text-shadow, puedes ajustar el desplazamiento horizontal, el desplazamiento vertical y el desenfoque de la sombra del texto para lograr diferentes efectos visuales.
