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

Árbol arcoíris creciente

Árbol arcoíris creciente

Corazón con CSS

Corazón con CSS

Loader variados con CSS

Loader variados con CSS

Algunos artículos que te pueden interesar

Efectos con hover y transition en CSS (parte 2) -Filtros-

Efectos con hover y transition en CSS (parte 2) -Filtros-

En esta entrada veremos cómo emplear los Filtros en CSS en conjunto con las transiciones sobre imágenes permiten crear efectos muy llamativos para los filtros soportados.

Andrés Cruz 02-07-2015

Múltiples capas: Efecto de apertura de una puerta con CSS

Múltiples capas: Efecto de apertura de una puerta con CSS

En esta entrada veremos un experimento compuestos por múltiples divs solapados (capas) y emplearemos las transformaciones 3D en CSS en conjunto con el selector hover podremos crear una transición que emula el efecto de apertura de una puerta.

Andrés Cruz 13-08-2015

Como mostrar contenido en filas expandibles con solo CSS

Como mostrar contenido en filas expandibles con solo CSS

En esta nueva entrega, veremos como mostrar contenido por filas en vez de columnas; sin embargo mantendremos el mismo principio.

Andrés Cruz 11-08-2014