es.hideout-lastation.com
Paraíso Para Los Diseñadores Y Desarrolladores


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 es la ruta que especifica la imagen utilizada en el borde. Aquí, lo llenaremos con CSS3 Gradient en su lugar. Para lograr el mismo resultado que en los ejemplos anteriores, aplicamos el degradado CSS3 dentro de la border-image, de la siguiente manera.

 .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

Cómo usar las transiciones y animaciones de CSS3 para resaltar los cambios de la interfaz de usuario

Cómo usar las transiciones y animaciones de CSS3 para resaltar los cambios de la interfaz de usuario

Los diseñadores y artistas tienen una larga historia de experimentar con el movimiento, los efectos y diferentes tipos de ilusiones con el objetivo de agregar una capa adicional a su trabajo. El movimiento op art comenzó a usar ilusiones ópticas en la década de 1960 para dar la impresión de movimiento.Desd

(Consejos de tecnología y diseño)

Más de 15 herramientas para mejorar tu experiencia de compra en línea

Más de 15 herramientas para mejorar tu experiencia de compra en línea

Si realiza compras frecuentes en línea, usted sabe lo abrumador que puede ser con todas las ofertas, cupones y promociones en línea disponibles en toda la Web. Es casi imposible mantenerse al día con todo y es aún más imposible comparar los precios de los productos con cientos de otros minoristas en línea. Ento

(Consejos de tecnología y diseño)