CSS degradado vertical. Degradado lineal. Añadiendo más colores

modelo visual sistema solar en css y html

Modelo visual del sistema solar.

La animación solo funciona en navegadores que soportan el estándar -webkit ( Google Chrome, Ópera o Safari).

• Sol

  El Sol es una estrella que es una bola caliente de gases calientes en el centro de nuestro Sistema Solar. Su influencia se extiende mucho más allá de las órbitas de Neptuno y Plutón. Sin el Sol y su intensa energía y calor, no habría vida en la Tierra. Hay miles de millones de estrellas como nuestro Sol esparcidas por toda la Vía Láctea.

• Mercurio

  Mercurio, abrasado por el sol, es sólo un poco más grande que la Luna, el satélite de la Tierra. Al igual que la Luna, Mercurio prácticamente carece de atmósfera y no puede suavizar las huellas del impacto de la caída de meteoritos, por lo que, como la Luna, está cubierto de cráteres. El lado diurno de Mercurio se calienta mucho debido al Sol, mientras que en el lado nocturno la temperatura desciende cientos de grados bajo cero. Hay hielo en los cráteres de Mercurio, que se encuentran en los polos. Mercurio completa una revolución alrededor del Sol cada 88 días.

• Venus

  Venus es un mundo de calor monstruoso (incluso más que en Mercurio) y actividad volcánica. Similar en estructura y tamaño a la Tierra, Venus está cubierto por una atmósfera espesa y tóxica que crea un fuerte efecto invernadero. Este mundo abrasado es lo suficientemente caliente como para derretir el plomo. Las imágenes de radar a través de la poderosa atmósfera revelaron volcanes y montañas deformadas. Venus gira en dirección opuesta, de la rotación de la mayoría de los planetas.

• Tierra

  La Tierra es un planeta oceánico. Nuestro hogar, con su abundancia de agua y vida, lo hace único en nuestro sistema solar. Otros planetas, incluidas varias lunas, también tienen depósitos de hielo, atmósferas, estaciones e incluso clima, pero sólo en la Tierra todos estos componentes se reunieron de una manera que hizo posible la vida.

• Marte

  Aunque los detalles de la superficie de Marte son difíciles de ver desde la Tierra, las observaciones a través de un telescopio indican que Marte tiene estaciones y manchas blancas en los polos. Durante décadas, la gente creyó que las áreas brillantes y oscuras de Marte eran parches de vegetación, que Marte podría ser un lugar adecuado para la vida y que existía agua en los casquetes polares. Cuando la nave espacial Mariner 4 llegó a Marte en 1965, muchos científicos se sorprendieron al ver fotografías del planeta turbio y lleno de cráteres. Marte resultó ser un planeta muerto. Sin embargo, misiones más recientes han revelado que Marte encierra muchos misterios que aún quedan por resolver.

• Júpiter

  Júpiter es el planeta más masivo de nuestro sistema solar, con cuatro lunas grandes y muchas lunas pequeñas. Júpiter forma una especie de sistema solar en miniatura. Para convertirse en una estrella de pleno derecho, Júpiter necesitaba llegar a ser 80 veces más masivo.

• Saturno

  Saturno es el más lejano de los cinco planetas conocidos antes de la invención del telescopio. Al igual que Júpiter, Saturno está compuesto principalmente de hidrógeno y helio. Su volumen es 755 veces mayor que el de la Tierra. Los vientos en su atmósfera alcanzan velocidades de 500 metros por segundo. Estos vientos rápidos, combinados con el calor que se eleva desde el interior del planeta, provocan las rayas amarillas y doradas que vemos en la atmósfera.

• Urano

  Urano, el primer planeta descubierto con un telescopio, fue descubierto en 1781 por el astrónomo William Herschel. El séptimo planeta está tan lejos del Sol que una revolución alrededor del Sol tarda 84 años.

