jul 9, 2009 - Categoría: CSS, Diseño Web    Escrito por Álvaro Brito   Número de comentarios: 8 Comentario

CSS3 y sus Impresionantes Características

Introducción

Con la versión tres del CSS, muchas características emocionantes serán ejecutadas. CSS3 lleva a mayor flexibilidad y hace mucho más fácil reconstruir efectos previamente complejos. Muchas reglas para ahorrarnos tiempo se están aplicando para CSS3 como: text-shadow, box-sizing, opacity, multiple backgrounds, border-radius, border-image, multi-column layout, etc… Aunque solamente los navegadores más modernos soportan actualmente estos efectos.

En este artículo hecharemos una ojeada a algunas características interesantes de CSS3 que puedes poner en práctica en tus maquetas Web.

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. Este PowerPoint explica con detalle los colores en CSS3 y cómo usarlos.

Nuevo formato de colores en CSS3

Ver otro ejemplo

BORDES CON DEGRADADOS

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

Bordes con degradados

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.

Bordes con imagen

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.

Esquinas redondeadas

Ver otro ejemplo

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+.

Cajas con sombra

Ver otro ejemplo

MÚLTIPLES IMÁGENES DE FONDO (MULTIPLE BACKGROUND IMAGES)

Si quieres agregar al de una caja o a un párrafo, CSS3 te permite aplicar múltiples imágenes de fondo a un elemento.

Múltiples imágenes de fondo

MÚLTIPLES COLUMNAS (MULTIPLE COLUMNS)

Este módulo de CSS3 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 de CSS3 podría serte realmente útil.

Múltiples Columnas

SOMBRA PARA TEXTO

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

Sombra para Texto

BOX-SIZING Y BOX-MODEL

La propiedad Box-sizing de CSS3 permite especificar el comportamiento del navegador calculando el ancho de un elemento y controlando si una caja es redimensionable.

Box-sizing y Box-model

Ver otro ejemplo

OPACIDAD EN CSS3 (OPACITY)

Aunque, la propiedad opacity de CSS se usa actualmente, CSS3 desarrolla más el uso de esta propiedad. Puede fijar la transparencia de la caja, de la imagen y del texto usando la propiedad Opacity.

Opacity CSS3

SELECTORES CSS3

¿Estás confuso con todos los nuevos selectores CSS3? Este artículo proporciona la explicación más útil de los selectores CSS3.

Selectores CSS3

CSS3 TEMPLATE LAYOUT CON JQUERY PLUGIN

Este plugin permite que los Maquetadores Web usen: W3’s CSS Template Layout Module usando jQuery

CSS3 Template Layout con jQuery Plugin

PERSONALIZANDO FUENTE CON CSS3

Hoy en día utilizamos formas alternativas para personalizar la fuente como por ejemplo: typeface.js. Pero ahora con CSS3 lo tendremos mucho más facil y accesible.

CSS3 Personalizando Fuente con CSS3

CREANDO UNA GALERÍA POLAROID CON CSS3 AND JQUERY

El diseñador Marco Kuiper nos demuestra cómo crear una galería polaroid combinando CSS3 y JQuery.

Creando un Galería Polaroid con CSS3 and jQuery

Ver Demo

TOOLTIP CON CSS3

Este artículo demuestra como crear un tooltip usando pseudo-elementos :before (or :after) combinados con pseudo-clases :hover.

Tooltip con CSS3

Ver Demo

8 Comentario

  • Border radius, text-sadow, font-face, opacity…. Cuando se aplique CSS3 y desaparezca de una vez IE6 será para hacer una fiesta, estas propiedades acabarán con las pesadillas de todos los maquetadotes. Estoy deseando implementar CSS3.

    Aquí tenéis un enlace muy interesante que cuenta en que estado se encuentran algunas de las propiedades más importantes CSS3 en los navegadores actuales y cuando se prevén implementar.

    http://www.martinpulido.com/blog/diseno-web/cuando-podre-usar-selectores-css-3-canvas-svg-font-face/

  • Esperemos que con las futuras actualizaciones de IE8 se dé soporte a las nuevas propiedades.

  • También os dejo un enlace donde testear los selectores CSS3 y comprobar si es compatible con tu navegador:

    CSS Selector Test

  • Esquinas redondeadas, amo a CSS 3 !!

  • Curioso que en el CSS3 selector test con FF 3.5 me falle el :link y el :visited, que son de CSS2.

    En Chrome 2 todo verde y IE8 un desastre.

    ¡Queremos CSS3 ya!. Lo mejorcito para mi: Tipografias y columnas x)

  • Todos queremos que llegue ya la “aspirina” de CSS3.

  • [...] CSS3  y sus impresionantes características: Análisis de algunas características rompedoras como text-shadow, box-sizing, opacity, multiple backgrounds, border-radius, border-image, multi-column layout, etc… [...]

  • Cómo hago esquinas redondeadas en IE7??

    probé con border-radius y no anda ¬¬’

¿Algo que comentar? Escribe tu comentario