CSS3 - Esquinas redondeadas, sombra, degradado y opacidad

Elpingo · #1

CSS 3 supone una revolución en el diseño web, aportando soluciones a los diseñadores para decorar las páginas web. Esto quiere decir que, muchas de las cosas que antes hacíamos con técnicas de diseño que requerían uso de imágenes, como las sombras o las esquinas redondeadas, a partir de ahora las vamos a poder especificar simplemente desde CSS.

En sí, CSS3 no es algo reciente, lleva casi 2 años en su proceso de implementación y podemos decir que estamos cerca de que el W3C lo implemente definitivamente.

Como siempre sucede, el problema principal resulta ser IE, en principio los atributos en CSS3 para redondear, crear sombras y demás, fueron desarrollados para Mozilla y su navegador Firefox, inmediatamente se sumó Webkit y Opera a su implementación.

WebKit es una plataforma para aplicaciones que funciona como base para el navegador web Safari, Google Chrome, Epiphany, Midori entre otros. Está basado originalmente en el motor de renderizado KHTML del navegador web del proyecto KDE, Konqueror.

Aqui les voy a mostrar como crear una caja con esquinas redondeadas, sombra y degradado.

Veamos los atributos en CSS3:

-moz-box-shadow:0px 0px 17px #000000; > Sombra
-moz-border-radius:11px; > Radio (Esquinas redondeadas)
background: -moz-linear-gradient(top, #00ff60, #00e2ff); > Degradado o Gradiente
El atributo que genera la sombra sería box-shadow, pero como dije anteriormente en principio fue implementado solo para Firefox, de ahí el prefijo -moz- que vemos en el atributo, lo mismo sucede para los navegadores Safari, Chrome y otros, donde tendremos que agregar una nueva linea con el atributo pero esta vez anteponiendo -webkit-, solo en el caso de Opera que ya soporta el atributo como si estuviera implementado, agregan una nueva linea pero sin anteponer ningun prefijo, solo box-shadow.
Para el caso de IE9 que soporta redondeado y sombra, pero no así el degradado, agregan una linea con el atributo background-color: definiendo el color en valor hexadecimal.

De esta manera cubrimos las necesidades de los navegadores más utilizados, solo en IE9 en lugar del degradado se verá un color uniforme.

Ahora bien, el código resulta ser un poco más elaborado, para eso directamente pasemos a un ejemplo práctico.

Para crear una caja de 500px X 500px con bordes redondeados, sombra y degradado, utilizamos este código:

Código: Seleccionar todo

.content {
        background-color:#ff0000; 
	-moz-border-radius:17px;
	-webkit-border-radius:17px;
	border-radius:17px;
	/*IE7/8 NO SOPORTA ESQUINAS REDONDEADAS*/
        -moz-box-shadow:0px 0px 10px #000000;
	-webkit-box-shadow:0px 0px 10px #000000;
	box-shadow:0px 0px 10px #000000;
	/*IE7/8 NO SOPORTA PROPIEDADES DE SOMBRA - IE9 NO SOPORTA FONDOS DEGRADADOS*/
        background: -moz-linear-gradient(top, #0000ff, #00ff00);
	background: -webkit-gradient(linear, center top, center bottom, from(#0000ff), to(#00ff00));
	background: -o-linear-gradient(top, #0000ff, #00ff00);
	height: 500px;
	width: 500px;
}

Si observan el código pueden ver en los atributos
background: -moz-linear-gradient,
background: -webkit-gradient y
background: -o-linear-gradient,
están definidos ciertos valores como top, center bottom y el color en hexadecimal.

Desde estos valores pueden jugar para orientar la linea del degradado en vertical, horizontal o transversal.

En el atributo box-shadow tambien se definen valores en pixels y color hexadecimal, estos valores se interpretan de la siguiente manera por el orden de aparición: (Ejemplo: box-shadow: 5px -9px 3px #000000; )

Desplazamiento horizontal de la sombra: La sombra de un elemento suele estar un poco desplazada con respecto al elemento que la produce y su posición será en función del ángulo con el que llegue la luz. En el caso de este ejemplo el primero de los valores, 5px, quiere decir que la sombra aparecerá 5 píxeles a la derecha. Si la sombra quisiéramos que apareciera un poco hacia la izquierda del elemento original que la produce, pondríamos un valor negativo a este atributo. Cuanto más desplazamiento tenga una sombra, el elemento que la produce parecerá que está más separado del lienzo de la página.

Desplazamiento vertical de la sombra: El segundo valor que colocamos en el atributo box-shadow es el desplazamiento vertical de la sombra con respecto a la posición del elemento que la produce. Este valor es similar al desplazamiento horizontal. Valores positivos indican que la sombra aparecerá hacia abajo del elemento y valores negativos harán que la sombra aparezca desplazada un poco hacia arriba. En el caso del anterior ejemplo, con -9px estamos indicando que la sombra aparecerá desplazada 9 píxeles hacia arriba del elemento.

Difuminado: El tercer valor indica cuánto queremos que esté difuminado el borde de la sombra. Si el difuminado fuera cero, querría decir que la sombra no tiene ningún difuminado y aparece totalmente definida. Si el valor es mayor que cero, como en nuestro ejemplo 3px, quiere decir que la sombra tendrá un difuminado de esa anchura, 3 píxeles en el ejemplo.

Color de la sombra: El último atributo que se indica en el atributo box-shadow es el color de la sombra. Generalmente las sombras en el mundo real tienen un color negro o grisaceo, pero con CSS3 podremos indicar cualquier gama de color para hacer la sombra, lo que nos dará bastante más versatilidad a los diseños gracias a la posible utilización de sombras en distintos colores, que puedan combinar mejor con nuestra paleta. En el ejemplo anterior habíamos indicado una sombra con color negro.

Por último si quieren agregar transparencia simplemente agregan el atributo opacity:0.5; el valor 0.5 es el grado de transparencia el cual podrán variar de acuerdo a la opacidad que quieran darle a la caja.
Nota: Este atributo transparenta todo lo que se encuentro dentro de la caja. (Texto, imágenes, etc.)

Bueno, esto es todo, creo haberles dado una completa explicación sobre estos atributos en CSS3 y espero les sea de utilidad.
Ya pueden ir haciendo sus pruebas y dentro de poco podrán aplicarlo a sus plantillas y seguramente mejorarán el tiempo de carga, cuestión que se vuelve imperante al momento de crear una página web.

Importante: Algo que me olvidadaba es que el atributo de la sombra tiene la contra de que hay que especificar un alto en el tamaño de la caja, es decir que no pueden definirlo en auto.

Aqui les dejo un ejemplo sobre las cajas para que vean una demo incluso con areas de texto, pueden copiar el código fuente y realizar sus pruebas.
El código que está en la demo está comentado para que puedan ubicarse y entender rápidamente.

http://crakinet.com/tests/css3/pruebas.html

Saludos!