• Neptuno

  El distante Neptuno gira a casi 4.500 millones de kilómetros del Sol. Le toma 165 años completar una revolución alrededor del Sol. Es invisible a simple vista debido a su gran distancia de la Tierra. Curiosamente, su inusual órbita elíptica se cruza con la órbita del planeta enano Plutón, razón por la cual Plutón está dentro de la órbita de Neptuno durante unos 20 de los 248 años durante los cuales realiza una revolución alrededor del Sol.

• Plutón

  Pequeño, frío e increíblemente distante, Plutón fue descubierto en 1930 y durante mucho tiempo fue considerado el noveno planeta. Pero después del descubrimiento de mundos similares a Plutón que estaban aún más lejos, Plutón fue reclasificado como planeta enano en 2006.

El modelo heliocéntrico del sistema solar es un modelo en el que el Sol está en su centro, y la Tierra y el resto de planetas giran como resultado de su campo gravitacional.

El sistema solar es un sistema que incluye el Sol, 8 planetas y sus satélites, asteroides, cometas, meteoros y el espacio. Aproximadamente el 99,9% de la masa total proviene del Sol y sólo el 0,1% proviene de otros cuerpos celestes. Los planetas con asteroides se mueven alrededor del Sol en órbitas elípticas. La ciencia que estudia estos cuerpos celestes es la astronomía. este modelo Muestra claramente las órbitas planetarias y el orden de su ubicación. Hoy en día existen muchas variedades de modelos.

Última actualización: 21/04/2016

Los degradados representan una transición suave de un color a otro. CSS3 tiene varios 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 comienzo 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í:

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 repetidos. gradientes lineales. 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 gradiente, ya que se considera 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 escribe y luego agrega 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.

Mesa 1. Tipos de degradado

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		De derecha esquina superior hacia abajo a la 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

Presioname suavemente

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 dos primeros 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 en 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 otros no tendrán problemas para entenderlo rápidamente. En general lo recomiendo mucho.

Degradado: rellenar un área seleccionada con una secuencia de tonos de color con transiciones suaves entre ellos. El degradado se utiliza para la visualización. transición suave entre dos o más tonos de color específicos. Ejemplo de gradiente:

Anteriormente, se utilizaban imágenes de fondo para crear un efecto de degradado. Ahora puedes usar CSS3 para crear un fondo degradado. Los elementos con degradados CSS3 se ven mejor cuando se amplían que sus contrapartes de imagen de fondo del complemento, ya que el navegador genera el degradado directamente en el área especificada.

Tenga en cuenta que el degradado CSS es una imagen de fondo generada por el navegador, no color de fondo por lo que se define como el valor de la propiedad de imagen de fondo. Esto significa que el degradado se puede especificar no solo como el valor de la propiedad background-image, sino también en cualquier lugar donde se pueda insertar una imagen de fondo, como en list-style-image y background.

CSS3 define dos tipos de degradados:

• Degradado lineal(Degradado lineal): una transición suave de un color a otro en línea recta.
• gradiente radial(Degradado radial): una transición suave de un color a otro desde un punto en todas las direcciones.

Degradado lineal

Un degradado lineal se extiende en línea recta, mostrando una transición suave de un tono de color a otro. Se crea un degradado lineal utilizando la función linear-gradient(). La función crea una imagen que es un degradado lineal entre los tonos de colores especificados. El tamaño del degradado corresponde al tamaño del elemento al que se aplica.

La función linear-gradient() toma los siguientes argumentos separados por comas:

• El primer argumento es el grado del ángulo o palabras clave que definen el ángulo de dirección de la línea de gradiente. Argumento opcional.
• Una lista separada por comas de dos o más colores, cada uno de los cuales puede ir seguido de una posición de parada.

El degradado lineal más simple requiere sólo dos argumentos que especifiquen los colores inicial y final:

Div (imagen de fondo: gradiente lineal (negro, blanco); ancho: 200 px; alto: 200 px;) Intente »

