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:
- 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.
- Text-shadow (sombra para el texto):
text-shadow: color, x-coordinate, y-coordinate, blur radius
text-shadow: #000000 10px -5px 1px - Quotes (comillas para las citas):
q { quotes: '"' '"' }
Nota: Quotes no es soportado actualmente por Internet Explorer. - Marks (genera marcas de corte o diferencia):
@page: { marks: <value>; } - 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.
Aquà tenemos un ejemplo:
<STYLE>
H3 { page-break-before: always }
</STYLE>
</HEAD>
<BODY>
<H3>Start New Section on New Page</H3> - 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) - 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. - 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
Miércoles, 20 de Febrero de 2008 a las 20.49
muy buena la informacion me gustaria tener uno de esos para diseñar a mi estilo mi sitio web.