ubiquitour.com

Cómo hacer sombra texto HTML

Cómo hacer sombra texto HTML

Cuando se usa correctamente, las sombras de texto añadir profundidad y estilo a los diseños Web. Puede utilizar código de hojas de estilo en cascada (CSS) para tomar cualquier texto en un archivo HTML y una sombra. Combinaciones de color de la sombra, el radio de desenfoque y desplazamientos crean una amplia gama de efectos como la prensa de la letra, texto brillante y sombras sutiles. La propiedad "text-shadow" funciona en todos los navegadores modernos excepto Internet Explorer 9.

Instrucciones

1 Abra el archivo HTML de la Página Web donde desea crear el efecto de texto sombreado. Busque el texto que desea cambiar y encontrar sus etiquetas de embalaje. Aquí está un ejemplo:

< p > es algo de texto dentro de un párrafo... < /p >

2 Agregar una clase a las etiquetas de ajuste de su texto. Dar la clase un nombre como "sombra" o "sombra" por lo que puede atacarlo en CSS. Este es un párrafo con un nombre de clase:

< clase p = "sombra" > aquí hay algún texto dentro de un párrafo... < /p >

3 Desplácese hasta la parte superior del archivo HTML y encuentre sus etiquetas "< style >". Añadir las etiquetas si no los encuentra, ponerlos entre las etiquetas "< head >":

< estilo tipo = "text/css" >

< / estilo >

4 Escriba un selector CSS para "seleccionar" la etiqueta por su nombre de clase. Para seleccionar por nombre de la clase, escriba un período seguido por el nombre de clase y agregue un par de llaves como este:

{.shadowed}

5 Establezca la propiedad "text-shadow" en su color deseado, compensaciones y el radio de desenfoque. El código final tendrá el siguiente aspecto:

{.shadowed}

sombra: #000000 2px 2px 5px;

}

En el código anterior, "#000000" representa el negro. Los siguientes dos números representan la cantidad de desplazamiento de la parte superior y la izquierda. Utilice valores negativos para mover los desvíos desde la derecha o la parte inferior del texto. El último valor establece el radio de desenfoque, que es la cantidad de desenfoque.

Consejos y advertencias

  • Establecer el color de la sombra en un color que coincida con el fondo de su página Web.
  • Utilice valores RGBa para tus colores de sombra para cambiar la opacidad de la sombra. Un código de color RGBa consta de valores rojo, verde, azul y opacidad. El código de "text-shadow" tendrá el siguiente aspecto: "sombra de texto: rgba(0,0,0,0.5);" El cuarto valor en el conjunto de RGBa es el porcentaje de opacidad.
  • Versión 9 de Internet Explorer no admite la propiedad "text-shadow". Intenta añadir un polyfill JavaScript a tu página web para que sea compatible.
  • Copia de seguridad de tus archivos HTML y CSS al editar tu sitio Web.