La función calc()

facebook-svg gplus-svg twitter-svg

La función calc() de CSS3 nos permite realizar operaciones matemáticas sencillas como: sumar ( + ), restar ( - ), multiplicar ( * ) o dividir ( / ), y puede ser utilizada siempre que se trate de valores numéricos cómo: longitud, frecuencia, duración, ángulo o número.

section {
      height: calc(100% - 2*10px);
  }

Se nos dijo de pequeños que no es posible "sumar manzanas con naranjas". La función calc() hace esto posible: podemos sumar, restar, o lo que sea, pixeles ( px ) con em, porcentajes ( % ) con pixeles ( px ), ya que una de las habilidades de calc() es mezclar unidades.

En el siguiente ejemplo queremos construir dos cajas ( <div class="calcTest"> ) cuyo tamaño varía en función del tamaño de la caja contenedor (<div id="contenedorCalc"> )

Para ser más exactos: la altura de .calcTest es igual a la altura del contenedor #contenedorCalc ( 100% ) de la cual restamos el margen ( 2*10px ), el padding ( 2*10px ), y el borde ( 2px ).

height: calc(100% - 2*10px - 2*20px - 2px);

Calculamos la anchura de las cajas  .calcTest: la mitad del ancho del contenedor #contenedorCalc ( 50% ) menos el margen, el padding  y el borde.

width:  calc(50% - 2*10px - 2*20px - 2px);

div[id^="contenedorCalc"]{ 
   width:80%;
   height:200px;
   border:1px solid #d9d9d9;
   margin:10px auto; 
   padding:10px; 
} 
.calcTest{
   float:left;
   border:1px solid #d9d9d9; 	
   margin:10px; 	
   padding:20px; 	
   background-color:#efefef; 	
   height: calc(100% - 2*10px - 2*20px - 2px); 	
   width:  calc(50% - 2*10px - 2*20px - 2px); 	     
}

Pruebe redimensionar la pagina.

Calcular la posición del background

Podemos posicionar las imágenes de fondo relativamente a la esquina izquierda arriba de la caja con background-position. Esto ya lo sabemos.

background-position: x y;

Utilizando la función calc() podemos posicionar las imágenes de fondo también relativamente a la esquina derecha abajo: algo muy útil en el caso de las páginas adaptativas.

background-position: calc(100% - x) calc(100% - y);

En el siguiente ejemplo posicionamos un grano de café a 20px de la esquina derecha abajo.


.calcImg{
    background-image:url(images/cafe.png);
	background-repeat:no-repeat;
	background-position:calc(100% - 20px) calc(100% - 20px);
}

Pruebe redimensionar la pagina.