Con el propósito de controlar la intensidad de
colores detrás de un texto, configuraremos gradientes al fondo en documentos CSS.
Por desconocimiento de las diferentes combinaciones de colores los creadores de
páginas web tienen dificultades al
momento de especificar los diseños imaginados. Debido a ello, describiremos las
propiedades para definir las posiciones y formas exactas de unión de colores.
El gradiente es una variación, por
lo tanto, al aplicarlo a fondos CSS obtenemos colores mostrados con
variabilidad de tonos. Para configurar el gradiente:
- Identificamos
la declaración con background.
- Especificamos
el tipo, el cual puede ser lineal mediante linear
o en forma de radio con radial.
- Agregamos
luego de un guión gradient.
- Especificamos
dos colores, para ser combinados entre sí y mostrar el fondo deseado.
En la siguiente ilustración
mostramos la instrucción completa:
061-01_0708_ilu01.
Creación de un fondo con gradiente
En la siguiente imagen observamos
la diferencia entre ambos tipos de gradientes:
061-01_0708_ilu02.
Código CSS con fondo de gradiente
- La primera
división con la etiqueta div como
lineal, para unir los colores pink y blue.
- La segunda
división como radial, y se muestra la simulación de un circulo en medio.
Con los gradientes lineales, especificamos
múltiples estilos, como dirigir la división de colores hacia arriba, hacia
abajo, hacia la derecha o hacia la izquierda, además del ancho específico para
cada color, veamos la siguiente imagen:
061-01_0708_ilu03.
Código CSS con fondo de gradiente lineal
- En la
primera división tenemos la líneas hacia arriba y a la izquierda con to top left.
- En la
seguna división to bottom right para
líneas hacia abajo y a la derecha. Además, los colores blue y green tienen
porcentajes de espacio específicos, debido a ello, se muestran con mayor
pronunciación en comparación con la primera división.
En cuanto al diseño para los
gradientes radiales, tenemos tres tipos de especificaciones:
- la primera
es el tamaño del radio
- la segunda
es el tipo, circle para un circulo y ellipse para una elipse
- la tercera
opción es la posición del radio en la caja CSS.
La siguiente ilustración es un
ejemplo con todas las posibles especificaciones, a fin de observar la
diferencia entre cada una.
061-01_0708_ilu04.
Código CSS con fondo de gradiente radial
Por otra parte, aunque los colores
están definidos en inglés, es posible utilizar cualquier clasificación
disponible en el lenguaje CSS. En los fondos radiales, también se especifica el
porcentaje de cada color, así como en los gradientes lineales.
Keynotes
- Para configurar el gradiente: Identificamos
la declaración con background. Especificamos
el tipo, el cual puede ser lineal mediante linear
o en forma de radio con radial. Agregamos
luego de un guión gradient. Especificamos
dos colores, para ser combinados entre si y mostrar el fondo deseado.
- Con los gradientes lineales, especficamos
múltiples estilos, como dirigir la división de colores hacia arriba, hacia
abajo, hacia la derecha o hacia la izquierda, además del ancho específico para
cada color.
- En cuanto al diseño para los gradientes
radiales, tenemos tres tipos de especificaciones: la primera es el tamaño del
radio; la segunda es el tipo, circle para
un circulo y ellipse para una elipse;
la tercera opción es la posición del radio en la caja CSS.
- En los fondos radiales, también se especifica
el porcentaje de cada color, así como en los gradientes lineales.
MisiónCon el propósito de controlar de forma precisa la
intensidad de los colores detrás de un texto, agrega gradientes al fondo en un
documento CSS, según las recomendaciones oficiales de este lenguaje.
Pasos:
- Ubica el
estándar oficial de CSS reciente y lee la recomendación sobre fondos.
- Realiza el
un documento CSS con cinco tipos de gradientes diferentes conocimientos
aprendidos.
- Muestra el
código a un profesional en la materia por medio de vKonnect, y toma nota de sus sugerencias.
Sabrás que has tenido éxito cuando
el gradiente se muestre de forma correcta en el navegador web de preferencia.
¡Modifica el código hasta mostrar
correctamente el gradiente, compartelo en tu vPages y pide a tus compañeros una recomendación del mismo!
Tiempo disponible: 3 horas.
CierreMediante la configuración de gradientes al fondo en
documentos CSS, especificamos con facilidad los diseños imaginados para los
diferentes elementos de una página web. También,
controlamos de forma precisa la intensidad de colores detrás de un texto. Por
lo tanto, al aplicar con paciencia y organización lo aprendido, diseñaremos fondos
con profesionalidad.
