Miercoles, 30 de Octubre de 2024
22:34:02 | GMT -5 buscar...
Inicio / Unidades, Color / Colores en CSS Unidades.
Color
Colores en CSS
Unidades en CSS
Colores en CSS
La recomendación W3C en CSS Color Module Level 3 describe los sistemas de
definición de colores (nombres o códigos numéricos) que se pueden utilizar en
las hojas de estilo, así como la forma de definir la opacidad de los elementos. Recursos ...
Un color puede ser descrito en cualquiera de las siguiente maneras:
Visual Studio code
1. Usando una palabra clave . Sublime Text
CSS LINT
CSS 2. Usando el sistema RGB
RGB, con notación #-hexadecimal o las notaciones
Normalize
funcionales rgb() y rgba()
Conceptos
3. Usando el sistema HSL
HSL, con las notaciones funcionales hsl() y hsla()
Selectores
Asociado con el color en el espacio sRGB, un valor del tipo color también
tiene una coordenada alpha-channel (canal alfa) o valor de transparencia
Unidades, Color
(opacidad), indicando cómo se debe mezclar el color con su color de fondo.
Modelo de cajas
Los valores del tipo color en CSS pueden ser interpolados para lograr
Posicionamiento animaciones o para crear valores gradient . En este caso son interpolados en
cada uno de sus componentes rojo, verde y azul, conteniendo, cada uno de
Textos, Enlaces ellos, un número decimal.
Listas, Menús
Formas de describir un valor de tipo color
Tablas, Columnas
Diseño (Layout) Palabras clave de Colores
Imagen, Filtros, ... Las palabras clave de colores son identificadores, en los que no hay distinción
entre mayúsculas y minúsculas y que sirven para representar un color
Movimientos concreto, por ejemplo red, blue, brown, lightseagreen. El nombre describe el
color aunque es mayormente artificial. La lista de valores válidos cambia
Formularios
bastante de una especificación a otra.
TAREAS Especificación CSS Level 1
Especificación CSS Level 2.1
Especificación CSS Level 3
Especificación CSS Level 4
A excepción de los 16 colores básicos, que son comunes en HTML, los otros
no pueden ser usados en HTML.
Colores desconocidos hacen que la propiedad CSS sea declarada inválida.
Las propiedades inválidas son ignoradas y , por tanto, el color no tendrá
efecto.
Ninguna palabra clave de color tiene transparencia en CSS, son colores
planos y sólidos.
PALABRA CLAVE TRANSPARENT
La palaba transparent representa un color totalmente transparente, es
decir, el color que veremos será el colore de fondo. Técnicamente es un color
negro con un valor mínimo en el canal alfa y la manera de representarlo es
rgba(0,0,0,0 ).
PALABRA CLAVE CURRENTCOLOR
La palabra clave currentcolor permite hacer que las propiedades de color
sean heredadas por los elementos hijo, que no lo hacen por defecto.
También puede ser usada en propiedades que heredan el valor calculado de la
propiedad del elemento color, en este caso, será equivalente a la plabara clave
inherit en estos elementos, si es que la hubiera.
Sistema RGB()
Los colores puede ser definidos usando el modelo RGB (rojo-verde-azul) de
dos maneras:
Notación Hexadecimal #RRGGBB o abreviadamente #RGB
(los navegadores duplican el valor cuando solo escribimos 3)
El signo "#", seguido de seis caracteres hexadecimales (0-9, A-F).
El signo "#", seguido de tres caracteres hexadecimales (0-9, A-F).
La notación de tres dígitos (#RGB) y la de seis (#RRGGBB) son iguales.
Por ejemplo, #f03 y #ff0033 representan el mismo color
(porque los navegadores convierten #f03 en #ff0033.)
Es igual escribir las letras hexadecimales en mayúsculas o en minúsculas.
Notación funcional rgb(R,G,B)
"rgb", seguido por tres valores tipo entero o tres valores en porcentajes.
El número entero 255 representa el 100%, y F o FF en notación
hexadecimal.
Ejemplo para rojo: rgb(255,0,0) o también rgb(100%,0,0)
Lista de los 216 colores web, considerados colores base en HTML.
Sistema HSL()
Los colores también puede ser definidos usando el modelo HSL
tono (H
Hue) - saturación (SSaturation) - brillo (LLightness)
con la notación funcional hsl() . La ventaja del modelo HSL sobre el modelo
RGB es que es mucho más intuitivo: puedes adivinar los colores que tu quieres
y, luego, modificarlos. Es también más fácil crear conjuntos de colores
(manteniendo el tono (hue) igual y modificando el brillo y la satuación).
El tono (Hue) se representa como un ángulo del círculo de color, es decir, un
valor numérico entre 0 y 360 (sin unidades). Siendo 0 el rojo, 120 el verde y
240 el azul.
Por así decirlo, es el arco iris representado en un círculo.
Como hemos dicho, por definición para el rojo ponemos 0 o 360, y los
demas colores están dispersos por el círculo cromático
Al ser un ángulo implíca que podemos escribir también -120 ó 240 y 480
ó 120, etc...
La saturación y el brillo son representados en porcentajes.
100% es saturacion completa, y 0% es una sombra de gris.
100% brillo es blanco, 0% negro, y 50% es brillo "normal".
Ejemplo del color rojo utilizando el sistema HSL: hsl(0,100%,50%)
Transparencia
Si añadimos un parámetro más al sistema RGB o al HSL obtenemos un valor
para controlar la transparencia (opacidad) de un color. Este parámetro se
denomina canal Alpha y es un valor numérico que varía entre 0 y 1. Es decir,
colocar el número 0.5 significa un 50% de transparencia (o de opacidad, según
se mire).
La notación para RGB es: rgba(rojo,verde,azul,alpha)
rgba(rojo,verde,azul,alpha). Ejemplos:
para rojo puro es rgba(255,0,0,1) , y para rojo a un 30% transparente es
rgba(255,0,0,0.3)
La notación para HSL es: hsla(angulo,saturacion,brillo,alpha)
hsla(angulo,saturacion,brillo,alpha). Ejemplos:
para rojo puro es hsla(0,100%,50%,1) , y para rojo a un 60% transparente es
hsla(0,100%,50%,0.6)
Anterior
Licencias ... Visitas ...
Hoy ... 2
<3con14─LAB> 1998 - 2021
Ayer ... 44
www.3con14.biz
Week 132
(cc) Jesús Plaza M.
Mes ... 1090
─ Otros Reconocimientos ─
TOTAL ... 60042
