Blog de Consultec

La utilización de CSS 3 junto con HTML5 nos permite a los diseñadores crear aplicaciones de internet enriquecidas (RIA) de una forma mucho más sencilla y estandarizada de lo que veníamos realizando hasta ahora, si además, a estas tecnologías le añadimos JavaScript o Jquery, la experiencia de usuario (UX) se mejora notablemente, proporcionando mayor interactividad y fuerza visual.

Aunque gigantes del sector de Internet como Google o Microsoft están dando pasos adelante hacia la utilización de estas tecnologías, enfrentan un importante obstáculo para poder utilizar las herramientas de forma estandarizada: la compatibilidad con los diversos navegadores que nos podemos encontrar. Por lo tanto, surge la necesidad de que todos los navegadores se comporten de la misma manera y soporten estas tecnologías.

Centrándonos en el aspecto visual, en la presentación, los diseñadores web deberíamos tener muy en cuenta aspectos básicos de CSS 3, como algunos que vamos a comentar a continuación: 

1. @font-face

Las posibilidades de utilizar diversas fuentes tipográficas en nuestros proyectos web estaba limitado a las fuentes de sistema. Anteriormente,  para que todos los usuarios visualizasen correctamente el texto de nuestra web y para poder utilizar una tipografía más peculiar, teníamos que acudir a las imágenes. Con esta propiedad @font-face, que nos brinda CSS3  podemos elegir la fuente tipográfica deseada para implementarla en el diseño web, independientemente de las fuentes que disponga el usuario, ya que permite a éste descargar de nuestro servidor la fuente para su correcta visualización.

@font-name {
        font-family: “Nombre de la fuente seleccionada”;
        src: url(ubicación de la fuente) format(nombre del formato);
        }

 

Las versiones antiguas de Internet Explorer no soportan el formato WOFF, el formato estándar de  W3C, sino que utiliza el formato EOT, aunque  a partir de IE9 se utiliza este formato estándar.

 

2. Múltiples columnas

Esta característica de CSS 3 nos permite una nueva forma presentar el texto, ya que nos permite indicar el número de columnas en las que queremos que fluya el texto de una forma sencilla y automática, así como establecer el ancho de cada una de las columnas, el espacio entre ellas e incluso mostrar una línea de separación. De esta forma nos evitamos tener que utilizar diferentes “divs” para dar formato a un texto, por ejemplo.  Aunque todavía está en una fase de experimentación, ya que no todos los navegadores lo soportan.

#variasColumnas {
     -moz-column-count: 3; (número de columnas)
     -moz-column-gap: 2em; (espacio entre columnas)
     -moz-column-rule: 1px solid #ccc; (mostrar separación)
      }

 

3. Selectores 

CSS 3 amplía la gama de selectores de CSS 2.1, de esta forma podemos seleccionar los elementos de nuestra web de forma más exacta y concisa para poder darles diseño.

Por ejemplo algunos de los selectores que soportan la mayoría de los navegadores modernos que nos podemos encontrar son:

• Ele[atr*="valor"] selecciona los elementos con el atributo indicado y que además el valor comienza por el texto que se indica
• Ele[atr^="valor"] selecciona los elementos con el atributo indicado y que además el valor contiene el texto que se indica
• Ele[atr$="valor"] selecciona los elementos con el atributo indicado y que además el valor termina por el texto que se indica.

 

4. Transiciones

Con las transiciones que nos ofrece CSS 3 podemos crear fácilmente sencillos efectos que hasta ahora tan solo podíamos realizar con JavaScript o Flash. Las transiciones nos permiten modificar los valores de las propiedades de un elemento indicándole el tiempo en el que queremos que transcurra dicha transición de una forma gradual.

• transition-property: Indica la propiedad a la que queremos aplicar la transición
• transition-duration: Duración de la transición
• transition-timing-function: La velocidad a la que se va a realizar la transición

img.ampliar{ -moz-transform:scale(1); -moz-transition-duration: 0.5s; -moz-transition-timing-function:ease;                  }

img.ampliar:hover{ -moz-transform:scale(3); -moz-transition-duration: 0.5s; -moz-transition-timing-function:ease;                   }

 

5. RGBA

Mediante RGBA podemos indicar el color de un elemento mediante los valores de 0 a 255 para cada uno de los canales de color rojo, verde y azul. Además con el valor alpha (A) podemos indicar el grado de transparencia que deseamos que adopte el elemento indicándole un valor de 0 a 1, una forma sencilla de aplicar transparencias o semi-transparencias.

div.miColor{

background: rgba(134,75,23,0.5)

}  

 

6. Border-radius

Mediante esta característica de CSS3 por fin los diseñadores podemos indicar fácilmente que un elemento de bloque tenga los bordes redondeados sin tener que crearlos mediante imágenes. Indicando un único valor, las cuatro esquinas del elemento seleccionado se redondearán o también podemos indicar un valor independiente para cada una de las esquinas.

div.bordeRedondeado{

border-radius: 0 5px 0 10px;

-webkit-border-radius: 0 5px 0 10px;

-moz-border-radius: 0 5px 0 10px;

}   

 

7. Multiple background images

Otra de las novedades de CSS3 es la posibilidad de establecer varias imágenes como fondo de un elemento, de esta forma nos evitamos tener que utilizar varias etiquetas HTML para conseguir el mismo efecto, desarrollando un código más limpio y semántico (sobre todo utilizando HTML 5).

div.imagenesFondo{

background: url(‘../img/imagen1.jpg’) left repeat, url(‘../img/imagen2a.jpg’) left no-repeat;

}

 

 

 

8. Box-shadow

Con la propiedad box-shadow podemos establecer una sombra al elemento que seleccionemos, evitando tener que realizar dicho efecto con imágenes, de esta forma podemos contralar fácilmente los valores de la sombra que se proyecta. El primer valor que se le indica es el desplazamiento horizontal, el segundo valor es vertical, el tercer valor corresponde al difuminado y por último, indicamos el color.

div.sombra{

box-shadow: 4px 8px 6px  black;

-moz-box-shadow: 4px 8px 6px  black;

-webkit-box-shadow: 4px 8px 6px black;

}

 

Asier López      

Tags: CSS 3, Diseño, HTML5