CSS3 Circular y gradientes elípticos [Consejos CSS3]
Hoy vamos a continuar nuestra discusión sobre Gradientes CSS3. En el post anterior te mostramos cómo crear Gradientes lineales. Esta vez vamos a cubrir sus parientes., Gradientes circulares y elípticos.
La sintaxis del gradiente
El gradiente en CSS3 se declara usando el imagen de fondo propiedad. Esto es para una mejor compatibilidad cuando también necesitamos agregar color de fondo en un solo conjunto de reglas, para que no choquen entre sí. Luego, para crear el gradiente radial simplemente lo llamamos con esto gradiente radial () función. Hay cuatro valores que se incluirán en la función para establecer el gradiente correctamente.
El primer valor define el posición de gradiente. Podemos usar una palabra clave descriptiva como arriba, abajo, centro e izquierda, o también podemos ser más específicos como, 50% 50% para establecer el gradiente en el centro o 0% 0% para establecer el gradiente para comenzar en arriba a la izquierda.
El segundo valor define el forma y el tamaño del gradiente, Hay dos argumentos para dar forma a los gradientes, primero el elipse cual es el predeterminado, y el segundo es circulo.
Y para el tamaño del gradiente, Podemos seleccionar uno de los siguientes seis argumentos..
| Valores | Descripción |
|---|---|
lado más cercano | La forma del degradado se encuentra con el lado del cuadro más cercano a su centro (para círculos) o con los lados vertical y horizontal más cercanos al centro (para puntos suspensivos). |
esquina más cercana | La forma del degradado está dimensionada de manera que se encuentra exactamente en la esquina más cercana de la caja desde su centro. |
lado más lejano | Similar al lado más cercano, excepto que la forma está dimensionada para coincidir con el lado de la caja más alejado de su centro (o lados verticales y horizontales). |
esquina más lejana | La forma del degradado está dimensionada de modo que se encuentra exactamente en la esquina más alejada de la caja desde su centro. |
Contiene | Un sinónimo para |
cubrir | Un sinónimo para |
Fuente de la tabla: Red de desarrolladores de Mozilla.
Por último, la tercera y la cuarta definen la combinación de colores. Entonces, aquí está cómo escribimos la sintaxis para crear el Elíptico gradientes, y esta vez vamos a utilizar cubrir para el tamaño del gradiente, por lo que se extenderá ampliamente, cubriendo el contenedor;
body background-image: radial-gradient (center center, elipse cover, # ffeda3, # ffc800);
Para crear el Circular gradiente simplemente podemos hacerlo de esta manera:
body background-image: radial-gradient (center center, circle cover, # ffeda3, # ffc800);
Como su nombre lo indica, la forma del degradado será un círculo..
Soporte del navegador
Sin embargo, solo tome nota, todos los navegadores aún están en el proceso de brindar soporte completo para esta función, por lo que aún necesitan el prefijo del proveedor. Por lo tanto, toda la sintaxis completa que funcionará en todos los navegadores modernos - IE10 +, Firefox 3.6+, Chrome 4.0+, Safari 4.0+ y Opera 11+ - se verá algo como esto;
cuerpo imagen de fondo: gradiente radial (parte inferior central, cubierta de elipse, # ffeda3, # ffc800); imagen de fondo: -o-radial-gradiente (parte inferior central, cubierta de elipse, # ffeda3, # ffc800); imagen de fondo: -ms-radial-gradient (parte inferior central, cubierta de elipse, # ffeda3, # ffc800); imagen de fondo: -moz-radial-gradient (parte inferior central, cubierta de elipse, # ffeda3, # ffc800); imagen de fondo: -webkit-radial-gradient (parte inferior central, cubierta de elipse, # ffeda3, # ffc800);
Echa un vistazo a la demostración o descarga la fuente para jugar con gradientes.
- Manifestación
- Descargar fuente
Ultimas palabras
Crear un gradiente radial CSS3 no es tan difícil como parece, y especialmente cuando obtiene ayuda de estas herramientas para generar código:
- Gradientes colorzilla
- Gradientoo
El gradiente radial es solo un tipo de dispositivos CSS3, continuaremos nuestra discusión sobre el tema en futuras publicaciones, así que estad atentos a Hongkiat.com