Pasar dos argumentos a la función establece un gradiente vertical con el punto inicial en la parte superior.

La dirección de la línea de gradiente se puede determinar de dos maneras:

Usando grados Como primer argumento, puede pasar el grado del ángulo de la línea de gradiente, que determina la dirección del gradiente, por ejemplo, el ángulo 0deg (abreviatura de grado - grado) define la línea de gradiente desde el borde inferior de el elemento hacia la parte superior, el ángulo de 90 grados define la línea de gradiente de izquierda a derecha, etc. En pocas palabras, los ángulos positivos representan una rotación en el sentido de las agujas del reloj, los ángulos negativos representan una rotación en el sentido contrario a las agujas del reloj.

Uso de palabras clave Las palabras clave "hacia arriba", "hacia la derecha", "hacia abajo" o "hacia la izquierda" también se pueden pasar como primer argumento, estos representan los ángulos de las líneas de gradiente "0deg" "90deg" "180deg" " 270 grados" respectivamente.

El ángulo también se puede configurar usando dos palabras clave, por ejemplo, arriba a la derecha: la línea de degradado se dirige a la esquina superior derecha.

Un ejemplo de un gradiente especificado en diferentes direcciones:

Como se mencionó, un degradado lineal puede incluir una lista de más de dos colores, separados por una coma, y ​​el navegador los distribuirá uniformemente en toda el área disponible:

Div (margen: 10px; ancho: 200px; alto: 200px; float: izquierda;) #uno (imagen de fondo: gradiente lineal (a la derecha, rojo, azul, amarillo);) #dos (imagen de fondo: lineal- degradado(arriba a la izquierda, azul, blanco, azul) Intente »

Después de un color, puede especificar una posición de parada para él, que determina la ubicación del color (donde un color comienza a pasar a otro) en relación con los puntos inicial y final del degradado. La posición de parada se especifica utilizando unidades o porcentajes compatibles con CSS. Cuando se utilizan porcentajes, la posición de parada se calcula dependiendo de la longitud de la línea de gradiente. Un valor de 0% es el punto inicial del gradiente, 100% es el punto final.

Div (margen: 10px; ancho: 200px; alto: 200px; float: izquierda;) #uno (imagen de fondo: gradiente lineal (arriba a la derecha, azul, blanco 70%, azul);) #dos (imagen de fondo : gradiente lineal (abajo a la derecha, amarillo 10%, blanco, rojo, negro 90%);) #tres (imagen de fondo: gradiente lineal (a la derecha, negro 10%, amarillo, negro 90%);) Pruebe »

El valor del color se puede especificar. de varias maneras, por ejemplo: especifique el nombre del color, use valores hexadecimales (HEX), use la sintaxis RGB (RGBA) o HSL (HSLA). Por ejemplo, se puede utilizar un degradado con transparencia en combinación con un color de fondo o una imagen debajo del degradado para crear efectos visuales interesantes:

Div (margen: 10px; ancho: 300px; alto: 100px; color de fondo: verde;) #one (fondo: gradiente lineal (a la izquierda, rgb(255,255,0), rgba(255,255,0,0)); ) #dos (fondo: gradiente lineal (rgb(255,255,255), rgba(255,255,255,0)); )

Cuando hablamos de gradientes en CSS, estamos hablando de gradientes de colores.

Hay dos tipos de degradados en CSS:

• lineal: los colores van de un punto a otro, a lo largo directo pauta;
• radial: los colores van desde el centro del círculo hasta sus bordes, en todos instrucciones.

El gradiente se considera imagen de fondo y debe usarse con la propiedad adecuada.

gradiente lineal

La sintaxis de los gradientes lineales es bastante compleja, pero la idea básica es la siguiente:

• determinar lo deseado bandera;
• donde deberían aparecer estos colores a lo largo del eje(al principio, a la mitad, al final, etc.);
• en el cual dirección Debería haber un gradiente.

