Tecnología y Coaching para Emprendedores

Guía de Introducción a CSS3 para Principiantes

css3

Desde el anuncio en 2005 de las hojas de estilo de nivel 3, mejor conocidas como CSS3, cada día son más los diseñadores y desarrolladores web que utilizan la potencia de CSS3 para maximizar el rendimiento de sus diseños. Para que no te quedes atrás, aquí tienes una guía de introducción a CSS3 para principiantes en la que descubrirás todo lo que debes saber sobre CSS3, como por ejemplo crear sombras, gradientes y esquinas redondeadas. A pesar que CSS3 no es todavía un estándar de la W3c, cada día encontramos mayor soporte por parte de los navegadores, por lo que vale la pena utilizar CSS3 para mejorar la experiencia visual de las personas que utilizan navegadores modernos y actualizados.

 

CSS3 para Principiantes

Prefijos del navegador

Una de las primeras cosas que veremos es que para especificar las propiedades de CSS3, como norma general hacen falta los vendor prefixes o prefijos del navegador. El motivo es que los navegadores web van implementando las diferentes propiedades de manera gradual, por lo que hay que especificar cada una de las propiedades para los distintos navegadores.

El principal inconveniente del uso de prefijos del navegador es que nuestro código CSS puede parecer un tanto caótico y que hemos de especificar varias veces los parámetros de una misma propiedad. La ventaja de esto es que podemos dar un toque diferente a la misma página web para que se vea de manera diferenciada en los distintos navegadores.

Las extensiones más comunes son las basadas en navegadores que utilizan Webkit(por ejemplo, Chrome y Safari), que empiezan con -webkit-, y los navegadores basados en Gecko (por ejemplo, Firefox), que empiezan con -moz-. Opera (-o-) e Internet Explorer (-ms-) tienen sus propias extensiones.

Propiedades básicas de CSS3

Esquinas redondeadas con border-radius

La regla número uno de la Web 2.0 es: si tiene esquinas redondeadas, es moderno. Gracias a la propiedad border-radius de CSS3 ya no hace falta que utilices imágenes ni JavaScript para conseguir esquinas redondeadas.

Veamos un ejemplo:

Ejemplo de esquinas redondeadas con CSS3.

 

Código HTML:

<div class="rounded">Ejemplo de esquinas redondeadas con CSS3</div>

Para conseguir que las esquinas se vean redondeadas, sólo necesitas este código CSS:

div.rounded {
    background-color: #eee;
    line-height: 20px;
    text-align:center;
    padding: 20px;
    border-radius:15px;
    -moz-border-radius: 15px;
}

En el caso de border-radius hemos de utilizar también -moz-border-radius para Mozilla.

Esto lo que hace es que todas las esquinas sean redondeadas. Pero supongamos que no queremos que lo sean todas, entonces aplicamos esta regla:

4 valores:
border-radius: ArribaIzquierda ArribaDerecha AbajoDerecha AbajoIzquierda;

3 valores:
border-radius: ArribaIzquierda AbajoIzquierda+ArribaDerecha AbajoDerecha;

2 valores:
border-radius: ArribaIzquierda+AbajoIzquierda ArribaDerecha+AbajoDerecha;

1 sólo valor:
border-radius: Todos;

En el caso que el navegador no de soporte a la propiedad border-radius, en lugar de verse las esquinas redondeadas se verán esquinas en ángulo recto, al igual que un rectángulo.

Crear sombras con box-shadow

La propiedad box-shadow permite a los diseñadores web el implementar fácilmente sombras tanto dentro como fuera de elementos de caja, especificando valores como el color, tamaño, borrosidad (blur) y offset.

El soporte de los navegadores está aumentando con Mozilla (Firefox), Webkit (Safari y Chrome), Opera e IE9. Aún así, Mozilla y Webkit necesitan todavía sus prefijos -moz- y -webkit– respectivamente (nota: Mozilla Firefox 4.0+ ya no requiere el prefijo -moz-).

Veamos un ejemplo:

Firefox, Safari/Chrome, Opera y IE9 muestra una sombra gris.

 

Código HTML del ejemplo:

<div class="boxshadow">Firefox, Safari/Chrome, Opera y IE9 muestra una sombra gris.</div>

Código CSS:

div.boxshadow {
    background-color: #eee;
    -moz-box-shadow: 10px 10px 5px #888;
    -webkit-box-shadow: 10px 10px 5px #888;
    box-shadow: 10px 10px 5px #888;
    margin-right: 20px;
    margin-top: 10px;
    padding: 20px;
    text-align: center;
}

Usar imágenes como bordes con border-image

Otra funcionalidad muy interesante para los bordes en CSS es border-image. Con esta propiedad puedes definir el uso de una imagen en lugar del borde habitual. Esta funcionalidad está dividida en dos propiedades:
border-image y border-corner-image. Si sólo queremos especificar uno de los bordes, utilizaremos estas otras etiquetas:

