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



11.18. text-shadow

La propiedad text-shadow permite crear sombra en el texto. Puede tomar los siguiente 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, se realiza salto de línea. 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

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.

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

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-line, los espacios en blanco se colapsan, se realiza salto de línea. white-space: pre-line

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-wrap, los espacios en blanco no se colapsan, se realiza salto de línea. white-space: pre-wrap

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.

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.01)
Pág. 11.10
Atrás Inicio Adelante






Página inicial  Cursos Informática Gratuitos

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


© aulaClic S.L. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.