6

Aprendiendo CSS3 – Transparencias, bordes redondeados y sombras.

8Feb
en CSS, CSS 3, Tutoriales, Web

Con este tutorial daremos paso a otros tutoriales que escribiré sobre el uso de CSS3. Hoy vamos  a ver cómo crear transparencias, bordes redondeados y sombras.

Abrimos nuestro editor de códigos preferido y preparamos una página html nueva con lo siguiente:

<!DOCTYPE html>
<html lang="es">
	<head>
		<meta charset="utf-8" />
		<title>Aprendiendo CSS3</title>
		<style>
			.box {
				width: 150px;
				height: 100px;
				background: #F50;
				}
		</style>
	</head>
	<body>
		<div class="box"></div>
	</body>
</html>

Por ahora tenemos una caja con anchura 150px y altura 100px y fondo rojo. Lo primero que haremos será cambiarle la transparencia haciendo uso de la propiedad opacity dentro del selector .box. Esta propiedad puede estar entre 0 y 1 donde 0 hace que la caja sea completamente invisible. En el ejemplo a continuación ponemos la transparencia en .5, lo que significa que está visible un 50%.

.box {
	width: 150px;
	height: 100px;
	background: #F50;
	opacity: .5
	}


Otra forma de cambiar la transparencia es usando un modo de color rgba en la propiedad background, el código quedaría de la siguiente forma:

.box {
	width: 150px;
	height: 100px;
	background: rgba(250, 10, 10, .5);
	}

NOTA: Los parámetros del modo de color rgba son (cantidad de rojo, cantidad de verde, cantidad de azul, transparencia). Los valores de los colores no exceden a 255 y la transparencia está entre 0 y 1.

Ahora veremos cómo podemos crear bordes redondeados a nuestra caja haciendo uso de la propiedad border-radius. La forma más sencilla es poniendo solamente cuantos pixeles queremos redondear en la caja.

.box {
	width: 150px;
 	height: 100px;
 	background:#F50;
 	border-radius: 15px;
 	}


También podemos especificar que cuales esquinas queremos redondear haciendo uso de algunas de estas propiedades border-bottom-left-radius, border-bottom-right-radius,  border-top-right-radius,  border-top-left-radius. Aquí vemos un ejemplo con solo dos esquinas redondeadas.

.box {
	 width: 150px;
 	 height: 100px;
	 background:#F50;
	 border-bottom-left-radius: 25px;
	 border-top-right-radius: 15px;
 	}


O simplemente en la propiedad border-radius ponemos el redondeo de las cuatro esquinas.

.box {
	 width: 150px;
	 height: 100px;
	 background:#F50;
	 border-radius: 10px 30px 30px 5px;
	 }


Por último vamos a ver como agregar sombra a nuestra caja haciendo uso de la propiedad box-shadow.

.box {
	 width: 150px;
	 height: 100px;
	 background:#F50;
	 border-radius: 10px 30px 30px 5px;
	 box-shadow: 5px 5px 4px #555;
 }


Para definir la sombra primero ponemos cantidad de pixeles hacia la izquierda (si ponemos valores negativos se mueve hacia la derecha), en segundo lugar van los pixeles para moverla hacia abajo, luego la suavidad de la sombra y por último el color.

Sobre un mismo objeto podemos poner varias sombras separando por comas el conjunto de propiedades.

.box {
	 width: 150px;
	 height: 100px;
	 background:#F50;
	 border-radius: 10px 30px 30px 5px;
	 box-shadow: 5px 5px 4px #555, inset 5px 5px 4px #555;

}

NOTA: Si usamos inset antes de los atributos la sombra será hacia adentro.

Muchas gracias por su atención y espero que hayan aprendido algo nuevo. Nos vemos en un próximo tutorial.

6 Comentarios

  1. zico dice:

    Muy bueno el post. No sabía lo del inset.

  2. erif dice:

    Muy bueno, gracias, espero con ansias los próximod posts sobre el tema.
    Saludos

  3. Para lograr compatibilidad de la opacidad, (opacity) de CSS3 con IE, se puede usar una propiedad específica para este objetivo, y es «filter». Se usa de la siguiente manera:

    filter: alpha(opacity=%);
    Donde % es un valor entre 0 y 100, que sería equivalente al uso de .5 para 50%, lo que en este caso se pone el valor real.

    Ejemplo final:
    filter: alpha(opacity=50);

    Sobre el uso de la propiedad «box-shadow» es importante saber el orden que tiene cada valor, y que significa. Veamos:

    box-shadow: derecha abajo desenfoque color;
    Cuando se usan valores negativos para derecha y abajo, entonces su efecto sería lo inverso:
    box-shadow: -izquierda -arriba desenfoque color;

    En el caso de sombras internas (inset), la teoría varía un poco:
    box-shadow: inset izquierda arriba desenfoque color;
    y cuando se usan valores negativos:
    box-shadow: inset -derecha -abajo desenfoque color;
    En resumen, el efecto para sombras internas es lo opuesto a sombras externas.

    Esta propiedad tiene formas de especificarlas para los diferentes navegadores según sus motores.

    Por ejemplo, una definición válida de box-shadow puede ser:
    -webkit-box-shadow: …
    -moz-box-shadow: …
    box-shadow: …

    Lo mismo se aplica para el uso de bordes redondeados:
    -webkit-border-radius: …
    -moz-border-radius: …
    border-radius: …
    Lo que cuando se desea especificar la redondez de un borde en específico, las declaraciones varían, por ejemplo, si se desea especificar la redondez del borde superior izquierdo de una caja sería:

    -webkit-border-top-left-radius: …
    -moz-border-radius-topleft: …
    border-top-left-radius: …

    Verifiquen bien las diferencias.

    Otro tema es sobre las transiciones, efectos y/o animaciones, y los degradados de fondos. Pero ya ese lo tocará seguro el autor de este post en próximos artículos.

  4. de veras que fue muy útil este post

  5. Saborit dice:

    Por favor he visto este tuto y me ha encantado, no tengo conocimiento de programacion css pero si conosco otros lenguajes como c y object pascal, por favor si tienen algun manual o documento que me enseñe los fundamentos de css3 me pueden enviar a mi correo el mismo gracias

    PD: estoy un poco atras en lo que programacion para la web respecta pero he decidido ponerme al dia y espero contar con ustedes que son los mejores….. gracis y disculpen si este no es el lugar para una peticion…

  6. ELMASTIGRE dice:

    Muy buena las explicaciones.

Dejar un comentario

¿Eres humano? Entonces resuelve esta operación: * Límite de tiempo se agote. Por favor, recargar el CAPTCHA por favor.