border-image:
border-top-image
border-right-image
border-bottom-image
border-left-image

border-corner-image:
border-top-left-image
border-top-right-image
border-bottom-left-image
border-bottom-right-image

border-image actualmente funciona en Safari and Firefox 3.1. Veamos un ejemplo:

border-image: url(border.png) 27 27 27 27 round round;

Esta propiedad se verá así:

Sombra de texto con text-shadow

CSS3 elimina la necesidad de usar Photoshop cuando lo único que queremos es dar sombra a un texto. La propiedad text-shadow se utiliza así:

text-shadow: 2px 2px 2px #000;

Veamos un ejemplo:

Si usas Webkit (desde Safari 3+), Opera 9.5, Firefox 3.1(pre-Alpha), Konqueror o iCab deberías ver una sombra en el texto.

 

Código HTML:

<p id="text_shadow">Si usas Webkit (desde Safari 3+), Opera 9.5, Firefox 3.1(pre-Alpha), Konqueror o iCab deberías ver una sombra en el texto.</p><br/>

Código CSS:

#text_shadow {
    font-weight: bold;
    text-shadow: 2px 2px 2px #999999;
}

Opacidad en CSS3 con opacity

La opacidad puede tener un valor entre 0 y 1. Si el valor es 1 será el color al 100%, mientras que si es 0.2 será al 20%. Esto se utiliza mucho en cajas en las que cuando se pone el cursor encima se quiere que aparezca un cuadro con transparencia.

Veamos un ejemplo:

 

En el prier caso estamos dando una opacidad 0.2, mientras que en el último es de 1. Aquí tienes el código HTML en el que he usado inline CSS:

<div style="height: 30px; width:500px; background: rgb(255, 0, 0) ; opacity: 0.2;"></div>
<div style="height: 30px; width:500px; background: rgb(255, 0, 0) ; opacity: 0.4;"></div>
<div style="height: 30px; width:500px; background: rgb(255, 0, 0) ; opacity: 0.6;"></div>
<div style="height: 30px; width:500px; background: rgb(255, 0, 0) ; opacity: 0.8;"></div>
<div style="height: 30px; width:500px; background: rgb(255, 0, 0) ; opacity: 1;">

Multiples backgrounds con CSS3

CSS3 permite a los diseñadores web especificar múltiples imágenes como background de una manera muy sencilla, pues sólo es necesario separar los backgrounds con una coma.

Cada vez son más los navegadores web que dan soporte a esta funcionalidad de CSS3, como son el caso de Mozilla Firefox (3.6+), Safari/Chrome (1.0/1.3+), Opera (10.5+) e incluso Internet Explorer (9.0+).

Veamos un ejemplo:

Este cuadro tiene dos imágenes como background, la primera es una oveja y la segunda es el césped con el cielo azul.

 

Veamos el código:

HTML:

<p>Este cuadro tiene dos imágenes como background, la primera es una oveja y la segunda es el césped con el cielo azul.</p>

CSS:

.multiple_bg {
    background-image: url("img/sheep.png"), url("img/betweengrassandsky.png");
    background-position: center bottom, left top;
    background-repeat: no-repeat;
    height: 250px;
    padding: 5px;
    width: 500px;
}

Conclusión

Muchas son las propiedades de CSS3, aquí he querido mostrar las más relevantes para el uso diario en nuestros proyectos. Es posible que te hayas quedado con ganas de más, si sabes inglés te recomiendo la web de CSS3.info, en la que encontrarás muchas otras funcionalidades. También te recomiendo los siguientes artículos de CSS3 de este blog:

14 Herramientas de CSS3 y HTML5 Muy Útiles
10 Tutoriales para Llevar tus Conocimientos de CSS3 al Cielo
Las 5 Mejores Herramientas de CSS3 para Diseño Web
Redimensiona el background usando CSS3


Comentarios

  • Oscar

    Muy buen articulo. Realmente CSS3 hace que el diseño se agilice mucho. Una duda que tengo es que si el navegador no soporta CSS3, entiendo que el diseño se adaptará al CSS básico y no dará lugar a errores. ¿no?.

    • Sandra

      exacto, simplemente no implementará las funcionalidades de CSS3

  • Ricardo ツ

    El problema es que -moz- y -webkit- no valida el codigo ademas de que en IE 8 y anteriores no funcionan las esquinas redondeadas ni las sombras a no ser que tires mano de JS

    En cuanto a la pregunta de Oscar, si, si el navegar no interpreta CSS3, como por ejemplo IE7 las esquinas redondeadas se veran cuadradas y las sombras no se veran.

    • Sandra

      Sí, eso está claro, a partir de aquí cada uno ha de decidir si prefiere añadir funcionalidades de CSS3 o no..