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 son moderados serán revisados antes de publicarse.

Este no es un foro de adolescentes, no uses letras en vez de palabras completas como "q" en vez de "que", ni escribas tus mensajes en mayúsculas, se respetuoso con los demás, si no estás de acuerdo no comentes.

Una cosa es que no te guste una crítica, otra que uses un lenguaje inapropiado para demostrarlo. No me siento en la obligación de publicar ningún mensaje en específico o de leerlo entero si usas palabras altisonantes.

3 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.

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

    ResponderEliminar

Samurai Jack (2017), episodio 10 "Final"

Samurai Jack (2017)Jack se enfrenta por fin con Aku, todos tratan de ayudar al samurai y la sorpresa vendrá del pasado.

[Leer artículo...]

Noragami entra en paro indefinido

Noragami es suspendida temporalmenteUna de las autoras no puede continuar con su trabajo al frente del manga y se ha decidido meter la historia en hiatus, lo que puede significar...

[Leer artículo...]

Tales of Zestiria y su final Yuri

El final de Tales the Zestiria The XLas aventuras de Sorey llega a su fin con un final de lo más raro que he visto hasta ahora.

[Leer artículo...]

Warau Salesman New (2017) El vendedor sonriente

Warau Salesman New (2017) EstrenosSatoru descubre al culpable de la trama, es el momento de enfrentarse y tendrá que dar todo de sí para cambiar su suerte.

[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.

Anexos

Bitacoras.com