CSS3 : Sombras y bordes redondeados
Categorías : HTML, CSS, Programación.
Hoy para variar un poco y como estoy bastante puesto en el tema últimamente vamos a ver varios efectos CSS3 referentes al sombreado de texto/objetos y a redondear rectángulos/cuadrados.
Ya aviso que Internet explorer 9 no soporta el sombreado de textos, y a pesar de que este efecto no sea compatible con explorer ya he visto más de una web que lo utiliza sin ningún tipo de remordimientos, es mas yo en mi web tengo muy poco en cuenta a internet explorer, y si alguien se atreve a entrar con él, verá como el muñequito rojo de abajo a la derecha le mete bronca. Por no hablar de que internet explorer 6 y 7 directamente no son soportados por esta web y te manda a un enlace simple que explica el porqué.
box-shadow
La propiedad box-shadow tiene como objetivo pintar una sombra por debajo de una caja (en esencia cualquier objeto rectangular). Observad los siguientes ejemplos :
Las declaraciones de los cuatro rectángulos en CSS son las siguientes :
.BoxShadow1 { box-shadow: -5px -5px 5px rgba(0,0,0, 0.5) }.BoxShadow2 { box-shadow: 5px -5px 5px rgba(0,0,0, 0.5) }.BoxShadow3 { box-shadow: -5px 5px 5px rgba(0,0,0, 0.5) }.BoxShadow4 { box-shadow: 5px 5px 5px rgba(0,0,0, 0.5) }
Hay bastante confusión sobre el orden de los parámetros, yo antiguamente recuerdo haber tenido más de un problema en ciertos navegadores por el orden de los parámetros, actualmente creo que se soporta el color de la sombra tanto al principio como al final, pero hace tiempo recuerdo que en algún navegador tenía problemas si no los ponía al principio. De todas formas según veo en varias webs se suele especificar al final.
El color se puede poner con rgb(), rgba(), o con hex, y como ya he comentado actualmente creo que funciona tanto si es en el primer parámetro como en el ultimo.
Pero esto no es todo, actualmente se pueden utilizar varias sombras en un mismo objeto. Observad el siguiente ejemplo :
A continuación podéis ver el código CSS que se ha utilizado para este ejemplo :
.BoxShadowMultiple {box-shadow: 10px -10px 10px rgba(255,0,0, 0.6), /* Rojo */-10px -10px 10px rgba(0, 255, 0, 0.6), /* Verde */-10px 10px 10px rgba(0,0,255, 0.6), /* Azul */10px 10px 10px rgba(255,255, 0, 0.6), /* Amarillo */0px 0px 5px 5px rgba(0,0,0, 1.0); /* Negro */}
text-shadow
La propiedad text-shadow funciona de una forma muy similar a box-shadow y su objetivo es pintar una sombra debajo de un texto. Observad el siguiente ejemplo :
Para sombrear los ejemplos anteriores se ha utilizado el siguiente código CSS :
.TextShadow1 { text-shadow: -2px -2px 2px rgba(0,0,0, 0.7); }.TextShadow2 { text-shadow: 2px -2px 2px rgba(0,0,0, 0.7); }.TextShadow3 { text-shadow: -2px 2px 2px rgba(0,0,0, 0.7); }.TextShadow4 { text-shadow: 2px 2px 2px rgba(0,0,0, 0.7); }
Como podéis ver la declaración es prácticamente igual a la de box-shadow, y al igual que box-shadow también se permiten múltiples sombras en el texto. Observad el siguiente ejemplo :
El código del ejemplo anterior es el siguiente :
.TextShadowMultiple {text-shadow: 2px 1px 1px rgba(255, 255, 0, 0.9),4px 2px 2px rgba(200, 50, 0, 0.9),6px 3px 3px rgba(150, 100, 0, 0.9),10px 4px 5px rgba(150, 150, 0, 0.7),14px 5px 8px rgba(200, 200, 0, 0.7),20px 6px 12px rgba(255, 255, 0, 0.5)}
En definitiva hay un gran abanico de posibilidades, pero ojo! no me pongáis text-shadow en todos los textos de la web, o bajara considerablemente la velocidad de renderizado.
border-radius
Esta propiedad permite redondear una o más puntas de cualquier tipo de objeto rectangular. Observad el siguiente ejemplo :
Para el ejemplo anterior se ha utilizado el siguiente código CSS :
.BorderRadius1 { border-radius: 20px 0px 0px 0px; }.BorderRadius2 { border-radius: 0px 20px 0px 0px; }.BorderRadius3 { border-radius: 0px 0px 0px 20px; }.BorderRadius4 { border-radius: 0px 0px 20px 0px; }
La propiedad border-radius se puede utilizar con 4 valores como se ha visto en el ejemplo anterior o directamente con un solo valor, lo que indicara que debe aplicar ese valor a las cuatro esquinas.
En principio border-radius es compatible con box-shadow, por lo que podéis sombrear un rectángulo redondeado sin ningún problema.
Por último os voy a enseñar una pequeña animación con las tres propiedades mencionadas en este documento utilizando la propiedad transition :
Al pasar por encima el ratón si os fijáis bien, las sombras van de derecha a izquierda tanto en el texto como en el rectángulo, y el rectángulo se vuelve un elipse.
Para hacer esta animación he utilizado el siguiente código CSS :
En internet explorer funciona a partir de la versión 9.
.Animacion {width:200px; height:100px; border-color:#000; border-width:1px; border-style:solid; background-color:#00F; color:#FFF; text-align:center; font-size:24px;border-radius:2px;box-shadow: 10px 10px 10px rgba(50, 50, 50, 0.7);text-shadow: 10px 10px 10px rgba(0, 0, 0, 1.0);-webkit-transition-property:border-radius, box-shadow, text-shadow;-webkit-transition-duration:2s, 2s, 2s;transition-property:border-radius, box-shadow, text-shadow;transition-duration:2s, 2s, 2s;}.Animacion:hover {border-radius:50px;box-shadow: -10px 10px 10px rgba(50, 50, 50, 0.7);text-shadow: -10px 10px 10px rgba(0, 0, 0, 1.0);-webkit-transition-property:border-radius, box-shadow, text-shadow;-webkit-transition-duration:2s, 2s, 2s;transition-property:border-radius, box-shadow, text-shadow;transition-duration:2s, 2s, 2s;}
Y esto es todo por esta semana! espero tener un fin de semana sin muchas complicaciones para poder empezar a programar varias cosillas, o de lo contrario la semana que viene no sé que voy a hacer en la web.