tutorial de sql. SQL "para tontos": ¿qué necesitan saber los principiantes? Tipos de privilegios que existen en este servidor
Los degradados CSS te permiten crear un fondo de dos o más colores que pasan suavemente de uno a otro. Han estado con nosotros durante bastante tiempo y tienen un soporte de navegador bastante bueno. Mayoría navegadores modernos los entiende sin prefijos, para IE9 y versiones anteriores hay un filtro de degradado y para IE9 puedes usar SVG.
Los degradados se pueden usar en cualquier lugar donde se usen imágenes: en fondos, como viñetas de lista, se pueden especificar en contenido o imagen de borde.
gradiente lineal
Los degradados lineales son bastante fáciles de usar. Para el degradado más básico, simplemente configura los colores inicial y final:
Fondo: degradado lineal (naranja, dorado);
Puede haber cualquier cantidad de colores más de dos. También puedes controlar la dirección del degradado y los límites (puntos de parada) de los colores.
La dirección se puede especificar en grados o palabras clave.
Palabras clave: hacia arriba = 0 grados;
a la derecha = 90 grados;
hacia abajo = 180 grados - valor predeterminado; hacia la izquierda = 270 grados. Las palabras clave se pueden combinar para crear un degradado diagonal, como arriba a la izquierda.
A continuación puedes ver cómo funcionan.
diferentes direcciones
estirado de lila a amarillo:
Aquí está el código para el primer cuadrado, por ejemplo:
Arriba a la izquierda (fondo: degradado lineal (arriba a la izquierda, morado, carmesí, rojo anaranjado, dorado);)
Una cosa para recordar es que arriba a la derecha no es lo mismo que 45 grados. Los colores del degradado se colocan perpendiculares a la línea de dirección del degradado. Desde arriba a la derecha, la línea va desde la esquina inferior izquierda hasta la esquina superior derecha, desde 45 grados; se ubica estrictamente en este ángulo, independientemente del tamaño de la figura.
La diferencia es claramente visible en figuras rectangulares:
También puedes establecer puntos de parada para colores degradados; los valores se especifican en unidades o porcentajes y pueden ser mayores que 100% y menores que 0%.
Ejemplos de configuración de valores en % , en em y valores que van más allá de los límites del elemento: Cuanto más cerca estén los puntos de parada de los colores vecinos, más claro será el límite entre ellos. De esta manera puedes hacer fácilmente fondos rayados: Así es como puede crear, por ejemplo, un fondo para una columna lateral, estirado hasta toda la altura del elemento principal: flores translucidas Son convenientes porque se pueden colocar sobre un fondo de cualquier color.
El degradado en el ejemplo se establece en un código largo y complejo porque las franjas solo deben colocarse encima del fondo de la barra lateral. Si no intentas hacer que todo sea el fondo de un bloque, puedes resolver el problema usando un pseudoelemento.
Si no hay restricciones, el código puede ser mucho más corto:
Claro (fondo: melocotónpuff lineal-gradiente(90deg, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, .4) 50%) centro centro / 2em; ) .dark (fondo: azul acero gradiente lineal (rgba (0, 0, 0, 0) 50%, rgba (0, 0, 0, .2) 50%) centro centro / 100% 1em)
En la primera línea establecemos color de fondo elemento, tipo y dirección (se pueden omitir el color y la dirección), en el segundo, determinamos los colores del degradado y el borde entre ellos, en el tercero, establecemos la posición y el tamaño de la imagen resultante. La parte más importante es el tamaño. De forma predeterminada, el fondo se repite, por lo que el patrón resultante llenará el fondo del elemento. Muy fácil y comprensible :)
La entrada completa se puede escribir en una línea, pero para facilitar la lectura es más conveniente escribir en varias, especialmente para gradientes complejos.
También es importante saber que palabra clave transparente significa negro transparente, no blanco transparente, por lo que si lo usas en Firefox podrías terminar con algo como esto:
Para evitar esto, utilice colores completamente transparentes del tono deseado, por ejemplo, blanco: rgba(255, 255, 255, 0) o negro rgba(0, 0, 0, 0) . Acerca de diferentes maneras Puedes leer los colores para configurar.
Para conocer la notación rgb de un color específico, puede utilizar CSS.coloratum, un instrumento de Lea Verou.
Además del gradiente lineal habitual, puede hacer un gradiente lineal repetido: un gradiente repetido
Código de ejemplo:
Fondo: gradiente lineal repetido (verde, verde 0,5 em, transparente 0,5 em, transparente 1 em);
Desafortunadamente, los gradientes repetidos se comportan de manera desordenada y solo son adecuados para patrones a los que no les importa la precisión. Si necesita precisión, utilice gradiente lineal en combinación con tamaño de fondo y repetición de fondo.
Los degradados tienen la misma limitación que el cuadro de sombra: no se les puede dar colores ni direcciones individuales. Esto conduce a la duplicación de código y a una necesidad urgente de utilizar preprocesadores al crear gradientes complejos.
Otra limitación es que los degradados no están animados, lo que, sin embargo, se puede solucionar hasta cierto punto.
Para creación rápida Hay muchos gradientes entre navegadores. herramienta útil: colorzilla.com/gradient-editor/. Además del código para navegadores modernos, ofrecerá código para IE y SVG más antiguos para el noveno.
En combinación con capacidades básicas gestión imágenes de fondo los gradientes dan las oportunidades más amplias para crear fondos de diversos grados de complejidad sin utilizar imágenes en absoluto. Puedes usar degradados para crear patrones complejos e interesantes, pero ese es un tema completamente diferente.
Última actualización: 21/04/2016
Los gradientes representan transición suave de un color a otro. CSS3 tiene una serie de degradados integrados que puedes usar para crear el fondo de un elemento.
Los degradados en CSS no representan ninguna propiedad especial. Simplemente crean un valor que se asigna a la propiedad de imagen de fondo.
Un degradado lineal se extiende en línea recta desde un extremo de un elemento al otro, creando una transición suave de un color a otro.
Para crear un degradado necesitas especificar su inicio y varios colores, por ejemplo:
Imagen de fondo: degradado lineal (izquierda, negro, blanco);
EN en este caso El inicio del degradado será el borde izquierdo del elemento, que se indica con el valor left . Colores degradados: blanco y negro. Es decir, desde el borde izquierdo del elemento hacia la derecha habrá una transición suave del negro al blanco.
Hay un inconveniente al usar gradientes: la variedad de navegadores te obliga a usar el prefijo del proveedor:
Webkit- /* Para Google Chrome Safari Borde de Microsoft, Opera versión superior a 15 */ -moz- /* Para Mozilla Firefox */ -o- /* Para Opera versión superior a 15 (Opera 12) */
Entonces, uso completo El degradado se verá así:
Degradado lineal en blanco y negro
Para establecer el inicio del degradado, puede utilizar los siguientes valores: izquierda (de izquierda a derecha), derecha ( de derecha a izquierda), arriba (de arriba hacia abajo) o abajo (de abajo hacia arriba). Por ejemplo, un degradado vertical se vería así:
Imagen de fondo: degradado lineal (abajo, negro, blanco);
También puedes establecer la dirección diagonal usando dos valores:
Imagen de fondo: degradado lineal (arriba a la izquierda, negro, blanco);
Además de valores específicos como arriba o izquierda, también puedes especificar un ángulo de 0 a 360, que determinará la dirección del degradado:
Imagen de fondo: degradado lineal (30 grados, negro, blanco);
Después del valor de los ángulos se indica la palabra grados.
Por ejemplo, 0 grados significa que el gradiente comienza en el lado izquierdo y se mueve hacia lado derecho, y cuando especifica 45 grados, comienza en la esquina inferior izquierda y se mueve en un ángulo de 45° hasta la esquina superior derecha.
Después de definir el inicio del degradado, puede especificar los colores o puntos de referencia a aplicar. No es necesario que sean dos colores, pueden haber más:
Imagen de fondo: gradiente lineal (arriba, rojo, #ccc, azul);
Todos los colores aplicados se distribuyen uniformemente. Sin embargo, también puede especificar ubicaciones de fondo específicas para los puntos de color. Para ello, se añade un segundo valor después del color, que determina la posición del punto.
Imagen de fondo: gradiente lineal (izquierda, #ccc, rojo 20%, rojo 80%, #ccc);
Degradado repetido
Usando gradiente lineal repetido puedes crear gradientes lineales repetidos. Por ejemplo:
Imagen de fondo: gradiente lineal repetido (izquierda, #ccc 20 px, rojo 30 px, rgba (0, 0, 126, .5) 40 px); imagen de fondo: -moz-repeating-linear-gradient(izquierda, #ccc 20px, rojo 30px, rgba(0, 0, 126, .5) 40px); imagen de fondo: -webkit-repeating-linear-gradient(izquierda, #ccc 20px, rojo 30px, rgba(0, 0, 126, .5) 40px);
En este caso, el degradado comienza desde el borde izquierdo del elemento con una franja. gris(#ccc) con un ancho de 20 píxeles, luego hasta los 30 píxeles pasa a rojo, y luego hasta los 40 píxeles vuelve a celeste (rgba(0, 0, 126, .5)). Luego, el navegador repite el degradado hasta que llena toda la superficie del elemento.
Vlad Merzhevich
Un degradado es una transición suave de un color a otro y puede haber varios colores y transiciones entre ellos. Con la ayuda de degradados, se crean los efectos de diseño web más extraños, por ejemplo, pseudotridimensionalidad, brillo, fondo, etc. Además, con un degradado, los elementos parecen más atractivos que los monocromáticos.
No existe una propiedad separada para agregar un degradado, ya que se considera una imagen de fondo, por lo que se agrega a través de la propiedad background-image o la propiedad de fondo genérica, como se muestra en el ejemplo 1.
Ejemplo 1: gradiente
Aquí el lenguaje obsceno comienza tradicionalmente la imagen prosaica, pero el juego del lenguaje no conduce a una comprensión dialógica activa.
Resultado este ejemplo mostrado en la Fig. 1.
Arroz. 1. Degradado lineal para párrafo
En el muy caso sencillo con dos colores demostrados en el ejemplo 1, primero escriba la posición desde la cual comenzará el degradado, luego los colores inicial y final.
Para registrar una posición, primero escriba y luego agregue las palabras clave top, bottom e left, right, así como sus combinaciones. El orden de las palabras no es importante, puedes escribir arriba a la izquierda o arriba a la izquierda. en la mesa 1 muestra diferentes posiciones y el tipo de degradado obtenido para los colores #000 y #fff, en caso contrario de negro a blanco.
| Posición | Descripción | Vista | |
|---|---|---|---|
| hacia arriba | 0 grados | De abajo hacia arriba. | |
| a la izquierda | 270 grados | De derecha a izquierda. | |
| hasta el fondo | 180 grados | De arriba hacia abajo. | |
| a la derecha | 90 grados | De izquierda a derecha. | |
| arriba a la izquierda | Desde la esquina inferior derecha hasta la superior izquierda. | ||
| arriba a la derecha | Desde la parte inferior izquierda hasta la superior derecha. | ||
| hacia abajo a la izquierda | Desde la esquina superior derecha hasta la inferior izquierda. | ||
| abajo a la derecha | De arriba a la izquierda a abajo a la derecha. |
En lugar de una palabra clave, puede especificar la pendiente de la línea de degradado, que muestra la dirección del degradado. Primero se escribe lo positivo o positivo. valor negativo esquina, luego se le agregan grados.
Cero grados (o 360º) corresponde al gradiente de abajo hacia arriba, luego la cuenta regresiva es en el sentido de las agujas del reloj. El ángulo de pendiente de la línea de gradiente se muestra a continuación.
Para valores superiores izquierdos y similares, el ángulo de inclinación de la línea de gradiente se calcula en función de las dimensiones del elemento para conectar dos puntos de esquina diagonalmente opuestos.
Para crear degradados complejos, dos colores ya no serán suficientes; la sintaxis permite agregarlos; cantidad ilimitada, enumerando los colores separados por comas. En este caso puedes usar color transparente(palabra clave transparente) y también translúcido usando formato RGBA, como se muestra en el ejemplo 2.
Ejemplo 2: colores translúcidos
HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx
El resultado de este ejemplo se muestra en la Fig. 2.
Arroz. 2. Degradado con colores translúcidos
Para colocar con precisión los colores en un degradado, al valor del color le sigue su posición en porcentajes, píxeles u otras unidades. Por ejemplo, registrar rojo 0%, naranja 50%, amarillo 100% significa que el degradado comienza en rojo, luego un 50% en naranja y luego completamente en amarillo. Para simplificar, se pueden omitir unidades extremas como 0% y 100%; se suponen de forma predeterminada. El ejemplo 3 muestra cómo crear botón degradado, en el que la posición del segundo color de tres se fija en el 36%.
Ejemplo 3: botón de degradado
HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx
El resultado de este ejemplo se muestra en la Fig. 3.
Arroz. 3. Botón de degradado
Al establecer la posición del color, puede obtener transiciones nítidas entre colores, lo que finalmente da como resultado un conjunto de franjas monocromáticas. Entonces, para dos colores necesita especificar cuatro colores, los primeros dos colores son iguales y comienzan del 0% al 50%, los colores restantes también son iguales y continúan del 50% al 100%. En el ejemplo, se agregan 4 franjas como fondo de la página web. Debido a que los valores extremos se sustituyen automáticamente, no se pueden especificar, por lo que basta con escribir solo dos colores.
Ejemplo 4. Rayas lisas
HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx
La burguesía y la respetabilidad típicas europeas quedan elegantemente ilustradas por el idioma oficial.
El resultado de este ejemplo se muestra en la Fig. 4. Tenga en cuenta que uno de los colores del degradado está configurado en transparente, por lo que cambia indirectamente a través del color de fondo de la página web.
Arroz. 4. Fondo de rayas horizontales
Los degradados son bastante populares entre los diseñadores web, pero agregarlos puede resultar complicado diferentes propiedades para cada navegador e indicando una variedad de colores. Para que le resulte más fácil crear degradados e insertarlos en el código, le recomiendo el sitio www.colorzilla.com/gradient-editor con el que puede configurar degradados fácilmente y obtener inmediatamente código requerido. Disponible plantillas listas para usar(Presets), ver el resultado (Vista previa), ajustar colores (Ajustes), código final (CSS) que admite IE a través de filtros. Para aquellos que trabajaron en Photoshop u otro. editor gráfico, crear degradados parecerá pan comido, pero a otros no les resultará difícil resolverlo rápidamente. En general lo recomiendo mucho.
¡a! El degradado es una excelente herramienta para manipular el color en CSS3. En lugar de utilizar una imagen para crear un efecto de degradado en una página web, sería más beneficioso utilizar gradiente CSS3 y así “aligerar” el sitio. Dado que el usuario no necesitará perder tiempo ni tráfico descargando imagen de fondo. Hay dos tipos principales de gradiente: radial y lineal. El post de hoy será sobre ellos.
Degradado lineal
Como dice la clasificación, gradientes en CSS3 son imágenes. No existen propiedades especiales para ellos. Y el anuncio utiliza la propiedad de imagen de fondo.
EN caso general La sintaxis de gradiente (lineal) se ve así:
1 | div( |
Entonces, hablemos de todo en orden.
En primer lugar, la función linear-gradient() declara un gradiente lineal. La función tiene tres significados principales. El primer valor define posición inicial. El ejemplo indica arriba, es decir. posición inicial desde arriba. También puedes usar abajo, izquierda y derecha;
Si el ángulo es negativo, entonces la posición cambiará desde la esquina inferior izquierda a la superior izquierda.
El segundo valor de la función es el color inicial y su posición final, que se indica como porcentaje. No es necesario declarar esta posición; el navegador establecerá de forma predeterminada 0% para el primer color.
El último valor es el segundo color y su posición de parada. El valor predeterminado es 100%. Estos valores extremos significan que el primer color comienza inmediatamente a pasar al segundo. Sin embargo, si configuramos el primer color al 50%, solo comenzará a pasar al segundo desde la mitad de la altura disponible. Así es como se ve el código:
Obtenemos tiras de igual altura. Con un borde claro, no habrá transición de color. Para comprender mejor cómo funciona esto, experimente con los valores.
Un gradiente radial, al igual que uno lineal, se declara como una función, solo radial-gradient() . También hay valores básicos: esta es la forma del degradado radial (círculo - círculo o elipse - elipse), el color inicial y final. La sintaxis es la siguiente:
div( |
Si no especifica una forma, el valor predeterminado será una elipse.
Además, la posición central del degradado está establecida de forma predeterminada y se puede cambiar. La posición se puede especificar mediante comandos (arriba, abajo, izquierda, derecha y centro), así como sus combinaciones, o especificarse en porcentajes o píxeles.
Combinaciones de comandos:
- Centro en la parte superior - arriba - 50% 0%;
- en la izquierda esquina superior— arriba a la izquierda — 0% 0%;
- En la esquina superior derecha - arriba a la derecha - 100% 0%;
- En el centro - centro - 50% 50%;
- Centro izquierda - centro izquierda - 0% 50%;
- Centro derecha - centro derecha - 100% 50%;
- Centro inferior - inferior - 50% 100%;
- En la esquina inferior izquierda - abajo a la izquierda - 0% 100%;
- En la esquina inferior derecha - abajo a la derecha - 100% 100%.
A continuación se muestra un ejemplo con porcentajes:
div( |
Valor del primer eje incógnita segundo en Ud..
También gradiente radial puedes configurar el tamaño. El tamaño se indica con un espacio después de la forma del degradado. Aplicar por defecto esquina más alejada(hasta la esquina más alejada). El cálculo se realiza desde el punto central de la pendiente hasta:
Para entender mejor esto, veamos un ejemplo. Un degradado de forma elíptica con un color inicial blanco y un final azul:
div( |
El tamaño se calcula a partir de la distancia a los lados cercanos, es obvio que la parte superior está más cerca a lo largo del eje. Y y a la izquierda a lo largo del eje incógnita.
Y ahora a los lados lejanos:
div( |
El resultado, como suele decirse, es evidente. El tamaño se calcula a partir de la distancia a los lados lejanos.
En el radial como en gradiente lineal Se pueden aplicar posiciones de parada para el color. También me gustaría señalar que si necesita lograr transparencia de color, debe usar rgba.
div( |
El canal alfa, el último e igual a 0,2, indica que sólo se utiliza el 20% del 100% del color.
En ambos tipos gradiente CSS3 Puedes usar no dos, sino varios colores.
div( |
Para ambos tipos, se pueden utilizar colores repetidos. Es decir, a partir de estos valores se forma un ciclo. Funciones de gradiente repetido, gradiente lineal repetido () para lineal y gradiente radial repetido () para radial.
div( |
0%, #FFAE00 100%);
/* para Firefox */
imagen de fondo: -ms-linear-gradient(arriba, #FF5A00 0%, #FFAE00 100%);
/* para IE 10+ */ imagen de fondo: -o-linear-gradient(arriba, #FF5A00 0%, #FFAE00 100%);
}
div(
/* para Ópera */
}
imagen de fondo: gradiente lineal (arriba, #FF5A00 0%, #FFAE00 100%);
/* sintaxis estándar */
Para mantenerse actualizado con los últimos artículos y lecciones, suscríbase a
