Marcelo Pedra

Noticias y consejos que te pueden servir...

6 nuevas funciones de CSS3 que ya pueden implementarse

por · Publicada · Actualizado

Cada cierto tiempo van saliendo nuevas propiedades CSS3, todas ellas muy útiles y sencillas, pero no todas son completamente soportadas por la mayoría de los navegadores.

Hoy nos vamos a centrar en una lista de novedades para CSS3 que sí pueden ser usadas hoy, debido a su gran compatibilidad con los navegadores:

1. TRANSPARENCIA

Ya sabías que existe la forma clásica de aplicar transparencias

.opacidad{
filter:alpha(opacity=50);/* para Internet Explorer */
-moz-opacity:0.5;        /* para Firefox, Netscape, Mozilla */
-khtml-opacity:0.5;     /* para Khtml, version anterior de Safari */
opacity:0.5;             /* para Opera, Safari, Google Chrome */
}

Ahora, con CSS3 todo esto es más sencillo y estandar, y se puede especificar un doble background para aplicar transparencia a una caja de texto. Uno nos servirá para definir el color. El otro, para aplicar la transparencia, añadiendo un nuevo valor, que puede estar entre el 0 (transparente) y 1 (opaco).

rgba(0-255,0-255,0-255,0-1)

Para distintos navegadores, se puede incluir un simple RGB o color hex en la transparencia:

.estilo {
color: rgb(235,235,235);
color: <strong>rgba</strong>(255,255,255,0.75);
background-color: rgb(153,153,153);
background-color: <strong>rgba</strong>(0,0,0,0.5);
border-color: rgb(235,235,235);
border-color: <strong>rgba</strong>(255,255,255,0.65);
}

(Este hack es válido para Safari 4, Firefox 3.0.5 en adelante y Chrome 1)

2. BORDES REDONDEADOS

Muy simple, utilizando la sintaxis compatible entre varios navegadores.

.redondeado {
border.radius: 10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}

Y el HTML podría ser el siguiente

<div class="redondeado">
<a title="borde" href="#">borde</a> redondeado
</div>

3. TEXTO SOMBREADO

textshadow-css

La propiedad text-shadow permite crear sombra sobre el texto, pudiendo variar las posiciones de esta y el color de la sombra. Es muy útil para encabezados y títulos que deseen resaltarse, pero no se debe abusar de ella porque puede saturar la vista del usuario y crear una mala estética.

Solo navegadores basados en Webkit, como Safari, Firefox 3.5+, Konqueror u Opera pueden interpretar la propiedad text-shadow. Los otros navegadores no la soportan.

Ejemplo:

h1.test {
text-shadow: #6374AB 20px -12px 2px;
}

Los parámetros que se le dan son:

El color (#6374AB), la coordenada X de la sombra relativa al texto (20 pixeles),  la coordenada Y de la sombra relativa al texto (-12 pixeles), y la dispersión u opacidad que tendrá la sombra (2 pixeles). Si aumentamos mucho el último valor, la sombra será ilegible.

4. SOMBREADO EN CAJAS DE TEXTO

Añadir sombra una caja de texto sigue el mismo formato que vimos en el punto anterior, para agregar sombra en el texto. Para esto se utiliza la propiedad Box-shadow, que es compatible con Safari 4, Firefox 3 y Chrome. Ejemplo:

.bordecaja {
-webkit-box-shadow: 0 0 10px rgb(0,0,0);
-moz-box-shadow: 0 0 10px rgb(0,0,0);
box-shadow: 0 0 10px rgb(0,0,0);
}

Se puede añadir múltiples sombras incluyendo múltiples valores separados por espacios:

.bordecaja {
-webkit-box-shadow: 0 0 20px rgb(0,255,0), -10px 5px 4px rgba(0,0,255,.45), 15px -20px 20px rgba(255,0,0,.75);
-moz-box-shadow: 0 0 20px rgb(0,255,0), -10px 5px 4px rgba(0,0,255,.45), 15px -20px 20px rgba(255,0,0,.75);
box-shadow: 0 0 20px rgb(0,255,0), -10px 5px 4px rgba(0,0,255,.45), 15px -20px 20px rgba(255,0,0,.75);
}

Con esto ya tendremos nuestra propia sombra en la caja de texto, sin usar ningún tipo de imágenes.

5. MULTIPLES FONDOS

Con CSS2 solo podíamos tener una imagen de fondo por cada elemento. Pero ahora con CSS3 podemos aplicar varias imágenes de fondo en un mismo elemento. Para ello debemos aplicar este código:

.variosfondos {
background: url(fondo1.gif) top left no-repeat,
url(fondo2.jpg)  top 11px no-repeat,
url(fondo3.gif) bottom left no-repeat,
url(fondo4.gif) left repeat-y;
}

Es una única propiedad background pero con una dirección por cada fondo, cada una separada por una coma. Por ahora los únicos navegadores que pueden implementar esta técnica son WebKit (Safari) y KHTML (Konqueror). Pronto estará soportada por la mayoría de navegadores.

6. ROTAR TEXTOS

rotar-texto-css

Es posible ahora rotar textos en cualquier ángulo. La clave de estas rotaciones se encuentran en CSS Transformations, y tanto Firefox como Safari soportan esta ventaja:

-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);

Para realizar esta transformación, el elemento debe tener seteada la propiedad display: block;. Hay que añadir esta declaración al SPAN que queramos rotar. ATENCION: Internet Explorer no es compatible con este hack, por lo que deberemos hacer uso de los filtros. Se inserta en el código CSS igualmente:

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

Pero en el código para Internet Explorer, se inserta un valor del 0 al 3, en vez de grados:

  • 0: no rotar.
  • 1: rotar 90 grados
  • 2: rotar 180 grados
  • 3: rotar 270 grados (-90 grados).

Terminamos con un ejemplo para mostrar la fecha rotada a 90º, interesante para utilizar en blogs:

.example-date {
background-color:#123;
border:1px solid #345;
padding:45px 5px 0;
position:relative; width:60px;
}

.example-date .example-day {
font-size:45px;
left:5px;
line-height:45px;
position:absolute; top:0;
}

.example-date .example-month {
font-size:25px;
text-transform:uppercase;
}

.example-date .example-year {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
display: block;
position: absolute;
right: -5px;top: 15px;
}

Y en el HTML usaremos el siguiente:

<div>

<span>31</span>

<span>July</span>

<span>2009</span>

</div>

Sin duda, son una serie de funciones nuevas que te permitirán sacar máximo provecho a tus diseños sin que debas usar imágenes para lograrlo, creando así sitios web mucho más livianos y veloces.

 

 

Etiquetas: