Estilos de caja

Colores de fondo

CSS3 nos permite utilizar el modo de color HSB que permite reunir en un solo y único gráfico los modelos colorimétricos RGB y CMJN.

La sintaxis sería: hsl (187, 5%, 84%), donde el primer valor corresponde al tono, el segundo valor a la saturación y el último valor al brillo.

Con la unidad hsla, es posible añadir un cuarto valor opcional, la transparencia. Su valor va de 0, totalmente transparente, a 1, totalmente opaco (sin transparencia).

	#rojo { 
		width: 200px; 
		height: 100px; 
		background-color: hsl(0,96%,42%); 
	} 
	#blanco { 
	   position: relative; 
	   top: -30px; 
	   left: 50px; 
	   width: 200px; 
	   height: 100px; 
	   background-color: hsla(58,95%,95%,.8); 
	}
				

Al igual que para el TSL con transparencia, el modo RGB, ahora acepta la transparencia en unidades rgba().

Ejemplo: background-color: rgba(200,20,10,.5);

La nueva propiedad opacity permite aplicar transparencias a todos los elementos HTML y a sus descendientes.

	#transp { 
		width: 250px; 
		padding: 10px; 
		background-color: blue; 
		opacity: .4;
		text-align: center; 
}			
				

Fondos múltiples

Vamos a comprobar el funcionamiento de la propiedad background que nos permitirá colocar varias imágenes de fondo:

#imagenesMultiples { 
   position: absolute; 
   top:  10px; 
   left: 10px; 
   width: 150px; 
   height: 80px; 
   border: 1px solid #333; 
   background: url("uno.png") top left no-repeat, 
		url("dos.png") top right no-repeat, 
		url("tres.png") bottom left no-repeat, 
		url("cuatro.png") bottom right no-repeat; 
}			
				

#imagenesMultiples2 { 
   width: 400px; 
   height: 250px; 
   border: 1px solid #333; 
   background: url("../img/1.gif") top left repeat-x, 
               url("../img/4.gif") bottom right repeat-y; 
}
				

Bordes con imágenes

	#contenido {
		border-style: solid;
		border-width: 81px 135px 153px 145px;
		-moz-border-image: url(borde.png) 81 135 153 145 repeat;
		-webkit-border-image: url(borde.png) 81 135 153 145 repeat;
		-o-border-image: url(borde.png) 81 135 153 145 repeat;
		border-image: url(borde.png) 81 135 153 145 repeat;
		width: 40%;
		margin-left: 20px;
	}
				

Los argumentos de la propiedad border-image):

• url(''): ruta de acceso a la imagen.
• 20: porción en píxeles de la imagen que se usará para cada elemento decorativo. Vamos a usar 20 píxeles de la imagen para cada elemento. Si el valor es el mismo para todos los lados, bastará con indicar un único valor, que será el equivalente de: 20 20 20 20. Si los valores son diferentes para los distintos lados, indique dichos valores en este orden: arriba, derecha, abajo, izquierda.
• round: permite repetir la imagen y redimensionarla para que ocupe la totalidad del borde, sin que aparezca cortada (los dos otros valores son: stretch para estirar el motivo sobre toda la dimensión del lado y repeat para repetir el motivo, que podría aparecer cortado).

Otras propiedades del fondo

La propiedad background-origin permite definir la posición inicial de una imagen de fondo de una caja. Estos son sus posibles valores:

{background-origin: padding-box;}

{background-origin: border-box;}

{background-origin: content-box;}

La propiedad background-clip permite recortar una imagen de fondo. Utiliza los mismos valores de la propiedad background-origin, con las mismas especificaciones.

{background-clip: padding-box;}

{background-clip: border-box;}

{background-clip: content-box;}

La propiedad background-size permite definir el tamaño de la imagen de fondo en función del elemento que la contenga.

Indicando porcentaje:

En el ejemplo se ha reducido la imagen al 50% del tamaño de la caja que la contiene.

	#tamano1 { 
	   width: 400px; 
	   height: 250px; 
	   border: 1px solid; #333; 
	   background: url("../img/suiza.jpg") no-repeat; 
	   background-size: 50%; 
	}
				

Indicando un valor:

En este ejemplo, la imagen tiene un tamaño fijo, no proporcional.

	#tamano2 { 
	   width: 400px; 
	   height: 250px; 
	   border: 1px solid; #333; 
	   background: url("../img/suiza.jpg") no-repeat; 
	   background-size: 300px 50px; 
	}
				

Cover:

En este ejemplo, el valor cover permite redimensionar proporcionalmente la imagen en un sentido. En este caso se trata de una redimensión horizontal.

	#tamano3 { 
	   width: 400px; 
	   height: 250px; 
	   border: 1px solid; #333; 
	   background: url("../img/suiza.jpg") no-repeat; 
	   background-size: cover; 
	}			
				

Contain:

En este último ejemplo, el valor contain permite redimensionar proporcionalmente la imagen en un sentido que permita su publicación sin que aparezca cortada.

	#tamano4 { 
	   width: 400px; 
	   height: 250px; 
	   border: 1px solid; #333; 
	   background: url("../img/suiza.jpg") no-repeat; 
	   background-size: contain; 
	}
				

Bordes redondeados

Gracias a la propiedad border-radius podemos aplicar bordes redondeados, que pueden incluso ser diferentes para cada una de las esquinas.

	#redondos {  
	   border-radius: 10px 30px 20px 40px;  
	   width: 200px;  
	   height: 90px;  
	   background-color: red;  
	}				

Estos efectos pueden aplicarse a diferentes elementos de la web, como por ejemplo en las tablas:

table {
	border-spacing: 0; 
    width: 500px;
}	

.bordered { 
	border: solid #000 1px; 
    border-radius: 20px;
	background-color: #fff;
    box-shadow: 0px 3px 3px #000; 
}

.bordered td, .bordered th { 
    border-left: 1px solid #ccc; 
    border-top: 1px solid #ccc; 
    padding: 10px; 
    text-align: left; 
}

.bordered th { 
    background-color: #dce9f9; 
    background-image: -webkit-linear-gradient(top, #ebf3fc, #dce9f9); 
    background-image: -moz-linear-gradient(top, #ebf3fc, #dce9f9); 
    background-image: -ms-linear-gradient(top, #ebf3fc, #dce9f9); 
    background-image: -o-linear-gradient(top, #ebf3fc, #dce9f9); 
    background-image: linear-gradient(top, #ebf3fc, #dce9f9); 
    box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
    border-top: none; 
    text-shadow: 0 1px 0 rgba(255,255,255,.5);  
}

.bordered td:first-child, .bordered th:first-child { 
    border-left: none;
}

.bordered th:first-child { 
    border-radius: 20px 0 0 0; 
}

.bordered th:last-child { 
    border-radius: 0 20px 0 0; 
}

.bordered tr:last-child td:first-child { 
    border-radius: 0 0 0 20px; 
}

.bordered tr:last-child td:last-child { 
    border-radius: 0 0 20px 0; 
}

.bordered tr:hover { 
    background: #fbf8e9; 
}