¿Qué es el text-Shadow?

La propiedad text-shadow agrega sombra al texto. Acepta una lista de sombras separadas por coma, para aplicarlas al texto y a la propiedad text-decorations del elemento. Cada sombra es especificada como un ófset del texto, junto con valores de color y radio de difuminación opcionales.

La propiedad tiene 4 valores que son los siguientes: - El desplazamiento horizontal de la sombra, un desplazamiento negativo pondrá la sombra a la izquierda. - El desplazamiento vertical, un valor negativo dispone la sombra en la parte superior del texto, uno positivo la sombra estará por debajo del texto.

Poner una sombra a un elemento de texto con CSS3 es tan simple como establecer la propiedad text-shadow, seguidamente estableceremos el desplazamiento horizontal (X-offset), el desplazamiento vertical (Y-offset), el desenfoque (blur) y el color (color). En el orden mencionado para que funcione correctamente.

La propiedad box-shadow

Se denominan sombras sobre cajas a las sombras en CSS que se pueden crear en una etiqueta o elemento HTML. Para ello, se utiliza la propiedad box-shadow , que funciona de forma muy similar a la que vimos en las sombras de texto, sólo que con algunos añadidos interesantes.

Una manera clásica de resaltar es aplicando la propiedad background-color, ya sea a un párrafo a una parte de él, por ejemplo a un <strong> si deseamos el texto en negrita o <span> si buscamos un contenedor de texto genérico al que le podremos aplicar estilos.

Hay más de 100 propiedades diferentes en CSS y cerca de un número infinito de diferentes valores. No todos los pares de propiedades y valores son permitidos cada propiedad define que valores son válidos.

La propiedad tiene 3 valores y un color, los valores son los siguientes: - El desplazamiento horizontal de la sombra, positivo significa que la sombra se encuentra a la derecha del objeto, un desplazamiento negativo pondrá la sombra a la izquierda.

Seleccione el texto o WordArt al que desee aplicar formato. En la pestaña Formato, en Estilosde texto, haga clic en Efectos, seleccione Sombra y,a continuación, haga clic en el estilo de sombra que desee.

Así, en el caso de la sombra aplicada a <div>, zonas o secciones del html utilizamos la propiedad box-shadow. En este ejemplo, el primer valor (6px), indica el número de píxeles que se desviará la sombra horizontalmente. El segundo valor (20px), especifica el número de píxeles que se moverá la sombra verticalmente.

Aplicar sombreado a palabras o párrafos

¿Qué es drop-shadow? Una función que nos permite agregar una sombra difuminada al contorno de un texto o imagen (mayormente se usa imágenes), sin embargo su uso o aplicación solamente será limitada por nuestra imaginación, necesidad puntual o de acuerdo a lo que dicte nuestro diseño.

La función drop-shadow

Crea una sombra idéntica utilizando la propiedad filter . Idem a la anterior, con un desplazamiento y además un desenfoque. Idem a la anterior, pero indicando un color específico.

Lightbox es un script muy popular del cual hemos comentado en Lightbox: imágenes Emergentes que permite mostrar imágenes y contenido en ventanas que se superponen sobre todo el web.

Las etiquetas <h1> y </h1> se utilizan para definir un texto como título, indicando que es una cabecera (la h viene de header, cabecera en inglés) que queremos destacar sobre el resto del texto. Junto a <h1> contamos con <h2>, <h3> y así hasta <h6> para definir diferentes títulos, de mayor a menor importancia.

Para poner el texto en negrita en HTML hay que usar la etiqueta <strong> o la etiqueta <b> (negrita). Los navegadores pondrán en negrita el texto al usar cualquiera de estas dos etiquetas. La etiqueta <strong> indica que el texto es de especial importancia o urgencia.

Etiquetas de formato de texto

Es por ello que hoy te mostraremos algunas de las etiquetas mas utilizadas en CSS.

Tipos de CSS

Existen tres tipos o formas de vincular el CSS a tu sitio web (HTML): externo (external), interno (internal) y en línea (inline). – CSS externo.

Los selectores CSS son herramientas utilizadas para definir el estilo que quieres dar a tus elementos en CSS. Existen muchos tipos de selectores en este lenguaje, cada uno con su propia sintaxis y utilidad.

La estructura de una instrucción CSS

Una instrucción CSS consiste en un selector y una instrucción con propiedades y valores correspondientes. Puedes encontrar más información sobre los diferentes tipos de selectores y sobre la sintaxis de CSS en nuestro tutorial de CSS detallado.

Un valor en CSS es una forma de definir una colección de subvalores admitidos. Esto significa que si ves <color> como válido, no necesitas preguntarte cuáles de los diferentes tipos de valor de color puedes usar: palabras clave, valores hexadecimales, funciones rgb() , etc.

Seleccione las imagen, Autoforma, WordArt o cuadro de texto que desea cambiar. En la pestaña Formato, haga clic en Efectos de texto o Efectos de forma > sombra. Para agregar una sombra, haga clic en el estilo de sombra que desee. Para quitar una sombra, haga clic en Sin sombra.

El efecto de sombra paralela te permite crear una sombra de aspecto natural para cualquier objeto que añades a la escena, incluidos los objetos en movimiento. Si te tomas en serio la edición de video, querrás tener este efecto en tu arsenal.

Para agregar o cambiar una sombra, elija Sombra y después haga clic en la sombra que desee. Para personalizar la sombra, haga clic en Opciones de sombra y después ajuste las opciones que desee. Para agregar o cambiar un reflejo, elija Reflejo y después haga clic en la variación de reflejo que desee.

La primera opción es seleccionar el botón "fx" en la parte inferior del panel de Efectos. La segunda es pulsar el botón de selección de la izquierda y luego pulsar Efectos y luego Sombra. 5. Haz clic en "Aceptar" una vez que hayas configurado las opciones y aplica la sombra paralela al objeto.