Cómo crear colores de borde degradado CSS
Este artículo es parte de nuestra "serie de tutoriales de HTML5 / CSS3", dedicada a ayudarlo a ser un mejor diseñador y / o desarrollador. Haga clic aquí para ver más artículos de la misma serie.
Con todas las nuevas características en CSS3, ahora podemos construir sitios web sin imágenes. En el pasado, el uso de la imagen era inevitable cuando se trataba de mostrar colores degradados. Hoy en día, se vuelve mucho más ágil con el uso del Fondo de degradado CSS3 . En publicaciones anteriores, le mostramos cómo poner CSS3 Gradient en juego como color de fondo en varias formas y direcciones; Gradientes lineales, elípticos y repetitivos.
Pero CSS3 Gradient no se detiene solo para el uso de fondo. ¿Sabías que también puedes utilizarlo dentro de las fronteras ? Sigue leyendo para aprender cómo hacer esto.
Primer método
El primer método es aplicar CSS3 Gradient dentro de pseudo-elementos . Bien, veamos cómo funciona el truco.
Borde de gradiente de arriba a abajo
Comenzaremos con un gradiente simple que se extiende de arriba hacia abajo. Para comenzar, crea un cuadro con un div
, de la siguiente manera.
HTML
CSS
.box {ancho: 400px; altura: 400px; fondo: #eee; }
Para formar el degradado en los bordes de la caja, primero establezca un borde sólido en los lados superior e inferior de la caja. También creamos 2 rectángulos con 2 pseudo-elementos s - :before
y :after
- y especificamos el ancho en el mismo tamaño que el ancho del borde de la caja. Coloque los rectángulos en el lado izquierdo y derecho de la caja y emplee linear-gradient
través background-image
. Puedes ver cómo es este truco a continuación:
Degradado de izquierda a derecha
Ahora vamos a crear un degradado que se extienda hacia la izquierda y hacia la derecha de manera idéntica al ejemplo anterior. Solo que, esta vez, agregaremos el borde de la caja en el lado izquierdo y derecho, en lugar de en la parte superior e inferior. Del mismo modo, también utilizamos pseudo-elemento - :before
y :after
- para dar forma a 2 rectángulos. Pero, al contrario que en el ejemplo anterior, ahora los colocamos en la parte superior e inferior de la caja.
Gradiente de borde diagonal
Crear gradiente diagonal con este truco es, bueno, técnicamente complicado.
Aún así, dependemos de 2 pseudo-elementos :before
y :after
y usamos linear-gradient
. Esta vez, sin embargo, emplearemos 2 linear-gradient
dentro del pseudo-elemento . Y cada gradiente se extiende en oposición el uno al otro. Vea el siguiente código fuente para los detalles.
Segundo truco
El segundo método es mediante el uso border-image
propiedad de border-image
CSS3. La propiedad de border-image
en CSS3 nos permite rellenar el borde con una imagen y un degradado CSS3. Los navegadores compatibles con border-image
son bastante geniales; Chrome, Internet Explorer 11, Firefox, Safari y Opera son todos capaces de procesar por completo border-image
. Sin embargo, debe tenerse en cuenta que la border-image
solo funcionará en formas o cuadros rectangulares. Eso significa que agregar border-radius
del border-image
desviará la salida de la border-image
del border-image
.
A continuación se muestra la especificación de la propiedad border-image
:
border-image:
los
.box {ancho: 250px; altura: 250px; fondo: #eee; borde: 20px sólido transparente; -moz-border-image: -moz-linear-gradient (arriba, # 3acfd5 0%, # 3a4ed5 100%); -webkit-border-image: -webkit-linear-gradient (arriba, # 3acfd5 0%, # 3a4ed5 100%); border-image: linear-gradient (hacia abajo, # 3acfd5 0%, # 3a4ed5 100%); border-image-slice: 1; }
La border-image
no mostrará nada si no especificamos el ancho del border
. Entonces, como puede ver arriba, agregamos 20px
de ancho de borde con color de borde transparente. Luego, establecemos el valor de border-image
y linear-gradient
junto con el prefijo de proveedor para versiones anteriores de Webkit y Firefox.
La adición de borde-rebanada de imagen que se muestra arriba establecerá los desplazamientos internos del contenido del image-border
de la image-border
. Esta propiedad es necesaria para mostrar el degradado completamente dentro del área circundante de la caja. Ver el resultado a continuación:
Este método ofrece más flexibilidad para ajustar el degradado en todas las direcciones posibles; de izquierda a derecha, de arriba a abajo, en diagonal o en ángulo. A continuación hay algunos ejemplos:
Gradiente de izquierda a derecha
Gradiente diagonal
25 ejemplos de diseño de identidad de marca hecho bien
Identity branding es una parte integral del negocio . Después de todo, tienes que asegurarte de que puedes promocionarte adecuadamente. No siempre es fácil intentar crear un diseño que se adapte a sus necesidades. Algo que no solo refleja lo que representa, sino que también muestra la personalidad de su marca, ya sea su marca personal o una empresa que usted tenga.Par
Versión de regalo: 18 iconos de Navidad y año nuevo (PSD incluido)
A medida que se acerca la temporada de Navidad y Año Nuevo, nos gustaría continuar agradeciendo a nuestros lectores y comunidad de diseño con un lanzamiento exclusivo de 18 iconos de Navidad y Año Nuevo . Estos iconos vienen en formato PNG en 2 tamaños diferentes, 128 × 128 y 64 × 64 píxeles, junto con el archivo PSD de Photoshop en capas de cada icono.Estos i