Avances en las hojas de estilo hacen al CSS3 más social y práctico

Avances en las hojas de estilo hacen al CSS3 más social y práctico a la hora de implementarlo.

En mi experiencia con las hojas de estilo CSS2, he visto la necesidad de nuevas instrucciones para hacer del diseño algo más versátil. Hay que usarlo con cautela, sin abusar de sus muchas funciones, pues existirá el problema de estándares en los navegadores.

Ahora quiero rescatar las instrucciones más interesantes.

Propiedades

• Bordes: border-color, border-image, border-radius, box-shadow.
• Backgrounds: background-origin, background-clip, background-size, layering multiple background images.
• Color: HSL colors, HSLA colors, RGBA colors opacity.
• Texto: text-shadow, text-overflow.
• Interface: box-sizing, resize.
• Selectores: attribute selectors.
• Formatos: media queries, multiple column layout, speech

Multi-column Layout

Una etiqueta que era posible hacerlas con tablas, ahora se podrá implementar en los divs con tan solo esta instrucción:

 .contenido {
 column-count: 3;
 column-gap: 40px;
 }
 

Esquinas Redondeadas

La instrucción sí que ha sido esperada por los diseñadores – nos evitará bastante  complejidad para crear esquinas redondeadas-

-moz-border-radius:10px;
 -webkit-border-radius:10px;
 border:1px solid #DBDBDB;
 border-radius:10px;
 

Sombra en texto

Posible  hasta ahora por medio de imágenes, o algún javascript y limitado para algunos navegadores.  En CSS3 ya es posible implementarlo con tan solo esta instrucción.

 blockquote {
 text-shadow: blue 2px 2px, red -2px -2px
 }

Fondos en degradados

Otra instrucción interesante es la de poder incorporar por medio de código,  degradados a nuestros divs.

 div {
 background-color: #1a82f7; /* fallback color */
 background-image: -moz-linear-gradient(100% 100% 90deg, #2F2727, #1a82f7);
 background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727));
 }
 

Hay una lista bastante larga de nuevas instrucciones que harán parte del nuevo CSS3, que se puede ver más a fondo en CSS3.com.

---

---