jueves, 31 de mayo de 2012

Background (Fondo) en CSS: Aprendiendo sus secretos: Parte 1 - Color y Modelos de color

Background es una de las propiedades CSS quizás más completas y quizás no tan sencillas de manejar, especialmente en el tema de los modelos de color ya sea hexadecimales, RGB o el nombre del color en inglés.

La propiedad background se compone de varias sub-propiedades, cosa que veremos más adelante, hoy solamente nos enfocaremos en background-color.

Me preguntaron, porqué no continuo los tutoriales y solamente estoy centrado últimamente en reseñas de anime y series de televisión, eso se debe a que de esos artículos obtengo miles de visitas por cada uno, mientras de los tutoriales apenas unos cientos.

La única cosa que hace que estos tutoriales continúen es su participación promocionando el contenido, con un Tweet o un enlace bastaría, el número de visitas a un artículo decide que sea abandonado o continuado.

Siguiente artículo 2: background-image

Propiedades CSS de background:
background-color
background-image
background-repeat
background-attachment
background-position
Desde mi punto de vista es un desperdicio poner background-color: nombre de color; porque cualquier otra regla declarada requerirá declarar por separado cada sub-propiedad. Así que al final de los tutoriales pondremos background como único parámetro y declaramos todos los valores en la misma línea.

Un ejemplo de regla básica aplicado al fondo del documento o etiquera body en hexadecimal color negro:
body
{
background-color : #FFFFFF;
}
Un ejemplo de regla básica aplicado al fondo del documento o etiqueta body en RGB color negro:
body
{
background-color : rgb(0,0,0);
}
Un ejemplo de regla básica aplicado al fondo del documento o etiquera body en con nombres en inglés color negro:
body
{
background-color : black;
}
Hexadecimales
Los colores hexadecimales son un código de 6 caracteres de extensión (o tres en modo resumido) que permiten representar en pantalla un color basado en un sistema de 16 caracteres, los primero números de 0 al 9 y las letras de la A a la F.

Un ejemplo básico sería para el color negro que se representa como 000000 (forma resumida 000), mientras que en el lado opuesto de la escala está F que representaría el blanco con su forma FFFFFF (forma resumida FFF). En CSS todo número hexadecimal va precedida por el signo "#":

Si esto lo hiciéramos para la regla body, definiendo un primer ejemplo con fondo blanco y otro con fondo negro:

Negro para la etiqueta body regla css:
body
{ background-color : #000; /* El elemento recibe un color negro de fondo */}
Blanco para la etiqueta body regla css:
body
{ background-color : #FFF; /* El elemento recibe un color blanco de fondo */}
RGB
Son colores aditivos o luminóforos que representan un color en pantalla que se basan en un sistema de 256 colores esto es, del 0 al 255 por cada canal, por un total de tres, recordando que R=Red (Rojo), G=Green (Verde) y B=Blue (Blue). Cuando los tres valores están a 255 eso es igual a blanco, cuando los tres están a 0 es negro. la regla se expresa como rgb(valorR,valorG,valorB).

Un ejemplo de regla básica aplicado al fondo del documento en RGB color negro:
body
{
background-color : rgb(0,0,0);
}
Un ejemplo de regla básica aplicado al fondo del documento en RGB color blanco:
body
{
background-color : rgb(255,255,255);
}

Un ejemplo de regla básica aplicado al fondo del documento en RGB color Azul:
body
{
background-color : rgb(0,0,255);
}

Modelos complementarios
Existen dos modelos complementarios a RGB que vale la pena ver, pero son más complicados, pero una vez que sabemos usar los modelos de color de cualquier programa de edición, son de los más simples de entender.

HSL (Hue, Saturation, Light)
Tono-matiz, Saturación y Brillo, este se compone de tres valores por tanto, el tono se basa en un canal 360 grados, otro en porcentaje de Saturación de 0% a 100% y otro del porcentaje de Brillo de 0% a 100%.
background-color: hsl(150,50%,20%);
HSLA (Hue, Saturation, Light, Alpha Channel)
Tono-matiz, Saturación, Brillo y Transparencia, este se compone de cuatro valores por tanto, el tono se basa en un canal de 360 grados, otro en porcentaje de Saturación de 0% a 100%, otro del porcentaje de Brillo de 0% a 100%, donde cero es negro y 100% es blanco y el último en grado de transparencia de un valor entre 0.0 y 1.0, donde 0.0 igual a 100% de transparencia y 1.0 es igual a 0% de transparencia, aunque los valores estén dados en términos de opacidad.
background-color: hsl(150,50%,20%,0.4);
Nombre de color
Esto no lo aconsejo, pues no es que sea simple como poner ocre, aguamarino, sino que debemos elegir de una base de 147 nombres en inglés y esto es poco práctico a fin de cuentas. Para ese caso se declara como:
background-color: BlanchedAlmond;

Comentarios y Consultas

Los mensajes serán revisados a veces. No te olvides que soy una persona, no se trata de faltar al respeto, todos tenemos opiniones, no hay que enojarse.

Puedes marcar Notificarme para recibir la notificación de la respuesta.

4 comentarios:

  1. Esta muy bien el tutorial. Los colores en texto y en hexadecimal los habia usado, pero no asi el resto de opciones que propones.

    ResponderBorrar
  2. buena observacion en esta seccion de css3. Gracias por compartirlo.

    ResponderBorrar
  3. #FFFFFF es el código del color blanco; el negro es #000000

    ResponderBorrar

El ascenso de Skywalker(2019)

Joker 2019Una película que ha roto a divido a los fans muchos culparán a sus director por querer reparar Los últimos Jedi, no es su culpa al final.

[Leer artículo...]

La Espada del Inmortal (2019

Blade of The Immortal (2019)La historia de Manji, un guerrero samurái sin señor que ha sido condenado con la inmortalidad...

[Leer artículo...]

Kemono Michi: Rise Up (2019)

Kemono Michi: Rise Up (2019)Del autor de Konosuba, Genzo Shibata es un luchador japonés que es transportado a un mundo de fantasía, quien está obsesionado con los seres peludos.

[Leer artículo...]

ELI (2019)de Netflix

ELI (2019)de Netflix Reseña y criticaPelícula lanzada directo a video que nos cuenta una historia que parecería sacada de la Dimensión desconocida.

[Leer artículo...]

  © Cgnauta | CGsign blog | [Ver Licencia de uso] | Matius Lenin, Creative Commons, algunos derechos reservados

Regresar ARRIBA  

Vistas desde Mayo 2009

▼/▲ Archivo del Blog

Visitas totales

Información

IBSN: Internet Blog Serial Number 01-77-94-2008

Esta plantilla es creada y diseñada por Matius Lenin para CGnauta blog. Con Scripts de JQuery bajo licencia GNU/GPL. CGnauta es una marca registrada propiedad de Matius Lenin.