La mejora más significativa al texto en CSS3 es la font

mecanismo que permite definir sus propias fuentes y empaquetar con su sitio web. CSS3 tiene otros trucos de formato de texto disponibles, también. los texto tiempos y text-shadow reglas le permiten realizar transformaciones interesantes de texto en sus páginas.

Ambas normas se utilizan para decorar el texto, pero pueden afectar la legibilidad, por lo que debe utilizar con cuidado. Son más apropiado para un texto más grande (como titulares) que el contenido principal de su sitio.

Ictus texto

Con CSS3, puede especificar un color de trazo para el texto. Esto define un contorno alrededor de la letra. Puede especificar el color del trazo (utilizando cualquiera de los valores de color CSS estándar), así como un ancho de trazo (utilizando los atributos de tamaño normal).

los texto tiempos regla se aplica este efecto. Usted puede ver lo que solía en el código:

Texto Stroke demo
Este texto tiene un derrame cerebral

Actualmente no hay navegadores soportan el texto tiempos atribuyen directamente, pero los navegadores basados ​​en WebKit (Chrome y Safari) apoyan el proveedor específico -webkit- versión. Un navegador que no admite la regla simplemente lo ignoran, por lo que esto no debería ser una parte importante de su diseño, hasta el apoyo es más completa.

Text-shadow

Las sombras son otra característica común de diseños web modernos. Sombras añadir un elemento de profundidad a una página, pero también pueden mejorar la legibilidad (si se utiliza correctamente) para levantar un titular de la página. los text-shadow atributo era técnicamente parte de CSS2, pero ha sido sólo recientemente el apoyo de los principales navegadores.

Texto Sombra demo
Este texto tiene una sombra

El atributo tiene cuatro parámetros:

• offset-x: Determina qué tan lejos en las x (izquierda; derecha) eje de la sombra será a partir del texto original. Un valor positivo mueve la sombra a la derecha, y un valor negativo mueve hacia la izquierda.

• compensar-y: Determina hasta qué punto en el y será (arriba-abajo) del eje de la sombra del texto original. Un valor positivo mueve la sombra hacia abajo, y un valor negativo mueve la sombra hacia arriba.

• desenfoque: Especifica el radio de desenfoque de la sombra. Si el valor es 0px, no hay ninguna falta de definición, y la sombra se ve como el texto original. En general, usted querrá el valor de desenfoque para estar cerca de los más largos de sus compensaciones. Esto permite que la sombra sea reconocible como una sombra del texto sin llegar a ser una distracción.

• color: Define el color de la sombra. Generalmente se prefiere un color gris oscuro, pero también puedes probar otros colores para efectos especiales. Tenga en cuenta que desdibujar tiende a aligerar el color de la sombra. Si hay una gran cantidad de desenfoque aplicado, el color de sombra puede ser el mismo color que el texto. Si la sombra no será borrosa tanto, es posible que necesite para aclarar el color de sombra para facilitar la lectura.

El tamaño de la sombra se determina indirectamente con una combinación de compensaciones y borrones. Puede que tenga que experimentar para conseguir la sombra que estás buscando. Efectos de sombra son mejores cuando son sutiles, ya que pueden afectar a la legibilidad.

Un caso especial de sombreado de texto se puede utilizar para ayudar texto se destacan una imagen de fondo en contra. Aplique una pequeña sombra de un color que contraste. Esta técnica se utiliza con frecuencia cuando es necesario tener el texto en un fondo, ya que cada carta produce su propio fondo de alto contraste. Una vez más, asegúrese de no sacrificar la legibilidad para el bien de la ética de diseño.

Todos los navegadores de última modelo admiten la función text-shadow. No hay prefijos especiales son necesarios.