Estilos aplicados al texto

Columnas

La propiedad column nos ofrece la posibilidad de maquetar un texto en columnas. Podemos configurar los siguientes valores:

  • La propiedad column-count permite indicar cuántas columnas queremos crear.
  • La propiedad column-width permite definir el ancho de cada columna.
  • La propiedad column-gap permite indicar el espacio entre cada columna.
  • column-rule-width: define el grosor de la línea de separación.
  • column-rule-style: define el tipo o el estilo de la línea de separación.
  • column-rule-color: define el color de la línea de separación.
  • column-rule: es la sintaxis abreviada para definir, en este orden, el grosor, el estilo y el color.
	#columnas { 
	   width: 470px; 
	   -moz-column-count: 3; 
	   -moz-column-width: 150px; 
	   -moz-column-gap: 10px; 
	   -webkit-column-count: 3; 
	   -webkit-column-width: 150px; 
	   -webkit-column-gap: 10px; 
	   column-count: 3; 
	   column-width: 150px; 
	   column-gap: 10px; 
	}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eu dui mauris. Aliquam blandit vulputate felis eu dictum. Morbi ut dolor interdum odio mollis dapibus. Donec convallis eget felis in iaculis. Etiam tempor tristique metus vitae dignissim. Vestibulum semper eu felis sed porttitor. In pharetra ipsum cursus posuere egestas. Proin eu felis in erat facilisis ultricies. Donec faucibus, ante eu eleifend gravida, felis purus mattis mi, non ullamcorper est velit quis tellus. Vivamus eu tellus nibh. Suspendisse id feugiat velit. Etiam ac risus tincidunt, fermentum sem at, pellentesque tellus. Phasellus iaculis rutrum massa at molestie. Etiam pellentesque ultrices mauris.



Fuentes tipográficas

Con los estilos CSS3 y la regla @font-face podemos importar las fuentes tipográficas en nuestra página web. De este modo, ya no estaremos limitados al uso de las fuentes genéricas.

	@font-face { 
	font-family: "Eight One";
	src: local("Eight One"), url("../fuentes/Eight One.ttf") 
	format("truetype"); 
	}
	
	@font-face { 
		font-family: "forte"; 
		src: url("../fuentes/forte.ttf") 
		format("truetype"); 
	} 
	}

Probando fuente Forte

Fuente eight one


Textos con sombra

La nueva propiedad CSS3 text-shadow permite aplicar una sombra a un texto.

	#textosombras { 
		font-family: "forte"; 
		text-shadow: 5px 3px 2px #000; 
	}

Texto con sombra