DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
22-01-2015

En esta entrada veremos un pequeño truco que permite que los bordes de los contenedores de nuestros elementos HTML; se vean transparentes.

Bordes transparentes

Este truco es realmente sencillo; si queremos tener unos bordes transparentes como el siguiente:

Esto es un monto de texto sin sentido que tiene la finalidad de mostrar cómo se ven los bordes transparente de un contenedor flotante. Esto es un monto de texto sin sentido que tiene la finalidad de mostrar cómo se ven los bordes transparente de un contenedor flotante. Esto es un monto de texto sin sentido que tiene la finalidad de mostrar cómo se ven los bordes transparente de un contenedor flotante. Esto es un monto de texto sin sentido que tiene la finalidad de mostrar cómo se ven los bordes transparente de un contenedor flotante. Esto es un monto de texto sin sentido que tiene la finalidad de mostrar cómo se ven los bordes transparente de un contenedor flotante. Esto es un monto de texto sin sentido que tiene la finalidad de mostrar cómo se ven los bordes transparente de un contenedor flotante. Esto es un monto de texto sin sentido que tiene la finalidad de mostrar cómo se ven los bordes transparente de un contenedor flotante. Esto es un monto de texto sin sentido que tiene la finalidad de mostrar cómo se ven los bordes transparente de un contenedor flotante. Esto es un monto de texto sin sentido que tiene la finalidad de mostrar cómo se ven los bordes transparente de un contenedor flotante. Esto es un monto de texto sin sentido que tiene la finalidad de mostrar cómo se ven los bordes transparente de un contenedor flotante. Esto es un monto de texto sin sentido que tiene la finalidad de mostrar cómo se ven los bordes transparente de un contenedor flotante.

Mis bordes transparentes con un poco de CSS.

Debemos de hacer dos cosas

Creando bordes transparente

Si queremos crear un borde de color negro que tenga un 50% de transparencia debemos de aplicar el siguiente color RBGA en nuestro borde:

rgba(0, 0, 0, 0.5);

Y la propiedad background-clip empleamos esta propiedad precisamente para evitar que el color de fondo se muestre detrás borde y arruine el efecto:

background-clip: padding-box; 

Quedando definida parte de nuestra regla CSS como:

border: 20px solid rgba(0, 0, 0, 0.5);
background-clip: padding-box; 

Finalmente obtenemos el siguiente efecto:

Esto es un monto de texto sin sentido que tiene la finalidad de mostrar cómo se ven los bordes transparente de un contenedor flotante. Esto es un monto de texto sin sentido que tiene la finalidad de mostrar cómo se ven los bordes transparente de un contenedor flotante. Esto es un monto de texto sin sentido que tiene la finalidad de mostrar cómo se ven los bordes transparente de un contenedor flotante. Esto es un monto de texto sin sentido que tiene la finalidad de mostrar cómo se ven los bordes transparente de un contenedor flotante. Esto es un monto de texto sin sentido que tiene la finalidad de mostrar cómo se ven los bordes transparente de un contenedor flotante. Esto es un monto de texto sin sentido que tiene la finalidad de mostrar cómo se ven los bordes transparente de un contenedor flotante. Esto es un monto de texto sin sentido que tiene la finalidad de mostrar cómo se ven los bordes transparente de un contenedor flotante. Esto es un monto de texto sin sentido que tiene la finalidad de mostrar cómo se ven los bordes transparente de un contenedor flotante. Esto es un monto de texto sin sentido que tiene la finalidad de mostrar cómo se ven los bordes transparente de un contenedor flotante. Esto es un monto de texto sin sentido que tiene la finalidad de mostrar cómo se ven los bordes transparente de un contenedor flotante. Esto es un monto de texto sin sentido que tiene la finalidad de mostrar cómo se ven los bordes transparente de un contenedor flotante.

Mis bordes transparentes con un poco de CSS.

Suponiendo que queramos un color rojo en el borde:

border: 20px solid rgba(255, 0, 0, 0.5);

Y obtenemos:

Esto es un monto de texto sin sentido que tiene la finalidad de mostrar cómo se ven los bordes transparente de un contenedor flotante. Esto es un monto de texto sin sentido que tiene la finalidad de mostrar cómo se ven los bordes transparente de un contenedor flotante. Esto es un monto de texto sin sentido que tiene la finalidad de mostrar cómo se ven los bordes transparente de un contenedor flotante. Esto es un monto de texto sin sentido que tiene la finalidad de mostrar cómo se ven los bordes transparente de un contenedor flotante. Esto es un monto de texto sin sentido que tiene la finalidad de mostrar cómo se ven los bordes transparente de un contenedor flotante. Esto es un monto de texto sin sentido que tiene la finalidad de mostrar cómo se ven los bordes transparente de un contenedor flotante. Esto es un monto de texto sin sentido que tiene la finalidad de mostrar cómo se ven los bordes transparente de un contenedor flotante. Esto es un monto de texto sin sentido que tiene la finalidad de mostrar cómo se ven los bordes transparente de un contenedor flotante. Esto es un monto de texto sin sentido que tiene la finalidad de mostrar cómo se ven los bordes transparente de un contenedor flotante. Esto es un monto de texto sin sentido que tiene la finalidad de mostrar cómo se ven los bordes transparente de un contenedor flotante. Esto es un monto de texto sin sentido que tiene la finalidad de mostrar cómo se ven los bordes transparente de un contenedor flotante.

Mis bordes transparentes con un poco de CSS.

Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Corazón con CSS

Corazón con CSS

Calendario de cubo

Calendario de cubo

Modelo de tarjetas con CSS

Modelo de tarjetas 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

Creando un input radio personalizado con solo CSS

Creando un input radio personalizado con solo CSS

Se explica cómo crear un input radio personalizado con solo CSS a través de un un indicador y animaciones y transiciones en CSS.

Andrés Cruz 23-05-2016

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