CSS3

CSS3

CSS es un lenguaje para definir el estilo o la apariencia de las páginas web, escritas con HTML o de los documentos XML. CSS se creó para separar el contenido de la forma, a la vez que permite a los diseñadores mantener un control mucho más preciso sobre la apariencia de las páginas.

A partir del año 2005 se comenzó a definir el sucesor de esta versión, al cual se lo conoce como CSS3 o Cascading Style Sheets Level 3. Actualmente en definición, esta versión nos ofrece una gran variedad de opciones muy importantes para las necesidades del diseño web actual. Desde opciones de sombreado y redondeado, hasta funciones avanzadas de movimiento y transformación, CSS3 es el estándar que dominará la web por los siguientes años.

Para que sirve?

CSS sirve para definir la estética de un sitio web en un documento externo y eso mismo permite que modificando ese documento (la hoja CSS) podamos cambiar la estética entera de un sitio web… ese es precisamente el poder de CSS, en otras palabras, el mismo sitio web puede variar totalmente de estética cambiando solo la CSS, sin tocar para nada los documentos HTML o jsp o asp que lo componen, se suman muchas nuevos efectos que harán de la que la parte visual de nuestra página sea mucho más agradable y llamativa, como sombras, transformaciones de figuras, creación sencilla de bordes y efectos 3D.

Caracteristicas de CSS3

Con la versión tres del CSS, han llegado muchas nuevas características:

MÓDULO DEL COLOR CSS3: CSS3 soporta más color y una gama más amplia de las definiciones del color. Los nuevos colores que proporciona CSS3 es HSL, CMYK, HSLA y RGBA.

BORDES CON DEGRADADOS: Puedes obtener bordes con degradados usando: -moz-border-radius / -webkit-border property.

BORDES CON IMAGEN: Las propiedades generalmente de los bordes en CSS no son suficientes. Si quieres utilizar las imágenes para los bordes, CSS3 soporta imagen en los bordes a través de las porpiedades border-image y border-corner-image.

ESQUINAS REDONDEADAS O BORDES REDONDEADOS: A continuación se demuestra cómo crear fácilmente las esquinas redondeadas para cualquier caja usando border-radius y background position.

CAJAS CON SOMBRA: La propiedad de CSS3 box-shadow permite agregar un efecto de sombra sin usar imágenes a un elemento seleccionado. Box-shadow es soportado actualmente del Safari 3+ y Firefox 3.1+.

MÚLTIPLES COLUMNAS (MULTIPLE COLUMNS): Este módulo permite colocar los textos en varias columnas de forma mucho más simple usando las propiedades: -moz-column-count and -moz-column-width. Si tienes un texto en tu págia Web demasiado de largo, esta propiedad  podría serte realmente útil.

SOMBRA PARA TEXTO: ¿Necesitas usar Photoshop o Fireworks para crear sombras para el texto? La propiedad text-shadow  permite agregar una sombra a cada letra del texto. Esta propiedad no es nueva , fue propuesto originalmente en CSS2, pero quitado en CSS 2.1.

MÓDULO DEL COLOR CSS3:  Soporta más color y una gama más amplia de las definiciones del color. Los nuevos colores que proporciona CSS3 es HSL, CMYK, HSLA y RGBA.

BORDES CON DEGRADADOS: Puedes obtener bordes con degradados usando: -moz-border-radius / -webkit-border property.

BORDES CON IMAGEN: Las propiedades generalmente de los bordes no son suficientes. Si quieres utilizar las imágenes para los bordes, soporta imagen en los bordes a través de las porpiedades border-image y border-corner-image.

ESQUINAS REDONDEADAS O BORDES REDONDEADOS: A continuación se demuestra cómo crear fácilmente las esquinas redondeadas para cualquier caja usando border-radius y background position.

CAJAS CON SOMBRA: La propiedad de box-shadow permite agregar un efecto de sombra sin usar imágenes a un elemento seleccionado. Box-shadow es soportado actualmente del Safari 3+ y Firefox 3.1+.