Share
Este tutorial describirá cómo crear fondos complejos que, en el pasado, solo se podían lograr al cortar un diseño creado en Photoshop u otro editor gráfico. Vamos a ver cómo usar tonos degradados y cómo combinarlos con múltiples fondos de imagen para crear efectos radicales. Estás listo?
Este es el primero en lo que será una serie de muchos ejemplos. Cada uno aprovechará CSS3 para lograr efectos visuales que tradicionalmente se han basado en la creación de imágenes en Photoshop antes de cortarlos y pasar a un diseño web. Este proceso cruzado ha creado una brecha entre los programadores y los diseñadores y cortar un diseño a veces puede ser una tarea incómoda. Las limitaciones de CSS han hecho que crear algo tan simple como un gradiente en ángulo u oblicuo sea imposible. Pero ahora, gracias a CSS3, nuestra imaginación es el único límite..
Hoy usaremos la función de fondos múltiples de CSS3 para crear un paisaje agradable y tranquilo desde una única división.
Nota: Todos los ejemplos se probaron en Mozilla Firefox, Safari y Chrome, si quieres lograr algo similar en IE o cualquier otro navegador, deja un comentario y estaré encantado de ayudarte..
En el pasado, solo había una forma de crear un fondo degradado: utilizar Photoshop (o cualquier otro software de edición de gráficos). Seguiríamos este proceso, por ejemplo, para un fondo de página completa: crear una capa de relleno de degradado (o aplicar un efecto de superposición de degradado a un cuadro) y establecer al menos dos cubos de pintura como colores de parada. Luego, utilizando la herramienta Recortar o Cortar, corte una imagen de ancho 1px y repítala usando CSS, según sea el caso, horizontal o verticalmente. Un proceso bastante razonable, bastante rápido y casi mecánico para diseñadores web con experiencia. Este proceso, sin embargo, tiene un par de limitaciones:
En Photoshop solías tener algo como esto. Puede seleccionar un Color de parada desde un selector de color visual o escribir valores RGB o HEX. Esto es más o menos lo mismo que CSS3; Puedes usar colores Hex o RGB para los gradientes. En futuros consejos, le mostraré cómo usar los colores RGBA para agregar un porcentaje Alfa (transparencia).
Con CSS3, crear un fondo lineal clásico necesita un par de líneas más de código que usar una imagen de fondo, pero el resultado vale la pena. Esta es la sintaxis adecuada para crear un degradado con css:
LINEAR: -moz-linear-gradient ([
-webkit-gradiente (lineal,
Una cosa importante a destacar es que el gradiente se considera una "imagen de fondo". En este ejemplo asignamos una clase al cuerpo de nuestro documento:
El CSS entonces se dirige a esa clase:
/ * Fondo lineal de página completa * / body.linear height: 100%; / * Para agregar un gradiente CSS3 de cuerpo de página completo, debe establecer esta altura en 100% * / background-repeat: no-repeat; imagen de fondo: -moz-lineal-gradiente (arriba, # 0096f5, # 00416a); imagen de fondo: -webkit-gradient (linear, 0% 0%, 0% 100%, desde (# 0096f5), hasta (# 00416a), color-stop (1, # FFF)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, startColorstr = # 0096f5, endColorstr = # 00416a); -ms-filter: "progid: DXImageTransform.Microsoft.gradient (GradientType = 0, startColorstr = # 0096f5, endColorstr = # 00416a)"; / * Para evitar tener una franja en blanco en la parte inferior, hay un par de correcciones * / / * background-attach: corregido; * / / * Funciona bien excepto en IE * / background-color: # 00416a; / * El fondo se verá bien si hay desplazamiento, agregando el color inferior en toda la página * /
En el software gráfico, puede configurar varias variantes de formas de degradado cambiando el número de colores, ángulos y estilo de parada (lineal / radial).
En CSS3 podemos lograr los mismos resultados..
LINEAR: -moz-linear-gradient ([
RADIAL: -moz-radial-gradient ([
-webkit-gradiente (
/ * Gradientes * / .linear_gradient background-image: -moz-linear-gradient (arriba, # 6f828b, # 122938); imagen de fondo: -webkit-gradient (linear, 0% 0%, 0% 100%, desde (# 6f828b), hasta (# 122938), color-stop (1, # FFF)); .angle_gradient background: -moz-linear-gradient (260deg superior derecho, # ffe930, # ed9700); fondo: -webkit-gradient (lineal, superior derecha, inferior izquierda, de (# ffe930), a (# ffa200)); .radial_gradient background: -moz-radial-gradient (50% 50%, círculo en la esquina más alejada, # ff0000, # a00000); fondo: -webkit-gradiente (radial, 50% 50%, 0, 50% 50%, 100, desde (# ff0000), hasta (# a00000)); .stops_gradients background: -moz-linear-gradient (top, # 676767 0%, # 262626 50%, # 1D1D1D 50%, # 000000 100%); fondo: -webkit-gradiente (lineal, arriba a la izquierda, abajo a la izquierda, desde (# 676767), color-stop (0.5, # 262626), color-stop (0.5, # 1D1D1D), hasta (# 000000));
Ver demostración
Obviamente, no siempre necesitaremos solamente gradientes como fondos, tener imágenes elaboradas sigue siendo algo en lo que nos apoyamos. CSS3 nos permite agregar varias imágenes al fondo, luego cambia los tamaños y las posiciones también.
Para una imagen de fondo múltiple, debe definir dos atributos: "fondo" y "tamaño de fondo". El primero establece todas las imágenes, las direcciones URL, sus posiciones y el estilo de repetición; el segundo establece sus respectivos tamaños ("automático" por defecto).
fondo:
El
El
El
?
[color]
;
tamaño de fondo
El
Accentsconagua