Unidad 11. CSS. Fuente y texto. (X)

11.18. text-shadow

La propiedad text-shadow permite crear sombra en el texto. Puede tomar los siguientes parámetros:

- desplazamiento horizontal, es la longitud que se desplaza la sombra horizontalmente. Los valores positivos desplazan hacia la derecha y los negativos hacia la izquierda, normal entre palabras. text-shadow: 3px 2px 4px grey;

Resultado: Con sombra 3px 2px 4px grey

- desplazamiento vertical, es la longitud que se desplaza la sombra verticalmente. Los valores positivos desplazan hacia la abajo y los negativos hacia la arriba, normal entre palabras. text-shadow: 3px -2px 4px grey;

Resultado: Con sombra 3px -2px 4px grey

- desenfoque radial, es el valor del radio de desenfoque, el valor 0px indica que no hay desenfoque, la sombra es muy fuerte, al aumentar el valor la sombra se hace más suave. Es opcional el valor por defecto es 0. text-shadow: 3px 2px 7px grey;

Resultado: Con sombra 3px 2px 7px grey

- color, es el color de la sombra. Es opcional, si se omite, el color de la sombra es el mismo que el del texto. text-shadow: 3px 2px 4px;

Resultado: Con sombra 3px 2px 4px

11.19. white-space

La propiedad white-space define el comportamiento del texto respecto a los espacios en blanco y saltos de línea. Puede tomar valores numéricos, por defecto toma el valor normal:

- normal, los espacios en blanco se colapsan, solo se realiza salto de línea si es necesario por tamaño. white-space: normal

Lorem ipsum dolor sit amet, consectetur adipisicing elit. eligendi porro. Lorem ipsum dolor sit amet, consectetur adipisicing elit. eligendi porro ius soluta in voluptates voluptatem, nesciunt dolorem obcaecati nemo eligendi porro iusto, earum debitis.

- pre, los espacios en blanco no se colapsan, no se realiza salto de línea. white-space: pre

Puedes probar esta propiedad en esta página: Probar_white_space. Luego cierra la ventan.

- nowrap, los espacios en blanco se colapsan, no se realiza salto de línea. white-space: nowrap

Puedes probar esta propiedad en esta página: Probar_white_space. Luego cierra la ventan.

- pre-line, los espacios en blanco se colapsan, se realiza salto de línea si el código lo contiene, aunque no sea necesario por tamaño. white-space: pre-line

- pre-wrap, los espacios en blanco no se colapsan, se realiza salto de línea si el código lo contiene, aunque no sea necesario por tamaño. white-space: pre-wrap

Para practicar lo aprendido realiza el ejercicio CSS. Fuente y texto

Para saber más sobre los temas de esta unidad ...

Página oficial W3C-CSS.

Nombres de colores: W3schools

Ejercicio propuesto de la Unidad 11

Prueba evaluativa de la Unidad 11

Enero-2019 (V 2.2)

Pág. 11.10

Cursos Informática Gratuitos

Síguenos en: Facebook Sobre aulaClic Política de Cookies