En este tutorial veremos cada uno de los métodos que emplea CSS para asignar colores a los elemento de HTML.
1 – Aplicar Color Por Medio De Keywords O Palabras Clave
CSS define mas de 140 keywords o palabras clave para asignar colores a las diferentes propiedades y estas son soportados e interpretados correctamente por todos los navegadores. Contamos con una base de 17 colores básicos y estándares y además 126 colores extendidos. Se tratan de nombres de colores en ingles para los básicos (black, yellow, blue, green..) y para los extendidos también nombres combinados en ingles (darkblue, greenyellow, lightgray..). Su uso es muy básico e intuitivo, solo debemos de conocerlos y aplicarlos, esta es la forma mas fácil de aplicar color por medio de CSS.
en realidad este método es poco utilizado por que contiene una cantidad limitada de colores, solo usamos este métodos para tareas sencillas donde contamos con colores puntales y básicos.
Fuente: w3School
2 – Aplicar Color Por Medio De Notaciones Hexadecimales
Este método de aplicar color en CSS esta representado por una cadena de caracteres hexadecimales con un hash en el frente. Un hexadecimal es una representación de 6 dígitos de un color. Los dos primeros dígitos (RR) representan un valor de rojo, los dos siguientes son un valor verde (GG), y el último son el valor azul (BB). Ejemplo: La cadena #fde410 da como resultado un color amarillo. Los dos primeros caracteres (fd) son el componente rojo del color, los dos en el medio (e4) son para el componente verde y los dos últimos (10) para el componente azul.
La regla CSS a continuación establece el color amarillo para el fondo del cuerpo y el color del texto se establece en el valor del negro.
Utilizando el metodo Shorthand para los valores Hexadecimales.
Este método es solo una forma de acortar las notaciones de 6 dígitos. Ahora, esto solo lo podemos hacer cuando los numero son repetitivos en sus diferentes valores. Ejemplo: para #66AA77 quedamos utilizando #6A7, para el color blanco que es #FFFFFF quedamos utilizando #FFF, para #000000 que es el negro quedamos utilizando #000.
Si te parece complicado dar con una combinación de caracteres para aplicar un color a una propiedad CSS Usted puede escoger los valores hexadecimales para un color utilizando una herramienta online o con el selector de color de Photoshop u otro programa de edición de imágenes.
3 – Aplicar Color Por Medio Del Metodo RGB
Además de utilizar la notación hexadecimal para representar los valores RGB, támbien podemos utilizar la función rgb(); en una hoja de estilos. Solo especificamos los valores de rojo, verde y azul como una lista separada por comas dentro del paréntesis.
El metodo rgb(); acepta los valores, ya sea como números en el rango de 0 a 255 o como porcentajes. Podemos utilizar las dos formas.
En la siguiente imagen vemos algunos colores representando el valor RGB.
Y para obtener los valores exactos para determinado color también podemos utilizar algún selector de color o el mismo photoshop.
3 – Aplicar Color Por Medio Del Metodo HSL
Soportada por todos los nevegadores modernos y en IExplorer desde la versión 9, esta característica implementada en la especificación CSS3 es la capacidad de especificar colores usando el matiz o tono, la saturación y la luminosidad, este método es HSL();. Este método fue construido para complementar el sistema RGB ya que con HSL podemos obtener muchos mas colores de una forma diferente.
Al igual que RGB, HSL también toma 3 parametros H=Hue, S=Saturation y L=lightness. En el primero que es el matiz declaramos un valor en grados del circulo de colores que que parte en 0º y termina en el mismo color después de dar un giro de 360º. Los valores segundo y tercero es decir la saturación y la luminosidad se definen en porcentajes.
Para definir el primer valor, Hue=Tono o Matiz nos basamos en la siguiente imagen.
Para definir la saturación y la luminosidad que son el segundo y tercer valor, nos basamos en porcentajes, donde:
Saturation = Saturación
- 0%: totalmente desaturado
- 50%: neutral
- 100%: totalmente saturado
Lightness = Luminosidad
- 0%: totalmente oscuro
- 50%: neutral
- 100%: totalmente claro.
Ejemplo, para el siguiente código obtendremos el color rojo, si miramos en la rueda de colores los 0, son los rojos. totalmente saturado y como una luminosidad neutra.
4 – Creación De Colores Con Transparencia Con Los Formatos RGBA Y HSLA De CSS3
El módulo color de CSS3 amplia los formatos de colores RGB y HSL para permitir la opacidad del color en cuestión utilizando el canal Alfa que define transparencia. Para definir un color con transparencia alfa utilizamos el valor rgba(); y hsla();. Ambas funciones toman cuatro valores separados por coma, como vimos anteriormente con RGB y HSL pero esta vez dentro de los paréntesis indicaremos el cuarto valor separado por una coma para indicar la cantidad de opacidad del color. Este cuarto valor lo definimos en un rango de 0 a 1 donde 0=Totalmente transparente y 1=Totalmente opaco, 0.5 o .5 para dar una semitransparencia.
Los siguientes ejemplos crean rojo semitransparente con los diferentes formatos y el cuarto valor Alfa:
El ajuste de la transparencia alfa de un color no sólo reduce la intensidad del color, sino que también permite que se vea cualquier fondo a través de el, el fondo se hace más visible cuanto más cerca el cuarto valor es 0.
Y esto es todo en cuanto a usar básicamente los colores y métodos para aplicarlos en CSS.
Soporte en navegadores: IE9+, Firefox 3+, Chrome, Safari, y Opera 10+.
Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros
Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve para más información
No hay comentarios:
Publicar un comentario