Comencemos con un degradado simple de dos colores:

Div (imagen de fondo: gradiente lineal (rojo, azul);)

Por defecto:

• dirección vertical, De arriba hacia abajo;
• primero colorear en comienzo(arriba);
• segundo colorear en fin(abajo).

Cambiando de dirección

Si la dirección de arriba hacia abajo no le conviene, puede cambiarla a una de las opciones:

• definir asignación de gradiente, utilizando palabras clave como arriba a la izquierda ;
• determinar especifico esquina en grados, como 45 grados.

Esta dirección debe establecerse antes color:

Div (imagen de fondo: gradiente lineal (abajo a la derecha, amarillo, morado); ancho: 200 px;)

Si quieres preguntar ángulo específico, entonces puedes usar el valor en grados:

• 0 grados - de abajo hacia arriba;
• 20 grados - ligeramente en diagonal, en el sentido de las agujas del reloj;
• 90 grados, como a las 15 en punto, de izquierda a derecha;
• 180 grados es el valor predeterminado, de arriba a abajo.

Div (imagen de fondo: gradiente lineal (20 grados, verde, azul); ancho: 150 px;)

Añadiendo más colores

Puedes insertar tantos colores como quieras. ellos lo harán distribuido uniformemente a lo largo del eje:

• dos colores: 0% y 100%
• tres colores: 0%, 50% y 100%
• cuatro colores: 0%, 33%, 67% y 100%

Div (imagen de fondo: degradado lineal (naranja, gris, amarillo); ancho: 150 px;)

Definición de puntos de color específicos

Si no desea que el color se distribuya uniformemente, puede configurar ciertas posiciones de color usando porcentajes (%) o píxeles (px):

Div (imagen de fondo: degradado lineal (naranja, gris 10%, amarillo 50%); ancho: 150px;)

En estos parámetros:

• el naranja no tiene ninguna posición de color especificada, por lo que el valor predeterminado es 0%;
• el color gris está más cerca de la parte superior, en un 10% en lugar de un 50%;
• El color amarillo ocupa la mitad del degradado, desde el 50% hasta el final del 100%.

gradiente radial

Mientras que los gradientes lineales siguen un solo eje, gradientes radiales extenderse en todas direcciones. Su sintaxis es muy similar a la de los gradientes lineales, ya que ambos tienen puntos de color. Pero en lugar de especificar una dirección, es necesario especificar:

• forma: círculo o elipse;
• punto de partida: cuál será el centro de un círculo o elipse;
• punto final: donde estará el borde del círculo o elipse.

Div (imagen de fondo: gradiente radial (rojo, amarillo); relleno: 1rem; ancho: 300px;)

Por defecto:

• gradiente es elipse;
• El primer color comienza en centro;
• el último color termina en el rincón más lejano.

Posición inicial

Posición inicial funciona como posición de fondo. Puede configurarlo mediante la palabra clave at.

Div (imagen de fondo: degradado radial (en la parte superior derecha, negro, gris claro); relleno: 1rem; ancho: 300px;)

Posición final

Por defecto, el formulario termina en el rincón más lejano. Puedes elegir:

• lado más cercano
• esquina más cercana
• lado más lejano
• esquina más alejada

Div (imagen de fondo: gradiente radial (esquina más cercana a 20 px 20 px, verde, azul); relleno: 1rem; ancho: 300 px;) div: hover (imagen de fondo: gradiente radial (lado más lejano a 20 px 20 px, verde, azul)

Tamaño fijo

En lugar de configurar las posiciones inicial y final, simplemente puede configurar tamaños específicos:

Div (imagen de fondo: gradiente radial (20px 10px al 75% 50%, violeta oscuro, rosa); relleno: 1rem; ancho: 300px;)

Los degradados en CSS son una herramienta poderosa, considerando numero infinito opciones.