DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
13-04-2015

En esta entrada veremos como crear bordes que no influyan en el tamaño del contenedor; como bien sabrás al definir distintas propiedades como padding, margin y/o border éstas repercuten directamente en el tamaño del contenedor; es decir:

ancho_total = width + 2*border + 2*padding + 2*margin = 300px + 2*5px + 2*7px +2*5px = 334px;
largo_total = height + 2*border + 2*padding + 2*margin = 150px + 2*5px + 2*7px +2*5px = 184px;

Una ayuda visual de lo anteriormente expuesto:

BOrdes tradicionales en CSS

¿Bordes internos en CSS?

Cuando nos referimos a "bordes internos" queremos decir que son un tipo de bordes que no influyen en el tamaño del contenedor y pueden ser muy útil como en el siguiente ejemplo:

1
2
3

Prueba redimensionar la ventana de tu navegador.

Como habrás notado en el ejemplo anterior; estos tres contenedores ocupan un 33% del ancho total del contenedor; si los bordes fueran los tradicionales:

1
2
3

El tercer contenedor no podría estar alineado en la misma fila.

Creando bordes internos en CSS

Al emplear la propiedad box-shadow es muy fácil crear bordes internos; además aprovechamos para explicar un poco el funcionamiento de la propiedad box-shadow lo cual haremos a continuación:

box-shadow: inset offset-x offset-y blur-radius spread-radius color

Bordes internos por lados en CSS

Para crear los bordes superior, inferior, derecho e izquierdo solo debemos de establecer el ancho que deseemos que tenga el borde en el parámetro spread-radius:

Bordes superior en CSS de 13 píxeles:

box-shadow: inset 0 13px 0 0 #08B;
Borde de 13px

Bordes izquierdo en CSS de 13 píxeles:

box-shadow: inset 13px 0 0 0 #08B;
Borde de 13px

Bordes derecho en CSS de 13 píxeles:

box-shadow: inset -13px 0 0  #08B;
Borde de 13px

Bordes inferior en CSS de 13 píxeles:

box-shadow: inset 0 -13px 0  #08B;
Bordes de 3px

Bordes internos simétricos en CSS

Para crear bordes internos simétricos en CSS podemos hacer lo siguiente:

Bordes internos simétricos en CSS de 3 píxeles:

box-shadow: inset 0 0 0 3px #08B;
Bordes de 3px

Bordes internos simétricos en CSS de 7 píxeles:

box-shadow: inset 0 0 0 7px #08B;
Bordes de 7px

Bordes internos simétricos en CSS de 13 píxeles:

box-shadow: inset 0 0 0 13px #08B;
Bordes de 13px

Bordes por diagonales en CSS

Bordes por diagonales en CSS de 13 píxeles:

box-shadow: inset -13px -13px 0 0 #08B;
Bordes de 13px

Bordes por diagonales en CSS de 13 píxeles:

box-shadow: inset 13px -13px 0 0 #08B;
Bordes de 13px

Bordes por diagonales en CSS de 13 píxeles:

box-shadow: inset 13px 13px 0 0 #08B;
Bordes de 13px

Bordes por diagonales en CSS de 13 píxeles:

box-shadow: inset -13px -13px 0 0 #08B;
Bordes de 13px

Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Corazón con CSS

Corazón con CSS

Ley del cuadrado inverso con CSS

Ley del cuadrado inverso con CSS

3D Box Control conTweenMax

3D Box Control conTweenMax

Algunos artículos que te pueden interesar

Creando un loader animado con solo CSS

Creando un loader animado con solo CSS

Se explica cómo crear un loader con solo CSS con una sencilla animación.

Andrés Cruz 12-09-2016

Mostrando transiciones de imágenes como fondo con CSS

Mostrando transiciones de imágenes como fondo con CSS

En esta entrada se explicará una forma de mostrar transiciones suaves de imágenes en el fondo de una página HTML.

Andrés Cruz 07-05-2015

La pseudo-class :target en CSS

La pseudo-class :target en CSS

Este selector o pseudo-class es empleado para seleccionar o dar estilo a un único elemento cuyo id coincida en alguno de los elementos HTML.

Andrés Cruz 23-02-2015