CSS, Diseño Web
Álvaro Brito
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.
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 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 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.
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.
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.
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.
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.
CSS3 TEMPLATE LAYOUT CON JQUERY PLUGIN
Este plugin permite que los Maquetadores Web usen: W3’s CSS Template Layout Module usando jQuery
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.
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.
TOOLTIP CON CSS3
Este artículo demuestra como crear un tooltip usando pseudo-elementos :before (or :after) combinados con pseudo-clases :hover.















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 ¬¬’