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.
- Cascada CSS - agosto 24, 2023
- El objeto Math - agosto 23, 2023
- Diferencia entre null y undefined en JavaScript - agosto 16, 2023
