DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
16-02-2015

calc es una función disponible en CSS3 que permite realizar operaciones matemáticas desde el propio CSS; las operaciones de sumar ( + ), restar ( - ), multiplicar ( * ) y división ( / ) son soportadas a través de la función calc.

Sumando distintos tipos de medidas con la función calc

Con la función calc podemos aplicar operaciones matemáticas a los distintos tipos de medidas en una misma operación; es decir podemos hacer operaciones como la siguiente:

calc(100% - 2*5px - 2*10px - 2px);

Finalmente, asignamos la función a cualquier propiedad de medida de algún elemento HTML; por ejemplo:

.miclase {
	height : calc(100% - 2*5px - 2*10px - 2px);
}

La función calc y el responsive

Entre las medidas fundamentales para el Responsive Web Design esta la de porcentajes (%) ampliamente utilizados para hacer que los sitios se adapten a multiples resoluciones:

Los porcentajes en conjunto con esta función permite personalizar a un mayor grado la exactitud de la posición de los objetos en el contenido HTML; veamos unos ejemplos para entender esto en detalle:

La función calc en la práctica

Cuando queremos diseñar un contenedor como el siguiente:

CSS Función calc con contenedores

Vemos que tiene varios propiedades definidas presentes como margen (margin), margen interno (padding), bordes (border), etc, lo que conlleva a aumentar el tamaño del contenedor y por ende complicar cuando queremos tener varios contenedores del mismo tamaño alineados en el eje horizontal y minimizar el espacio perdido (es decir espacio, que no forme parte del contenedor).

Supongamos que queremos crear cuatro (4) contenedores que deben de estar alineados y tener el mismo ancho, largo y ocupar el mayor tamaño posible dejando un espacio entre ellos como vimos en la imagen anterior.

Lo primero que se nos ocurre es colocarle a todos los contenedores con un mismo ancho (width) de 25%; además necesitaremos algunas otras propiedades como las siguientes:

.example1 div{
	float : left;
	margin : 10px 0 10px 10px;
	padding : 5px;
	background:#CCC;

}

Y obtenemos:

Lo que se aleja del diseño original ya que solo tres (3) de los contenedores están posicionados conjuntamente.

¿Porqué sucede esto?

Como indicamos anteriormente, cuando empleamos otras propiedades como margenes (margin), margenes interno (padding), bordes (border) estos afectan directamente el tamaño de nuestro contenedor y por lo tanto resulta en contenedores de un tamaño algo mayor a 25%; para ser precisos y siguiendo nuestro ejemplo el tamaño de cada contenedor sería algo como:

/* ancho + margen derecho + margen izquierdo + padding derecho + padding izquierdo + borde derecho + borde izquierdo*/
 	largo contenedor =  25% + 10px + 10px + 5px + 5px + 3px + 3px;

O lo que es lo mismo:

 	largo contenedor =  25% + 2*10px + 2*5px +2*3px;

Obviamente sumando los cuatro contenedores darían un valor mayor a 100% y no podemos alinear los contenedores en la misma línea.

Con la función calc podemos restar todas estas propiedades del ancho (margen (margin), margen interno (padding) y bordes (border)) y obtener el efecto deseado:

width : calc(25% - 2*5px - 10px - 2px);

Un caso parecido ocurre cuando queramos calcular el largo del contenedor:

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

Finalmente queda definida la regla como:

.example1 div{
	float : left;
	margin : 10px 0 10px 10px;
	padding : 5px;
 	width : calc(25% - 2*5px - 10px - 2px);
	min-height : calc(100% - 2*5px - 2*10px - 2px);
	background:#CCC;
}

Ahora obtenemos como resultado:

La función calc, contenedores y la propiedad position

Veamos otro ejemplo empleando la función calc en conjunto de la propiedad position.

Queremos obtener el mismo efecto; es decir, alinear contenedores en el eje horizontal maximizando el espacio total en cada contenedor; pero a diferencia del caso anterior, los contenedores rompen con el flujo normal de la página a través de la propiedad position:

.example1 div{
	position: absolute;
 	width : 25%;
	height : 60%;
	background:#CCC;
	top:calc(50% - 60% / 2);
	border: 1px solid #F00;
}

Esta vez solo tendremos 3 contenedores y por lo tanto cada uno debe de ocupar un 33% de su espacio; en este 33% debe de comprender los margenes (margin), margenes internos (padding) y bordes (border.

Al ser contenedores posicionados con la propiedad position, emplear propiedades como el margen no tendrán ningún efecto en el mismo, por lo tanto debemos de simular el margen con la propiedad left o right para que queden espaciados entre los contenedores:

.example1 div:nth-child(1) {
 	left : calc(0% + 6.25%);
}
.example1 div:nth-child(2) {
 	left : calc(25% + 6.50%*2);
}
.example1 div:nth-child(3) {
 	left : calc(50% + 6.25%*3);
}

Y obtenemos:

Podrás encontrar la compatibilidad entre los navegadores en el siguiente enlace calc CSS.


Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Creando un pulso con CSS

Creando un pulso con CSS

Efectos hover con CSS

Efectos hover con CSS

Atomo con CSS

Atomo con CSS

Algunos artículos que te pueden interesar

Múltiples columnas con CSS3

Múltiples columnas con CSS3

Con la propiedad Multi-column de CSS3 podemos dividir nuestro párrafos en columnas; utilizando algunos atributos.

Andrés Cruz 28-10-2013

Cómo capturar videos desde la cámara con PhoneGap

Cómo capturar videos desde la cámara con PhoneGap

Andrés Cruz 08-05-2017

¿Cómo crear un checkbox personalizado en CSS?

¿Cómo crear un checkbox personalizado en CSS?

En esta entrada veremos cómo crear un checkbox custom o personalizados con solo CSS, con esto se quiere decir que no se emplea la renderización realizada por defecto por los navegadores.

Andrés Cruz 09-07-2015