CSS cuenta con una propiedad denominada como text-shadow que permite agregar una o varias sombras a un texto. En este artículo vamos a ver como funciona.
La sintaxis es la siguiente:
text-shadow: h-shadow | v-shadow | blur-radius | color |none | initial | inherit;
El primer parámetro define el desplazamiento horizontal de la sombra. Un valor negativo coloca la sombra hacia la izquierda.
El segundo parámentro define el desplazamiento vertical. Un valor negativo dispone la sombra en la parte superior del texto.
El tercer parámetro es el radio de desenfoque. Si no se especifica, su valor predeterminado es igual a cero. Mientras más alto sea el valor, mayor será la difuminación.
En el siguiente ejemplo aplicaremos una sombra de color rojo al texto:
<p class="red-text-shadow">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium emque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>La regla CSS:
.red-text-shadow {
font-size:25px;
text-shadow: 2px 2px #ff0000;
}Este es el resultado:
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium emque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
En otro ejemplo vamos a agregar una sombra con un efecto de desenfoque:
<p class="blue-text-shadow">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium emque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>La regla CSS:
.blue-text-shadow {
text-shadow: 2px 2px 8px #0000ff;
}Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium emque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
En este vamos a añadir sombras mútiples al texto:
<p class="red-blue-neon-text-shadow">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium emque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>La regla CSS:
.red-blue-neon-text-shadow {
text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF, 0 0 8px #00FF00;
}Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium emque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
Inicialmente me formé como Técnico en Anális y Diseño de sistemas. Luego ingresé a la escuela de negocios, hice una licenciatura en Administración y obtuve una especialización (Post-grado) en Alta Dirección Empresarial. Desde el año 2007 me dedico a la creación de sitios web, lo cual combino con la consultoría y la capacitación de tecnologías de Internet.
- TypeScript vs. JavaScript: ¿Cuál es mejor para tus proyectos? - octubre 31, 2024
- Optimización de imágenes: clave para un diseño web eficiente - septiembre 28, 2024
- Objetos en JavaScript - septiembre 21, 2024
