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

La batalla de compilar guiones: Gulp Vs Grunt

La batalla de compilar guiones: Gulp Vs Grunt

Ya he escrito sobre cómo comenzar con Gulp y sobre cómo empezar a trabajar con Grunt. Ambos automatizan nuestras tareas, ambos usan Node, y ambos requieren que cree tareas e instale complementos de algún tipo. Pero ¿te preguntas acerca de la diferencia entre los dos, o incluso, que es mejor?En este artículo, me centraré principalmente en las diferencias entre estos dos proyectos que pueden influir en ayudarte a decidir cuál de los dos puedes considerar mejor para ti. Usaré

(Consejos de tecnología y diseño)

Cómo las empresas de código abierto se mantienen rentables

Cómo las empresas de código abierto se mantienen rentables

Si bien es cierto que hay muchas soluciones de código abierto que las empresas y las personas pueden adquirir y usar sin costo alguno, la noción de que la frase "código abierto" se equipara con la palabra "gratis" simplemente no es cierta.Los proyectos de código abierto generalmente se desarrollan dentro de comunidades de programadores entusiastas que a menudo contribuyen voluntariamente su tiempo . Aú

(Consejos de tecnología y diseño)