Cómo utilizar el gradiente de ss3
Esta vez te mostraré cómo usar el gradiente de ss3 y cuáles son las precauciones al usar el gradiente de ss3. El siguiente es un caso práctico, echemos un vistazo.
El libro "CSS Revealed" es muy bueno, lleno de información útil y sorpresas. Las siguientes son principalmente notas sobre algunos efectos creados usando degradados. Utilice el último navegador moderno para verlo.
Primero revise la siguiente declaración CSS:
linear-gradient([ [
fondo: lineal-gradiente(aquamarine,orange)
El valor predeterminado es degradado de arriba a abajo. Pero si no queremos degradados, queremos barras de colores. El truco consiste en no dejar un espacio entre los dos colores, porque si dejas un espacio, aparecerá un efecto de transición de degradado. Entonces podemos fijar el 50% cada uno. Este 50% representa la posición del color. También puede ser una unidad de longitud.
fondo: gradiente lineal (aguamarina 50 %, naranja 50 %)
¿Qué pasa si necesitamos varios colores, como azul, blanco y rojo?
fondo: gradiente lineal (90 grados, aguamarina 0, aguamarina 33%, blanco 0, blanco 67%, carmesí 0, carmesí)
Observe los tres ceros y los últimos colores carmesí No tienen escala de colores. El primer aqua 0, aqua 33% significa que el agua representa el 33%, mientras que el segundo blanco es blanco 0, blanco 67%. Parece representar el 67%, pero en realidad comienza desde el 33%.
Si la posición de una determinada parada de color es menor que su posición anterior, la posición de la parada de color se establecerá en el valor máximo de las posiciones de parada de color anteriores.
Entonces el segundo 0 representa el 33% y el tercer 0 representa el 67%. Puede cambiar 0 a un valor menor que estos dos valores y el efecto será el mismo. El último color se completará automáticamente sin escala de colores. Entonces, si solo queremos dibujar una línea, el color del degradado puede usar un color transparente:
gradiente lineal (blanco 2px, transparente 0) Pero si queremos lograr un efecto repetitivo, también necesitamos el cooperación de fondo-tamaño. El tamaño de fondo predeterminado es 100% 100%. Pero si se define el tamaño, equivale a dividir toda el área en pequeños trozos repetidos.
Cuadrícula 1:
.grid {
ancho: 225px;
alto:
fondo; : #58a;
imagen de fondo: degradado lineal (2px blanco, transparente 0), degradado lineal (90 grados, 2px blanco, transparente 0);
tamaño de fondo: 75px 75px, 75px, 75px;
}El primer degradado consiste en dividir 225px en tercios horizontalmente. Luego el segundo gradiente se divide en tercios verticalmente.
Este es el efecto que se ve a simple vista, pero en realidad es el resultado de nueve cuadrados de 75 px * 75 px.
Cuadrícula 2:
imagen de fondo: degradado lineal (blanco 2 px, transparente 0), degradado lineal (90 grados, blanco 2 px, transparente 0), degradado lineal (hsla (0,0%,100%,.3) 1px,transparent 0),gradiente lineal(90deg, hsla(0,0%,100%,.3) 1px,transparent 0);
tamaño de fondo: 75px 75px, 75px 75px, 15px 15px, 15px 15px, entonces la implementación de la cuadrícula es simple. Luego superponga el degradado y divida cada 75 en 5 15. El efecto parece baldosas de cerámica.
Tablero de ajedrez
Pero, ¿cómo dibujar un tablero de ajedrez? Tenga en cuenta que las líneas no son continuas. Como se muestra en la imagen de arriba, según la idea anterior del tamaño del fondo, sabemos que dicho tablero de ajedrez se compone de múltiples cuadrados de este tipo.
Estos dos cuadrados están compuestos por cuatro triángulos. Una característica de los degradados lineales es que solo habrá un color en una línea en el área de tamaño del fondo.
imagen de fondo: gradiente lineal (45 grados, #bbb 25 %, transparente 0), gradiente lineal (45 grados, transparente 75 %, #bbb 0), gradiente lineal (45 grados, #ffbb33 25 %, transparente 0), gradiente lineal (45 grados, transparente 75%, #ffbb33 0);
tamaño de fondo: 30px 30px;
posición de fondo: 0 0, 15px 15px, 15px 15px, 30px 30px; Tenga en cuenta que también se utiliza un conjunto de posición de fondo. El primer color #bbb ocupa el 25% de la dirección de 45 grados y el segundo color #bbb ocupa el último 25% de los 45-. dirección de grado. Si cambia el segundo triángulo a rojo, la posición a partir de 0,0 quedará clara de un vistazo.
imagen de fondo: gradiente lineal (45 grados, #bbb 25 %, transparente 0), gradiente lineal (45 grados, transparente 75 %, rojo 0);
tamaño de fondo : 30px 30px;
background-position: 0 0, 0px 0px,15px 15px, 30px 30px;
Cambie la posición del triángulo rojo a 15px, y 15px formará un cuadrado . De la misma forma, superponga un cuadrado para obtener el formato de tablero de ajedrez. De la misma forma podemos armar una rejilla de descanso.
Deja que el triángulo gire 90 grados cada vez sin mover su posición.
imagen de fondo: gradiente lineal (45 grados, rojo 0, rojo 25 %, transparente 0), gradiente lineal (135 grados, naranja 0, naranja 25 %, transparente 0), gradiente lineal (225 grados , amarillo 0, amarillo 25%, transparente 0), gradiente lineal (315 grados, verde 0, verde 25%, transparente 0)
Cuadrícula oblicua Con la acumulación anterior, es sencillo dibujar una cuadrícula oblicua Salida:
imagen de fondo: gradiente lineal (45 grados, transparente 49 %, negro 0, negro 51 %, transparente 0), gradiente lineal (135 grados, transparente 49 %, negro 0, negro 51 % ,transparent 0);
background-size: 30px 30px;
Equivalente a dos líneas diagonales de degradado para cada unidad.
Puede que te resulte un poco molesto seguir intentando montar este tipo de unidad en una cuadrícula oblicua, por lo que apareció un gradiente lineal repetido.
fondo: degradado lineal repetido (45 grados, transparente, transparente 1 em, mocasín 0, mocasín 2 em, transparente 0, transparente 3 em, azul claro 0, azul claro 4 em, transparente 0, transparente 5 em, lavanda 0, lavanda 6em, transparente 0, transparente 7em, beige 0, beige 8em), gradiente lineal repetido (-45 grados, transparente, transparente 1em, caqui 0, caqui 2em, transparente 0, transparente 3em, beige 0, beige 4em, transparente 0, transparente 5em, Peachpuff 0, Peachpuff 6em); observe que los colores aparecen en pares. Sólo entonces aparecerá nuestra barra de colores. Tenga en cuenta el uso del modo de fusión de fondo: modo de fusión; De lo contrario el efecto no sería tan bonito.
Puntos: la idea es la misma que la anterior, usando superposición de gradiente radial y dislocación
background-image: radial-gradient(#fff 5px,transparent 0),radial-gradient( # fff 10px, transparent 0);
background-size: 40px;
background-position: 0 0, 20px 20px; Sofá Este efecto de sofá es más complicado y se realiza usando degradado radial Puntos y sombras, degradados lineales delinean las líneas.
fondo:
gradiente radial(hsl(0, 100%, 27%) 4%, hsl(0, 100%, 18%) 9%, hsla(0, 100%, 20%, 0) 9%) 0 0,
gradiente radial(hsl(0, 100%, 27%) 4%, hsl(0, 100%, 18%) 8% , hsla(0, 100%, 20%, 0) 10%) 50px 50px,
gradiente radial(hsla(0, 100%, 30%, 0.8) 20%, hsla(0, 100 %, 20%, 0)) 50px 0,
gradiente radial(hsla(0, 100%, 30%, 0.8) 20%, hsla(0, 100%, 20%, 0)) 0 50px,
gradiente radial(hsla(0, 100%, 20%, 1) 35%, hsla(0, 100%, 20%, 0) 60%) 50px 0,
gradiente radial (hsla(0, 100%, 20%, 1) 35%, hsla(0, 100%, 20%, 0) 60%) 100px 50px,
radial- gradient(hsla(0, 100%, 15%, 0.7), hsla(0, 100%, 20%, 0)) 0 0,
gradiente radial(hsla(0, 100%, 15 %, 0,7), hsla(0, 100%, 20%, 0)) 50px 50px,
gradiente lineal(45deg, hsla(0, 100%, 20%, 0) 49%, hsla (0, 100%, 0%, 1) 50%, hsla(0, 100%, 20%, 0) 70%) 0 0,
gradiente lineal (-45deg, hsla(0, 100%, 20%, 0) 49%, hsla(0, 100%, 0%, 1) 50%, hsla(0, 100%, 20%, 0) 70%) 0 0
;
color de fondo: #300;
tamaño de fondo: 100px 100px;sintaxis de gradiente radial:
gradiente-radial(
[ [ círculo ||
[ elipse || , |
[ [ círculo | elipse ] ||
en
]?
) parece un poco complicado, [] representa un parámetro, [] representa este parámetro. Opcional, | significa elegir uno de estos dos parámetros, || significa que estos dos parámetros pueden existir al mismo tiempo, ',' significa el final de este parámetro.
Contiene forma, posición del punto central, palabras clave extendidas y color. La forma se divide en círculo y elipse, y la posición puede ser longitud/porcentaje/abreviatura izquierda, centro, etc. El color es el mismo que el de un degradado lineal, como el degradado de un sol:
background:radial-gradient(at 45px 45px,rgb(248, 242, 209),gold,#FFF);
Sin embargo, aquí no solo afecta el punto central del degradado sino que también afecta la forma del degradado. Si agregamos tamaño de fondo, podemos obtener una cookie: ¿Quieres comerla (*^^*)
La palabra clave de expansión tiene principalmente las siguientes situaciones
lado más cercano : especificar La longitud del radio del degradado radial es desde el centro del círculo hasta el lado más cercano al centro del círculo
fondo:radial-gradient(circle near-side,aqua,gold);
esquina más cercana: especificada La longitud del radio del gradiente radial es desde el centro del círculo hasta la esquina más cercana al centro del círculo
background:radial-gradient(círculo más cercano -corner, aqua, gold);
lado más lejano: especificado La longitud del radio del gradiente radial es desde el centro del círculo hasta el lado más alejado del centro del círculo
background:radial-gradient(círculo en el lado más lejano al 30 % 30 % ,aqua,gold);
farthest-corner: especifique la longitud del radio del gradiente radial desde el centro del círculo hasta el punto más lejano esquina desde el centro del círculo
fondo:radial-gradient(círculo más alejado de la esquina al 30% 30%, aqua,gold
Si queremos dibujar un círculo de color); , necesitamos utilizar las técnicas de gradiente lineal.
fondo:gradiente radial(blanco 0,blanco 10%,rojo 0, rojo 20%,blanco 0,blanco 30%,rojo 0,rojo 40%,blanco 0,blanco 50%,rojo 0 , rojo 60%, blanco 0, blanco 100%); Resumen: estos efectos son bastante interesantes. Este artículo aprende principalmente gradiente lineal, gradiente lineal repetido, tamaño de fondo y posición de fondo para implementar la cuadrícula. Efecto, finalmente se usó gradiente radial. Hay más patrones de gradiente radial. Todos los efectos se basan básicamente en la superposición y repetición de gradiente. Para obtener más efectos, consulte el enlace a continuación.
Creo que domina el método después de leer el caso de este artículo. Para obtener más información interesante, preste atención a otros artículos relacionados en Gxl.com.
Lectura recomendada:
Explicación detallada de Promise en jQuery, Angular y node
Explicación detallada de la biblioteca de reproducción de vídeo H5 video.js