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
20 menús de comida y bebida deliciosamente diseñados
Los menús son como la tarjeta de negocios de una cafetería, restaurante o restaurante. Además de la atmósfera, el menú proporciona el tipo de impresión duradera que se estaciona en nuestros núcleos sensoriales y determina nuestra elección de alimentos durante días, meses o años por venir. El menú también refleja la personalidad única del lugar, la cocina que sirve y el ambiente que quiere que sus clientes lleven consigo una vez que se vayan.Luego, por s
20 libros para entender la fotografía que puedes comprar
A medida que más y más personas pueden comprar DSLR y cámaras compactas de alta gama, la industria de la fotografía está recibiendo un impulso en suscriptores y ávidos aficionados . Para aquellos de nosotros que realmente queremos aprender los trucos del oficio, hay muchos libros geniales producidos por fotógrafos.En est