All Articles Web
Cómo crear sombras del texto en CSS3
Geoff Blake on Wed, March 30th | 0 comments
As I mentioned in my tutorial on creating rounded corners, CSS3 is offering up a lot of awesome new features, like multiple columns, gradients, and of course, border effects. In this tutorial, we'll t

Como ya he mencionado en mi tutorial sobre cómo crear esquinas redondeadas, CSS3 está ofreciendo un montón de increíbles nuevas características, como varias columnas, degradados, y por supuesto, los efectos de frontera. En este tutorial, vamos a echar un vistazo a otra novedad, la creación de sombras en el texto.

This CSS property is supported by the most recent versions of all popular browsers except Internet Explorer...

Paso 1

Para empezar con este efecto, encontrar o crear una regla CSS que desea aplicar la sombra de texto. Probablemente la mejor manera de hacer uso de esta sería la creación de una regla de clase específicamente para la aplicación de este efecto. Eso es lo que voy a hacer de todos modos. También he aplicado un poco de formato a mi texto con un elemento de párrafo redefinido.

Paso 2

A continuación, agregue el "text-shadow" propiedad de la regla. Hay cuatro valores que podemos aplicar a la "text-shadow" de propiedad. Primero, añade en un color. Se puede utilizar cualquier color que desea, aunque sombras suelen ser bastante oscuras. Si guarda el archivo y ver tu trabajo en tu navegador, verás que no pasa nada. Eso es porque tenemos que establecer algunas propiedades adicionales en primer lugar.

Paso 3

Directly after the color, let's set three numeric values. The first two values can be positive or negative. The last value must be positive.


Now what are these values for? Well, the first value is for the horizontal position of the drop shadow. A positive value will move the shadow to the right, and a negative value moves it to the left.

El segundo valor controla la posición vertical de la sombra. Un valor positivo aquí se mueve hacia abajo la sombra, mientras que un valor negativo se mueve hacia arriba.

El tercer valor controla la cantidad de desenfoque en la sombra. Utilice un valor más bajo de una sombra nítida, o un valor más alto de una sombra más difusa. Como puede ver, yo prefiero usar los valores bastante bajos.

Y eso es todo lo que hay para crear sombras de texto en CSS3! Continuar con su viaje de aprendizaje CSS revisando el tutorial a continuación:

Comments (0)

You must be logged in to comment. Login Now

Feedback
Course Advisor
Don't Know Where To Start?
Ask A Course Advisor
Ask Us!
Copy the link below and paste it into an email, forum, or Facebook to share this with your friends.
Make money when you share our links
Become a macProVideo.com Affiliate!
The current affiliate rate is: 50%
Classes Start Next Week!
Live 8-week Online Certification Classes for: