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, veámoslas.
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 le aplicaremos estilo con CSS para que tenga un borde multicolor que lo divida y el contenido que se encuentra debajo.
Crea tu HTML: <div class="ost-multi-header">Ahora, vamos a darle un poco de estilo con CSS.
<h1>
Titulo del encabezado
</h1>
</div>
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:
Titulo del encabezado
Con eso, ahora podemos agregar ::after al selector .ost-multi-header. Pero, antes de hacerlo, me gustaría explicar un poco lo que ::after está haciendo y por qué necesitamos la propiedad position para el borde multicolor. El ::after crea un pseudo-elemento con lo que esté en la propiedad content al final del elemento seleccionado. En nuestro caso, ese elemento es .ost-multi-header. Hagamos un ejemplo tradicional de “¡Hola mundo!” para ilustrarlo.
Añade esto a tu CSS:
.ost-multi-header::after{ content: 'Hola Mundo!'; position: absolute; left: 20px; bottom: 0;}
Titulo del encabezado
Como puedes ver, ahora tenemos un elemento “¡Hola mundo!” debajo del título del encabezado. Debido a que nuestro elemento padre, .ost-multi-header, tiene la propiedad de position como relative, podemos darle una posición absolute a un elemento hijo. Esto nos permitirá mover nuestro nuevo pseudoelemento que creamos con ::after donde queramos dentro del elemento padre fácilmente. Lo colocamos en la parte inferior y lo movemos 20 px desde la izquierda dentro del elemento padre. Ten en cuenta que, si el elemento padre no tuviera la propiedad de position establecida en relative, entonces nuestro elemento posicionado de manera 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 darle estilo al fondo de nuestro pseudoelemento para que sea nuestro borde multicolor usando un degradado. Los degradados CSS pueden ser lineales o radiales. Para nuestro borde, usaremos linear-gradient. En pocas palabras, esto nos daría el borde 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%); }
Pero, vayamos un momento más despacio para ver el paso a paso. Primero, la propiedad content sigue estando ahí aunque esté en blanco. Esto se debe a que, sin la propiedad content , el pseudoelemento nunca se crea; por lo tanto, lo necesitamos. Necesitamos establecer la altura de nuestro pseudoelemento, la altura de nuestro borde. ¿Por qué establecer las propiedades left y right en 0? Sin un ancho establecido, esto estirará el pseudoelemento hasta alcanzar el 100% de ancho dentro del elemento padre. Puede parecer mucho, pero las linear-gradient configuraciones solo le indican al color que fluya de izquierda a derecha, y ponemos los colores que queremos en ciertos porcentajes del fondo.
Aunque todo lo que hacemos es elegir qué colores usar en porcentajes específicos, es mucho trabajo preliminar. Afortunadamente, existen recursos gratuitos en línea que ayudan enormemente con los degradados de color. Ultimate CSS Gradient Generator de ColorZilla es una excelente herramienta que incluye múltiples propiedades de degradado para admitir navegadores más antiguos.
Ya tenemos un degradado 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 . Debería verse así:
Hay muchas configuraciones en este sitio, pero centrémonos en las que necesitamos para crear el aspecto que vamos a usar para nuestro borde. Vamos a desglosarlo:
- Ajustes preestablecidos : ¡pueden ser un excelente punto de partida!
- Barra deslizante : aquí puede agregar, eliminar y editar colores
- 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 el que está controlando en esta sección.
- Vista previa : aquí puede ver inmediatamente los resultados de sus cambios.
- Orientación y tamaño : permite cambiar entre orientación horizontal, vertical, diagonal o radial, y configurar el tamaño del degradado.
- Código CSS : el código generado con un enlace permanente para que siempre puedas volver atrás y editar tu degradado fácilmente.
En nuestro caso, no buscábamos un degradado difuminado, sino una transición plana y sólida entre dos colores, por lo que todo lo que tenemos que hacer es apilar los dos colores uno sobre el otro donde queremos que esto suceda. En nuestro ejemplo, apilamos los colores al 33 % y al 66 % respectivamente.
Siéntete libre de jugar con la configuración, sabiendo que lo que ves en la vista previa es lo que generará el código. Cuando hayas configurado el aspecto como quieres, puedes usar el botón "copiar" en la parte inferior derecha del cuadro de código.
Si copiaste el código tal como lo tengo en el enlace, tu 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: -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: 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 */ } Y ese CSS producirá este subrayado multicolor que es totalmente responsivo:
Titulo del encabezado
¡Y listo! No tuvimos que agregar el relleno de 6 px en la parte inferior de .ost-multi-header, pero el absoluteelemento secundario posicionado ya no afecta la altura del elemento principal. Podemos dejar que flote sobre nuestro contenido en el elemento principal o agregarlo paddingpara asegurarnos de que no cubra ningún contenido que no queramos que esté obstruido.
Aquí hay un enlace ⭷ a este ejercicio recreado en CodePen para que todos puedan editarlo y aprender sin preocupaciones.
Una nota final: algunos navegadores antiguos solo admiten el :afterselector de dos puntos simple, y no el doble estándar moderno ::after. Puede utilizar el selector de dos puntos simple si desea estar seguro. Por ahora, también funcionará en los navegadores modernos.
Fuente: La publicación original la encuentras en:
https://ostraining.com/blog/coding/multi-colored-css-borders/
