8 propiedades CSS que casi nadie usa (aunque debería)

Algunas propiedades CSS no son tan conocidas pero pueden sernos de suma utilidad a la hora de dar un diferencial al diseño de nuestros sitios web. Igualmente debemos tener la precaución de fijarnos que algunas no funcionan en todos los navegadores.

De esta forma podremos lograr efectos innovadores como máscaras de capas, sombra en los textos, ajuste de fuentes o configuración del formato de un sitio para su impresión, incluyendo la disposición de los elementos. Veamos entonces estas propiedades CSS.

Haciendo clic en cada ítem accederás a la página de cada propiedad para conocerla en detalle:

1. Clip:
   clip: rect(5px, 40px, 45px, 5px)
   Funciona como un “clipping mask” en Adobe Illustrator, para los que desconozcan el efecto es similar a poner una hoja de papel con un cuadrado calado en el medio. Lo que se ve a través de la ventana será la capa “de abajo”. Así podemos mostrar encuadres de nuestro sitio, entre otras cuantas cosas que se nos puedan ocurrir.
   
2. Text-shadow (sombra para el texto):
   text-shadow: color, x-coordinate, y-coordinate, blur radius
text-shadow: #000000 10px -5px 1px
3. Quotes (comillas para las citas):
   q { quotes: '"' '"' }
   
   Nota: Quotes no es soportado actualmente por Internet Explorer.
4. Marks (genera marcas de corte o diferencia):
   @page: { marks: ; }
5. Page-break-before/after:
   page-break-before: (always|auto|empty string|left|right);
page-break-after: (always|auto|empty string|left|right);
   Esta propiedad es muy recomendable, acomoda una página para que se imprima por “sectores” respetando los elementos h3 con su respectivo contenido, para no dejar un título “colgado” y en otra hoja el contenido correspondiente.
   
   
6. Font-stretch (maneja el aspecto de la fuente):
   font-stretch: (normal | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | inherit)
7. Font-variant (fuente variante):
   font-variant: (normal | small-caps)
   Sirve para mostrar frases en una tipografía de menor tamaño y con tododos los caracteres en mayúsculas.
8. Table-layout:
   table-layout: (auto | fixed)
   Sirve para acomodar el layout (estructura) del diseño de la página, que cargará mucho más rápido.

No dudes en experimentar con estas propiedades, sólo ten la precaución de testearlas antes de subir los cambios a tu página web en caso de no estar muy familiarizado con el uso de estilos CSS.

Fuente: SEOMoz

Sacado de: El Webmaster