6 maneras de crearate un borde doble en CSS
By
tito kamunya
Los bordes son cruciales en el diseño/desarrollo web, ya que pueden llamar la atención sobre los usuarios o separarlos.ate contenido en una página web. Puede utilizar la abreviatura de borde cuando desee que los cuatro bordes de un elemento HTML sean iguales.
Por otro lado, también puede usar las propiedades manuales de color de borde, estilo de borde y ancho de borde para hacer que cada borde sea diferente/único. Cuando desea especificar el color del borde, usamos el color del borde, usamos el ancho del borde para determinar el ancho del borde y especificamos si un borde será discontinuo, doble o sólido usando la propiedad de estilo de borde.
También puede apuntar a bordes individuales usando propiedades como border-block-start y border-top
Un borde doble es cuando dos líneas paralelas rodean un elemento HTML. Las dos líneas están separadas.ated por un espacio que puede dejarse transparente o rellenarse con una imagen o un color de fondo.
Por ejemplo, podemos tener un botón de registro/inicio de sesión rodeado por un borde doble.
¿Por qué doble borde?
- Separación: Puede utilizar un borde doble para aumentar la legibilidad y la capacidad de escaneo de una página web separando diferentes elementos HTML. Por ejemplo, puedes tener bordes dobles para separarate elementos como encabezados, cuerpo y pies de página en una página web.
- Atractivo visual: Puedes usar colores diferentes o contrastantes en los bordes dobles para hacer que los diferentes elementos sean más visibles.ally atractivo.
- Mostrar jerarquía: Puede distinguir claramente entre los elementos importantes y menos importantes en una página web utilizando bordes dobles.
- Fácil personalización: puedes crearate Diseños personalizados y únicos con la ayuda de dobles bordes. Por ejemplo, puedes cambiar el color o el ancho de cada línea.
- Énfasis: Usando la propiedad de doble borde, puede llamar la atención sobre enlaces o botones específicos en una página web.
Puede utilizar las siguientes formas de crearate el doble borde en CSS.
Uso de la propiedad de estilo de borde
El border-style La propiedad establece el estilo de los cuatro bordes de un elemento. Usamos la palabra clave double para establecer el estilo en este caso. Cuando usamos la palabra clave doble, se crea el relleno automático.ated entre las dos fronteras.
Para fines de demostración, estableceremos el ancho del borde en 15 píxeles. También elegiremos el color de nuestro borde para que sea rojo e indicativo.ate el estilo del borde es doble.
Código HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div class="box"> <h2> Border Property</h2> </div>
</body>
</html>Código CSS:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: flex-start;
gap: 25px;
padding: 15px;
}
div{
width: 350px;
height: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.box{
border-width: 15px;
border-color: red;
border-style: double;
}La salida será:
Usando la función de gradiente lineal ()
Esta función establece un linear gradient como imagen de fondo. El resultado es una transición gradual entre dos colores a lo largo de una línea recta. Usamos la palabra clave to para marcar el punto de inicio de la línea de degradado. Si no se especifica el orden, el valor predeterminado es to bottom.
El siguiente código proporciona nuestra box un ancho de borde de 7px. Luego podemos especificar el gradiente lineal en la propiedad de fondo de cada lado del box.
Código HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div class="box"> <h2>linear-gradient() function</h2> </div>
</body>
</html>Código CSS:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: flex-start;
gap: 25px;
padding: 15px;
}
div{
width: 350px;
height: 350px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.box{
border: 7px solid rgb(36, 85, 7);
background: linear-gradient(to top, #8f0404 7px, transparent 1px),
linear-gradient(to bottom, #8f0404 7px, transparent 1px),
linear-gradient(to left, #8f0404 7px, transparent 1px),
linear-gradient(to right, #8f0404 7px, transparent 1px);
}La salida será:
Uso de la propiedad de contorno
An outline es una línea dibujada fuera del borde de un elemento. Esto logra el efecto de doble borde, y podemos usar un contorno y un borde único. Debemos usar contorno-desplazamiento para agregar un espacio entre el borde y las propiedades del contorno.
Código HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div class="box"> <h2>Outline Property</h2> </div>
</body>
</html>Código CSS:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: flex-start;
gap: 25px;
padding: 15px;
}
div{
width: 350px;
height: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.box{
border: 5px solid red;
outline: 5px solid blue;
outline-offset: -20px;
}La página renderizada aparecerá de la siguiente manera:
Usar box-Propiedad de sombra
El box-shadow La propiedad agrega un efecto de sombra alrededor del marco de un elemento. Puedes tener múltiples box-efectos de sombra separadosated por comas. Comience asegurándose de que las configuraciones de desplazamiento y desenfoque sean zeroy luego establezca las sombras en los tamaños adecuados.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div class="box"> <h2>Box Shadow Property</h2> </div>
</body>
</html>Código CSS:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: flex-start;
gap: 25px;
padding: 15px;
}
div{
width: 350px;
height: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.box{
box-shadow:
0 0 0 5px red,
0 0 0 10px green;
}La página renderizada aparecerá de la siguiente manera:
Uso de la propiedad background-clip
El background-clip La propiedad determina hasta qué punto debe extenderse el fondo dentro de un elemento. La extensión puede estar en el límite.box, relleno-box, o contenido-box.
Código HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div class="box"> <h2>Background-Clip Property</h2> </div>
</body>
</html>Código CSS:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: flex-start;
gap: 25px;
padding: 15px;
}
div{
width: 350px;
height: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.box{
border: 7px solid rgb(36, 85, 7);
padding: 5px;
background-clip: content-box;
background-color: rgb(238, 152, 130);
}La página renderizada aparecerá de la siguiente manera:
Uso de pseudoelementos
Pseudo-elementos, representados por ::before y ::after Los selectores permiten a los diseñadores web diseñar partes de un documento HTML sin agregar marcas al código.
podemos ilustrarate cómo utilizar pseudoelementos para crearate un doble borde usando este código:
Documento HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div class="box"> <h2>pseudo property</h2> </div>
</body>
</html>CO
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: flex-start;
gap: 25px;
padding: 15px;
}
div{
width: 150px;
height: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.box{
background-color: brown;
}
box{
background-color: rebeccapurple;
position: relative;
border: 8px solid red;
}
.box::before{
content: " ";
position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
border: 8px solid green;
border-width: 6px;
border-color: green white green white;
width: 150px;
height: 100px;
}La página renderizada aparecerá de la siguiente manera:
Ejemplos del mundo real de CSS de doble borde
La propiedad CSS de doble borde se utiliza en muchos sitios web. Debe combinar la propiedad de doble borde con otras propiedades de CSS para sacarle el máximo partido. Los siguientes son dos ejemplos del borde doble en acción;
El botón “Carrito” en Amazon
Amazon es uno de los nombres más importantes en el espacio de comercio electrónico. Su botón de carrito tiene un CSS de borde doble para la estética visual y pide a los usuarios que actúen.
Los bordes dobles aparecen cuando un usuario pasa el cursor sobre el botón 'carrito'. Los bordes también son visibles cuando se desplaza sobre el menú de navegación de Amazon.
Mailchimp botones
Mailchimp es un servicio de marketing por correo electrónico que permite a los usuarios crearate, lanzamiento y seguimiento de campañas. Su sitio web utiliza efectos de doble borde en varias secciones. Los botones de registro e inicio de sesión tienen bordes dobles para crearate'un sentido de urgencia como usuarios browse a través.
El borde en la parte inferior de estos botones se vuelve más grueso cuando el usuario pasa el cursor por ellos.
Mejores prácticas al usar el efecto CSS de doble borde
Es fácil dejarse llevar cuando se utiliza CSS doble. El objetivo final es garantizar que los usuarios naveguenate fácilmente y enfatice las áreas principales de su sitio. Siga estas mejores prácticas:
- Usa un estilo consistente: Si usa bordes dobles, asegúrese de que el estilo sea consistente en todos los elementos. Por ejemplo, se pueden usar bordes dobles en los botones de navegación, llamada a la acción y registro/inicio de sesión. Si es posible, asegúrese de tener los mismos colores y grosores de margen en todos los elementos con bordes dobles.
- Asegúrese de que estos bordes dobles funcionen en diferentes dispositivos: Vivimos en un mundo donde la gente browsSitios web electrónicos desde teléfonos inteligentes, PC y tabletas. Pruebe para garantizar que los bordes dobles se muestren como se esperaba en varios tamaños de pantalla.
- Úsalos con moderación: Puede sentirse tentado a abusar de cierto efecto CSS después de descubrirlo por primera vez. Sin embargo, el doble CSS se adapta a varios elementos de una página web. Use esta propiedad solo en áreas donde agrega valor al diseño.
Para Concluir
Hemos destacado los principales enfoques que puede utilizar para crearate un doble borde en CSS. La elección del enfoque dependerá de lo que quieras conseguir con el doble borde y de tus preferencias. Puedes decidir ceñirte a uno o una combinación de varios estilos de doble borde en la misma página.
Puedes ver estos Recursos CSS para comprender las hojas de estilo en cascada en detalle.
