La función calc()
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.