Con las nuevas propiedades de CSS3, estamos en condiciones de desarrollar sitios web sin usar tantas imágenes. En el pasado, el uso de la imagen era inevitable cuando se trataba de mostrar gradiente de colores. Hoy en día, se vuelve mucho más facil el uso de Gradiente en los fondos con CSS3. En artículos anteriores, hemos mostrado como usar diferentes características que brinda CSS3.

Pero el gradiente con CSS3 no sólo puede servirnos para el uso en los fondos. ¿Sabías que también puedes usarlo junto con los bordes? Te invitamos a conocer como puedes usarlo ;)

Primer Método

El primer método es mediante la aplicación de Gradiente CSS3 dentro de pseudo-elementos. Bueno, vamos a ver cómo funciona este truco.

Gradiente En Borde De Arriba Hacia Abajo

Vamos a empezar con un gradiente simple que se extiende de arriba hacia abajo. Para empezar, cree un cuadro con un div, de la siguiente manera.

HTML

[html] <div class="caja"></div>  [/html]

CSS

[css]

.caja {
width: 400px;
height: 400px;
background: #eee;
}

[/css]

Para usar el gradiente en los bordes del cuadro, se debe establecer un borde sólido en la parte superior e inferior de la caja. También creamos 2 rectángulos con 2 pseudo-elementos -: before y: after – y debes especificar el ancho en el mismo tamaño que el ancho del cuadro fronterizo. Coloque los rectángulos en la parte izquierda y derecha del cuadro y emplee el lineal gradiente al fondo de la imagen. A continuación puedes ver como funciona esto:

 

See the Pen Borde con Gradiente by HostDime Colombia (@HostDimeColombia) on CodePen.

De Izquierda A Derecha

Ahora vamos a crear un gradiente que se extiende a la izquierda y derecha de una manera idéntica al ejemplo anterior. Sólo que esta vez, vamos a agregar el borde del cuadro en el lado izquierdo y derecho, en lugar de en la parte superior e inferior. Del mismo modo, también utilizamos el pseudo-elemento -: before y: after – para dar forma a 2 rectángulos. Pero, contrariamente al ejemplo anterior, ahora los coloca en la parte superior e inferior de la caja.

See the Pen Gradiente de izquierda a derecha by HostDime Colombia (@HostDimeColombia) on CodePen.

Borde Diagonal Con Gradiente

La creación del degradado diagonal con este truco es, bueno, algo complicado.

Sin embargo, confiamos en 2 pseudo-elementos,: before y: after y usaremos un degradado lineal con CSS3. Esta vez, sin embargo, que dará empleo a 2 lineal gradiente dentro del pseudo-elemento. Y cada gradiente se extiende en oposición entre sí. Vea el siguiente código fuente para que encuentres mas detalles.

See the Pen kmwBC by HostDime Colombia (@HostDimeColombia) on CodePen.

Segundo Truco

El segundo método es el uso de la propiedad CSS3 border-image. La propiedad border-image en CSS3 nos sirve para llenar el borde con una imagen así como CSS3 Gradient. Los navegadores son compatibles con border-image; Chrome, Internet Explorer 11, Firefox, Safari y Opera son todos capaces de ejecutar plenamente la propiedad border-image. Cabe señalar, sin embargo, que la imagen de la frontera sólo funcionará en figuras o cajas rectangulares. Eso significa que la adición de la frontera de radio se desviará a la salida de border-image.

La siguiente es la especificación propiedad border-image:

[css]border-image: <source> <slice> <width> <outset> <repeat|initial|inherit>; [/css]es la ruta de acceso que especifica a la imagen que se usa en el borde. Aquí, vamos a llenarlo con Gradient de CSS3. Para lograr el mismo resultado que en los ejemplos anteriores, se aplica el Gradiente CSS3 dentro de la imagen de la frontera, como se puede ver a continuación.

[css]
.box{
width: 250px;
height: 250px;
background: #eee;
border: 20px solid transparent;
-moz-border-image: -moz-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%);
-webkit-border-image: -webkit-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%);
border-image: linear-gradient(to bottombottom, #3acfd5 0%, #3a4ed5 100%);
border-image-slice: 1;
}
[/css]

El border-image mostrará nada si no se especifica el ancho del borde. Así, como se puede ver arriba, añadimos 20px de ancho de borde con el color del borde transparente. A continuación, nos fijamos el valor de theborder-imageandlinear-gradient junto con el prefijo para Webkit y las versiones de Firefox.

La adición de border-image-slice muestra arriba las compensaciones internas del contenido de la imagen de la frontera. Esta propiedad es necesaria para mostrar el gradiente totalmente dentro de la zona de los alrededores de la caja. A continuación puedes ver el resultado:

See the Pen zvkqL by HostDime Colombia (@HostDimeColombia) on CodePen.

Este método ofrece una mayor flexibilidad para ajustar el gradiente en todas las direcciones posibles; izquierda a derecha, de arriba a abajo, en diagonal, o en un ángulo. A continuación se presentan algunos ejemplos:

Degradado De Izquierda A Derecha

See the Pen wpqjJ by HostDime Colombia (@HostDimeColombia) on CodePen.

Degradado Diagonal

See the Pen gqfAK by HostDime Colombia (@HostDimeColombia) on CodePen.