Crea bordes multicolores usando CSS

La propiedad de borde CSS tiene algunas opciones de personalización, como opciones como sólido, discontinuo, punteado, etc. Sin embargo, cuando se trata del color del borde, solo podemos tener un color sólido por lado. Pero, hay otra forma de lograr una línea multicolor usando algunas propiedades más en las que quizás no hayas pensado, echemos un vistazo.

Sólido

punteado

Punteado

Bordes multicolores

Para lograr un borde multicolor como el que se muestra arriba, usaremos la propiedad position y el selector ::after con un degradado de color. Primero, crearemos un área de encabezado usando una clase HTML <div> y luego la diseñaremos con CSS para tener un borde multicolor que la divida y el contenido a continuación.

Crea tu HTML:

 <div class="ost-multi-header"> <h1> Header Title </h1> </div>

 <div class="ost-multi-header"> <h1> Header Title </h1> </div>

Ahora, diseñémoslo un poco con CSS.

 h1{ font-size: 50px; line-height: 100px; padding-left: 20px; font-family: Arial, Helvetica, sans-serif; } .ost-multi-header { position: relative; height: 100px; background: #999999; }

 h1{ font-size: 50px; line-height: 100px; padding-left: 20px; font-family: Arial, Helvetica, sans-serif; } .ost-multi-header { position: relative; height: 100px; background: #999999; }

Ahora deberías tener algo parecido a esto:

Con eso, ahora podemos agregar ::after al .ost-multi-header selector . Pero, antes de hacerlo, me gustaría explicar un poco lo que está haciendo ::after y por qué necesitamos la propiedad de posición para el borde multicolor. ::after crea un pseudo-elemento con lo que sea que esté en la propiedad de contenido al final del elemento seleccionado. En nuestro caso, ese elemento es .ost-multi-header . Hagamos un tradicional "¡Hola mundo!" ejemplo para ilustrar.

Agregue esto a su CSS:

 .ost-multi-header::after{ content: 'Hello World!'; position: absolute; left: 20px; bottom: 0; }

 .ost-multi-header::after{ content: 'Hello World!'; position: absolute; left: 20px; bottom: 0; } 

Como puede ver, ahora tenemos un "¡Hola mundo!" elemento debajo del título del encabezado. Debido a que nuestro elemento principal, .ost-multi-header , tiene la propiedad de posición como relative , podemos darle a un elemento secundario una posición absolute . Esto nos permitirá mover fácilmente nuestro nuevo pseudo-elemento que creamos con ::after donde queramos dentro del elemento principal. Lo colocamos en la parte inferior y lo movemos 20 px desde la izquierda dentro del elemento principal. Tenga en cuenta que si el elemento principal no tuviera la propiedad de posición establecida en relativa, entonces nuestro elemento de posición absoluta estaría en la parte inferior y 20 px a la izquierda de la ventana gráfica del navegador.

¿Qué pasa con nuestro borde de color? Vamos a diseñar el fondo de nuestro pseudo-elemento para que sea nuestro borde multicolor usando un degradado. Los degradados CSS pueden ser lineales o radiales. Para nuestro borde, usaremos linear-gradient . Sencillamente, esto nos daría la frontera que buscamos.

 .ost-multi-header::after{ content: ''; height: 6px; position: absolute; left: 0; right:0; bottom: 0; background: linear-gradient(to right, #ed8034 0%,#ed8034 33%,#feb123 33%,#feb123 66%,#2184cd 66%,#2184cd 100%); }

 .ost-multi-header::after{ content: ''; height: 6px; position: absolute; left: 0; right:0; bottom: 0; background: linear-gradient(to right, #ed8034 0%,#ed8034 33%,#feb123 33%,#feb123 66%,#2184cd 66%,#2184cd 100%); }

Pero, reduzcamos la velocidad un momento para un paso a paso. Primero, la propiedad de content todavía está allí aunque esté en blanco. Esto se debe a que, sin la propiedad de content , el pseudoelemento nunca se crea; entonces, lo necesitamos. Necesitamos establecer la altura de nuestro pseudo-elemento, la altura de nuestro borde. ¿Por qué establecer las propiedades left y right en 0? Sin un ancho establecido, esto estirará el pseudoelemento para que tenga el 100% del ancho dentro del elemento principal. Puede parecer mucho, pero la configuración linear-gradient solo indica que el color fluya de izquierda a derecha, y ponemos los colores que queremos en ciertos porcentajes del fondo.

A pesar de que todo lo que estamos haciendo es elegir qué colores serán en porcentajes específicos, es mucho trabajo de campo. Afortunadamente, existen recursos gratuitos en línea que ayudan enormemente con los degradados de color. Ultimate CSS Gradient Generator de ColorZilla es una gran herramienta que incluye múltiples propiedades de degradado para admitir navegadores más antiguos.

Ya tenemos un gradiente configurado en la herramienta, por lo que podemos usar este enlace para ver la configuración exacta utilizada en este tutorial: https://colorzilla.com/gradient-editor/#ed8034+0,ed8034+33,feb123+33 ,feb123+66,2184cd+66,2184cd+100. Debe tener un aspecto como este:

Hay muchas configuraciones en este sitio, pero centrémonos en qué configuraciones necesitamos para crear el aspecto que vamos a usar para nuestro borde. Vamos a desglosarlo:

1. Presets - ¡Estos pueden ser un excelente punto de partida!
2. Barra deslizante : puede agregar, eliminar y editar colores aquí
3. Paradas : esta sección le permite cambiar la configuración de la opacidad y la ubicación de cada color. Simplemente haga clic en el cuadro de color en el control deslizante de arriba para cambiar cuál está controlando en esta sección.
4. Vista previa : aquí puede ver inmediatamente los resultados de sus cambios.
5. Orientación y tamaño : esto le permite cambiar de horizontal, vertical, diagonal o radial. Y para establecer el tamaño del degradado.
6. Código CSS : el código generado con un enlace permanente para que siempre pueda volver y editar su degradado fácilmente.

En nuestro caso, no buscábamos un degradado difuminado, sino una transición sólida y plana entre dos colores, por lo que todo lo que tenemos que hacer es apilar los dos colores uno encima del otro donde queremos que esto suceda. En nuestro ejemplo, apilamos colores al 33 % y al 66 % respectivamente.

Siéntase libre de jugar con la configuración, sabiendo que lo que ve en la vista previa es lo que generará el código. Cuando obtenga la configuración de apariencia que desea, puede usar el botón "copiar" en la parte inferior derecha del cuadro de código.

Si copió el código como lo tenía en el enlace, su CSS final se verá así:

 h1{ font-size: 50px; line-height: 100px; padding-left: 20px; font-family: Arial, Helvetica, sans-serif; } .ost-multi-header { position: relative; height: 100px; background: #999999; padding-bottom: 6px; } .ost-multi-header::after{ content: ''; height: 6px; position: absolute; left: 0; right: 0; bottom: 0; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ed8034+0,ed8034+33,feb123+33,feb123+66,2184cd+66,2184cd+100 */ background: rgb(237,128,52); /* Old browsers */ background: rgb(237,128,52); /* Old browsers */ background: -moz-linear-gradient(left, rgba(237,128,52,1) 0%, rgba(237,128,52,1) 33%, rgba(254,177,35,1) 33%, rgba(254,177,35,1) 66%, rgba(33,132,205,1) 66%, rgba(33,132,205,1) 100%); /* FF3.6-15 */ background: -moz-linear-gradient(left, rgba(237,128,52,1) 0%, rgba(237,128,52,1) 33%, rgba(254,177,35,1) 33%, rgba(254,177,35,1) 66%, rgba(33,132,205,1) 66%, rgba(33,132,205,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: -webkit-linear-gradient(left, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ background: linear-gradient(to right, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed8034', endColorstr='#2184cd',GradientType=1 ); /* IE6-9 */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed8034', endColorstr='#2184cd',GradientType=1 ); /* IE6-9 */ }

 h1{ font-size: 50px; line-height: 100px; padding-left: 20px; font-family: Arial, Helvetica, sans-serif; } .ost-multi-header { position: relative; height: 100px; background: #999999; padding-bottom: 6px; } .ost-multi-header::after{ content: ''; height: 6px; position: absolute; left: 0; right: 0; bottom: 0; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ed8034+0,ed8034+33,feb123+33,feb123+66,2184cd+66,2184cd+100 */ background: rgb(237,128,52); /* Old browsers */ background: rgb(237,128,52); /* Old browsers */ background: -moz-linear-gradient(left, rgba(237,128,52,1) 0%, rgba(237,128,52,1) 33%, rgba(254,177,35,1) 33%, rgba(254,177,35,1) 66%, rgba(33,132,205,1) 66%, rgba(33,132,205,1) 100%); /* FF3.6-15 */ background: -moz-linear-gradient(left, rgba(237,128,52,1) 0%, rgba(237,128,52,1) 33%, rgba(254,177,35,1) 33%, rgba(254,177,35,1) 66%, rgba(33,132,205,1) 66%, rgba(33,132,205,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: -webkit-linear-gradient(left, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ background: linear-gradient(to right, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed8034', endColorstr='#2184cd',GradientType=1 ); /* IE6-9 */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed8034', endColorstr='#2184cd',GradientType=1 ); /* IE6-9 */ }

Y ese CSS producirá este subrayado multicolor que responde completamente:

¡Aquí vamos! No tuvimos que agregar el relleno de 6px en la parte inferior de .ost-multi-header , pero el elemento secundario en posición absolute ya no afecta la altura del elemento principal. Podemos dejar que flote sobre nuestro contenido en el elemento principal, o agregar padding para asegurarnos de que no cubra ningún contenido que no queramos obstruir.

Aquí hay un enlace a este ejercicio recreado en CodePen para que todos lo editen y aprendan sin preocupaciones.

Una nota final, algunos navegadores antiguos solo admiten el selector de dos puntos :after , y no el estándar moderno doble ::after . Puede usar los dos puntos individuales si desea estar seguro. También funcionará en navegadores modernos por ahora.