A fin de agregar con precisión vistosidad a
proyectos web, especificaremos
colores en documentos CSS, según las reglas de este lenguaje. El
desconocimiento de los tipos de definición de colores y los pasos correspondientes
conlleva a páginas de internet con estilos sin combinación y, en algunos casos
sin satisfacer las necesidades del proyecto. Debido a ello, determinaremos,
paso a paso, la forma de agregar colores en los sistemas inglés, hexadecimal y
decimal.
Cuando redactamos documentos con
el lenguaje HTML, obtenemos una página web
semánticamente ordenada. Sin embargo, al realizar una prueba mediante el
navegador web, observamos cómo la
muestra sin atractivos, solo las palabras en color negro, así como la primera
imagen. Por lo tanto, para mostrar diversos colores y atraer la vista del
usuario, es posible especificar colores en las declaraciones de selectores.
061-01_0602_ilu01. Página web con color y
sin color
Para asignar colores en CSS, es
necesario utilizar el atributo con la palabra “color”, luego dos puntos, y el
valor correspondiente del mismo:
- En inglés:
es necesario saber el nombre el color en este idioma, y agregarlo tal cual es.
- En
hexadecimal: es necesario saber la conversión de números hexadecimales, debido
a la definición del color con valores desde el cero hasta el nueve y,
posteriormente, de la letra “a” hasta la “f”. Es importante antecederlo con el
signo numeral, pues de lo contrario, no se aplica el color indicado.
- En decimal:
es necesario expresar los números del color en tres grupos de números del 0 al
255, separados por comas.
061-01_0602_ilu02. Asignación de colores
en lenguaje CSS
Existe una definición de color en
CSS, llamada RGB, la cual utiliza también números hexadecimales. Tales siglas
corresponden a Red, Green y Blue; en español, rojo, verde y azul,
los tres colores utilizados por un computador para combinarlos entre sí y
mostrar al usuario una diversidad de tonos. Cuando se especifica 0, quiere
decir una exposición del color baja; mientras, 255 se refiere a la exposición
alta. Por lo tanto, es posible realizar diversas combinaciones y obtener una
variedad de tonos.
061-01_0602_ilu03. Representación
de colores RGB
Además, tenemos a disposición los
colores RGBa, donde “a” es el valor Alpha,
representa la opacidad del color:
- Al
especificar 0, será totalmente transparente.
- Al
especificar 1, será totalmente opaco; es decir, no se ve a través de él.
Debido a ello, es posible utilizar
números entre ambos, hasta obtener la transparencia deseada. En la ilustración siguiente
está enmarcado por un cuadrado.
061-01_0602_ilu04. Representación de
colores RGBa
También, existen las especificaciones
de colores HSL y HSLA, con las cuales puntualizamos la luminosidad del color. Para
ello, es necesario estudiar el estándar oficial de W3C, específicamente el
módulo de color, ubicado en su página web.
Keynotes
- Para asignar colores en CSS, es necesario
utilizar el atributo con la palabra “color”, luego dos puntos, y el valor
correspondiente del mismo.
- Existe una definición de color en CSS,
llamada RGB, la cual utiliza también números hexadecimales. Tales siglas
corresponden a Red, Green y Blue; en español, rojo, verde y azul,
los tres colores utilizados por un computador para combinarlos entre sí y
mostrar al usuario una diversidad de tonos.
- Además, tenemos a disposición los colores
RGBa, donde “a” es el valor Alpha,
representa la opacidad del color: Al especificar 0, será totalmente
transparente. Al especificar 1, será totalmente opaco; es decir, no se ve a
través de él. Debido a ello, es posible utilizar números entre ambos, hasta
obtener la transparencia deseada.
- Existen las especificaciones de colores HSL
y HSLA, con las cuales puntualizamos la luminosidad del color. Para ello, es
necesario estudiar el estándar oficial de W3C, específicamente el módulo de
color, ubicado en su página web.
RetoEspecifica cinco colores diferentes en un documento
CSS, según las reglas de este lenguaje. Es necesario incluir los tres tipos de
métodos, junto a la clasificación RGB y RGBa.
¡Comparte los resultados del reto en tu vPages e invita a tus compañeros a comentar
otras especificaciones!
Tiempo disponible: entre 15 y 30 minutos.
CierreA través de la especificación de colores en
documentos CSS, creamos páginas de internet con estilos combinados, acordes con
las necesidades del proyecto, y agregamos vistosidad a los proyectos web con precisión. Mediante la disciplina y práctica constante, seremos los mejores
profesionales en el diseño de páginas web.
