X Course Advisor FREE Course Advisor
(Close)
Watch Tutorials
macProVideo.com
Close

Acceso Premium gratis

Acceso a toda nuestra biblioteca de artículos Hub Premium, los archivos del proyecto y el primer 10% de cada uno-Video Tutorial de la Biblioteca Tutorial en línea .

Crea tu cuenta gratis!

Cómo crear sombras del texto en CSS3
Traducido por Google Translate

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:

Geoff Blake

Geoff Blake | Articles by this author

Geoff Blake is a book author, video presenter, designer, and visual artist. As an in demand live-on-stage software educator since 1997, Geoff has taught desktop publishing, web design and graphics courses all over North America and is regarded as an expert in Adobe's Creative Suite applications, as well as in HTML, CSS, WordPress, and related technologies. With his humorous, non-jargonny approach, Geoff produces highly regarded articles, video training and DVDs, and regularly contributes to top industry magazines and websites.

Comments

You must be logged in to post a comment.
Create an Account  Login Now

What is macProVideo.com?

macProVideo.com is an online education community featuring Tutorial-Videos & Training for popular Audio & Video Applications including Adobe CS, Logic Studio, Final Cut Studio, and more.
© 2018 macProVideo.com
a division of NonLinear Educating Inc.
Link