CSS | Colores HSL y HSLA

Colores HSL

Los valores de color HSL  son compatibles con IE9 +, Firefox, Chrome, Safari, Opera.
HSL es sinónimo de matiz, saturación y luminosidad. es un modelo de representaciones considerado "natural", ya que se acerca bastante a la percepción fisiológica del color que tiene el ojo humano.

El modelo HSL consiste en descomponer el color según criterios fisiológicos:

• Matiz, que corresponde a la percepción del color,
• Saturación, que describe la intensidad o palidez del mismo,
• Luminosidad, que indica el grado de claridad u oscuridad de un color.

"Matiz" es un valor que representa el ángulo en el circulo de color (de 0 a 360), 0 o 360 es rojo, 120 es de color verde, 240 es de color azul. La "saturación" es un valor porcentual y la "luz" también 0% es de color negro, 100% es de color blanco.

A simple vista parece complicado trabajar con este formato pero no lo es, el valor de color HSL se considera mas intuitivo que el RGB, de hecho, cuando tenemos definido un color, es decir un matiz, podemos hacernos una idea preconcebida de lo que pueden generar los cambios tanto en la saturación como en la luminosidad.

Colores HSLA

Valores de color HSLA  son una extensión de los valores de color HSL con un canal alfa - que especifica la opacidad del objeto.  la sintaxis es la siguiente:

El parámetro alfa es un número entre 0.0 (completamente transparente) y 1.0 (totalmente opaco).Tomando como referencia el ejemplo anterior le añadiremos un canal alfa al color de fondo:

enlaces que pueden interesarte:

• CSS | El color en CSS y sus valores.
• CSS | RGB y RGBA
• CSS | Colores predefinidos y hexadecimales

Hasta la próxima!!!

CSS | Colores RGB y RGBA

Colores RGB:

Los Valores de color RGB son compatibles con los principales navegadores. Un valor de color RGB se especifica de la siguiente manera:

Cada parámetro (rojo, verde y azul) define la intensidad del color y puede ser un número entero entre 0 y 255 o un valor de porcentaje de 0% a 100%.

Colores RGBA:
Los Valores RGBA de color son compatibles con IE9 +, Firefox 3 +, Chrome, Safari, Opera y son una extensión de los valores de color RGB, con un canal alfa  que especifica la opacidad del objeto.

Un valor de color RGBA se especifica de la siguiente manera:

 El parámetro alfa es un número entre 0.0 (completamente transparente) y 1,0 (totalmente opaco). Modifiquemos el ejemplo anterior añadiendo un canal alfa al texto:

enlaces que pueden interesarte:

• CSS | El color en CSS y sus valores.
• CSS | Colores predefinidos y hexadecimales
• CSS | HSL y HSLA

Hasta la próxima!!!

CSS | Colores predefinidos y hexadecimales

Colores predefinidos
Los colores predefinidos, constituyen simplemente una palabra clave que representa al color,  la lista inicial de palabras clave de color  aceptados por el standar contenía 17 colores, actuamente se han adoptado mas de 100 colores predefinidos que son soportados por la mayoría de navegadores, 
La sintaxis es muy simple, solo debes usar la palabra clave, sin comillas ni indicaciones suplementarias:

Uso de colores predeterminados

Colores Hexadecimales:
Los colores Hexadecimales son soportados por la mayoría de los navegadores  y se diferencian de un número decimal en que puede tomar hasta dieciséis valores distintos, que van del 0 al 9, y de la A a la F. Un color hexadecimal es un color RGB en notación hexadecimal, tiene el siguiente formato:

Donde el RR (rojo), GG (verde) y BB (azul)  

El formato de un valor RGB en notación hexadecimal es un ' # 'inmediatamente seguido por tres o seis caracteres hexadecimales. Una notación de tres dígitos es convertida a una de seis replicando el dígito de cada grupo. La declaración abreviada se convierte en seis valores de la siguiente manera de esta forma no existe profundidad de color:

veamos la aplicación de este valor de color en un ejemplo:

enlaces que pueden interesarte:

• CSS | El color en CSS y sus valores.
• CSS | RGB y RGBA
• CSS | HSL y HSLA

Hasta la próxima!!!

CSS | El color en CSS y sus valores

Por lo general nos acostumbramos a utilizar un formato de color determinado y olvidamos el resto, tiene lógica partiendo de la base que realmente el color no cambia (o eso parece) por cambiar de formato sino que lo único que cambia es la forma de referirse a el, pero no sobra conocer  los valores de color que CSS acepta como formatos válidos, ya que las alternativas aumentan, los diferentes formatos dan posibilidades diferentes, por ejemplo el HSL permite configurar la luz de un color o la intensidad, mientras que el RGB nos permite eliminar con facilidad cualquier profundidad de color, los valores de color CSS pueden ser:

• Nombres de los colores predefinidos
• Colores hexadecimales 
• RGB
• RGBA
• HSL
• HSLA

Las siguientes publicaciones comentarán estos items anteriores, en esta publicación les dejo una lista con los  nombres de colores predefinidos y sus correspondiente códigos hexadecimal y RGB. 

Nombre Predeterminado		HEX	RGB
Black		#000000	rgb(0,0,0)
Navy		#000080	rgb(0,0,128)
DarkBlue		#00008B	rgb(0,0,139)
MediumBlue		#0000CD	rgb(0,0,205)
Blue		#0000FF	rgb(0,0,255)
Teal		#008080	rgb(0,128,128)
DarkCyan		#008B8B	rgb(0,139,139)
DeepSkyBlue		#00BFFF	rgb(0,191,255)
DarkTurquoise		#00CED1	rgb(0,206,209)
DarkGreen		#006400	rgb(0,100,0)
Green		#008000	rgb(0,128,0)
OliveDrab		#6B8E23	rgb(107,142,35)
Olive		#808000	rgb(128,128,0)
LawnGreen		#7CFC00	rgb(124,252,0)
Chartreuse		#7FFF00	rgb(127,255,0)
Lime		#00FF00	rgb(0,255,0)
MediumSpringGreen		#00FA9A	rgb(0,250,154)
SpringGreen		#00FF7F	rgb(0,255,127)
MediumAquaMarine		#66CDAA	rgb(102,205,170)
Aqua		#00FFFF	rgb(0,255,255)
Cyan		#00FFFF	rgb(0,255,255)
Aquamarine		#7FFFD4	rgb(127,255,)
SkyBlue		#87CEEB	rgb(135,206,235)
LightSkyBlue		#87CEFA	rgb(135,206,250)
SlateBlue		#6A5ACD	rgb(106,90,205)
CornflowerBlue		#6495ED	rgb(100,149,237)
DimGray		#696969	rgb(105,105,105)
DimGrey		#696969	rgb(105,105,105)
Gray		#808080	rgb(128,128,128)
Grey		#808080	rgb(128,128,128)
SlateGray		#708090	rgb(112,128,144)
SlateGrey		#708090	rgb(112,128,144)
LightSlateGray		#778899	rgb(119,136,153)
LightSlateGrey		#778899	rgb(119,136,153)
MediumSlateBlue		#7B68EE	rgb(123,104,238)
Maroon		#800000	rgb(128,0,0)
DarkRed		#8B0000	rgb(139,0,0)
Indigo		#4B0082	rgb(75,0,130)
Purple		#800080	rgb(128,0,128)
DarkMagenta		#8B008B	rgb(139,0,139)
BlueViolet		#8A2BE2	rgb(138,43,226)
DarkViolet		#9400D3	rgb(148,0,211)
DarkOrchid		#9932CC	rgb(153,50,204)
MediumPurple		#9370D8	rgb(147,112,219)
SaddleBrown		#8B4513	rgb(139,69,19)
Sienna		#A0522D	rgb(160,82,45)
Brown		#A52A2A	rgb(165,42,42)
FireBrick		#B22222	rgb(178,34,34)
DarkGoldenRod		#B8860B	rgb(184,134,11)
DarkSeaGreen		#8FBC8F	rgb(143,188,143)
YellowGreen		#9ACD32	rgb(154,205,50)
GreenYellow		#ADFF2F	rgb(173,255,47)
DarkGray		#A9A9A9	rgb(169,169,169)
DarkGrey		#A9A9A9	rgb(169,169,169)
LightGreen		#90EE90	rgb(144,238,144)
PaleGreen		#98FB98	rgb(152,251,152)
LightBlue		#ADD8E6	rgb(173,216,230)
PaleTurquoise		#AFEEEE	rgb(175,238,238)
LightSteelBlue		#B0C4DE	rgb(176,196,222)
PowderBlue		#B0E0E6	rgb(176,224,230)
MediumOrchid		#BA55D3	rgb(186,85,211)
RosyBrown		#BC8F8F	rgb(188,143,143)
DarkKhaki		#BDB76B	rgb(189,183,107)
Silver		#C0C0C0	rgb(192,192,192)
Crimson		#DC143C	rgb(220,20,60)
MediumVioletRed		#C71585	rgb(199,21,133)
Peru		#CD853F	rgb(205,133,63)
IndianRed		#CD5C5C	rgb(205,92,92)
GoldenRod		#DAA520	rgb(218,165,32)
Chocolate		#D2691E	rgb(210,105,30)
Tan		#D2B48C	rgb(210,180,140)
LightGray		#D3D3D3	rgb(211,211,211)
LightGrey		#D3D3D3	rgb(211,211,211)
Thistle		#D8BFD8	rgb(216,191,216)
Gainsboro		#DCDCDC	rgb(220,220,220)
LightCyan		#E0FFFF	rgb(224,255,255)
Lavender		#E6E6FA	rgb(230,230,250)
Orchid		#DA70D6	rgb(218,112,214)
PaleVioletRed		#D87093	rgb(219,112,147)
Plum		#DDA0DD	rgb(221,160,221)
BurlyWood		#DEB887	rgb(222,184,135)
DarkSalmon		#E9967A	rgb(233,150,122)
Violet		#EE82EE	rgb(238,130,238)
LightCoral		#F08080	rgb(240,128,128)
SandyBrown		#F4A460	rgb(244,164,96)
Khaki		#F0E68C	rgb(240,230,140)
PaleGoldenRod		#EEE8AA	rgb(238,232,170)
AliceBlue		#F0F8FF	rgb(240,248,255)
HoneyDew		#F0FFF0	rgb(240,255,240)
Azure		#F0FFFF	rgb(240,255,255)
Wheat		#F5DEB3	rgb(245,222,179)
Beige		#F5F5DC	rgb(245,245,220)
WhiteSmoke		#F5F5F5	rgb(245,245,245)
MintCream		#F5FFFA	rgb(245,255,250)
GhostWhite		#F8F8FF	rgb(248,248,255)
DodgerBlue		#1E90FF	rgb(30,144,255)
LightSeaGreen		#20B2AA	rgb(32,178,170)
ForestGreen		#228B22	rgb(34,139,34)
LimeGreen		#32CD32	rgb(50,205,50)
SeaGreen		#2E8B57	rgb(46,139,87)
DarkSlateGray		#2F4F4F	rgb(47,79,79)
DarkSlateGrey		#2F4F4F	rgb(47,79,79)
MediumSeaGreen		#3CB371	rgb(60,179,113)
Turquoise		#40E0D0	rgb(64,224,208)
MediumTurquoise		#48D1CC	rgb(72,209,204)
RoyalBlue		#4169E1	rgb(65,105,225)
SteelBlue		#4682B4	rgb(70,130,180)
DarkSlateBlue		#483D8B	rgb(72,61,139)
DarkOliveGreen		#556B2F	rgb(85,107,47)
CadetBlue		#5F9EA0	rgb(95,158,160)
MidnightBlue		#191970	rgb(25,25,112)
Red		#FF0000	rgb(255,0,0)
DeepPink		#FF1493	rgb(255,20,147)
Fuchsia		#FF00FF	rgb(255,0,255)
Magenta		#FF00FF	rgb(255,0,255)
HotPink		#FF69B4	rgb(255,105,180)
OrangeRed		#FF4500	rgb(255,69,0)
Darkorange		#FF8C00	rgb(255,140,0)
Orange		#FFA500	rgb(255,165,0)
Gold		#FFD700	rgb(255,215,0)
Yellow		#FFFF00	rgb(255,255,0)
Coral		#FF7F50	rgb(255,127,80)
Salmon		#FA8072	rgb(250,128,114)
Tomato		#FF6347	rgb(255,99,71)
LightSalmon		#FFA07A	rgb(255,160,122)
LightPink		#FFB6C1	rgb(255,182,193)
Pink		#FFC0CB	rgb(255,192,203)
PeachPuff		#FFDAB9	rgb(255,218,185)
NavajoWhite		#FFDEAD	rgb(255,222,173)
Moccasin		#FFE4B5	rgb(255,228,181)
Bisque		#FFE4C4	rgb(255,228,196)
AntiqueWhite		#FAEBD7	rgb(250,235,215)
Linen		#FAF0E6	rgb(250,240,230)
LightGoldenRodYellow		#FAFAD2	rgb(250,250,210)
OldLace		#FDF5E6	rgb(253,245,230)
MistyRose		#FFE4E1	rgb(255,228,225)
BlanchedAlmond		#FFEBCD	rgb(255,235,205)
PapayaWhip		#FFEFD5	rgb(255,239,213)
LavenderBlush		#FFF0F5	rgb(255,240,245)
SeaShell		#FFF5EE	rgb(255,245,238)
Cornsilk		#FFF8DC	rgb(255,248,220)
LemonChiffon		#FFFACD	rgb(255,250,205)
FloralWhite		#FFFAF0	rgb(255,250,240)
Snow		#FFFAFA	rgb(255,250,250)
LightYellow		#FFFFE0	rgb(255,255,224)
Ivory		#FFFFF0	rgb(255,255,240)
White		#FFFFFF	rgb(255,255,255)

He omitido el HSL, si bien hay generadores que pasan un valor RGB a HSL y viceversa mi opinión personal es que el HSL se trabaja de manera independiente, hablaremos un poco de esto en el artículo CSS | HSL y HSLA.


Les dejo un enlace que a mi me ha sido muy útil, es un generador on-line de códigos de color hexadecimal y RGB.

Hasta la próxima!!!

CSS1 | Border-style

Esta propiedad es bastante sencilla y  sin animo de quitarle importancia, haremos solo un repaso... 


Border-style configura el estilo de los cuatro bordes de un elemento, la propiedad acepta de uno a cuatro valores :

border-style: value;

Donde "value" representa una de las siguientes palabras claves: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset o inherit.


Por defecto el valor de border-style es "none", no se muestra borde alguno, por eso siempre que queremos trabajar con bordes debemos especificar esta propiedad con un estilo,  sino simplemente el borde no se verá. El valor "hidden" visualmente es idéntico a "none", solo cambia la forma en la que se resuelven los conflictos entre bordes adyacentes de las celdas de las tablas. El valor "inherit" especifica que el estilo de borde será heredado del elemento padre.  el resto de estilos esta representado en la siguiente imagen:

     La imagen corresponde a una captura de pantalla en el navegador Google Chrome. 

La propiedad border-style es soportada  por la mayoría de los navegadores. De todos modos en algunos casos puede variar la visualización de un navegador a otro. En la siguiente imagen se muestra la interpretación de IE y de Google Chrome de un div con un estilo de borde "ridge" y para apreciarlo mejor el borde tiene un border-whitdh: 10px; : 

Hemos utilizado hasta ahora la forma abreviada, en la que configuramos todos los bordes con el mismo valor:

border-style: double;

Veamos ahora la posibilidad de combinar los valores dentro de la misma sentencia. Como comentamos antes, esta propiedad acepta hasta cuatro valores que se asignaran a el borde superior, derecho, inferior e izquierdo respectivamente. Si especifican tres valores, el primero hace referencia al borde superior, el segundo es el valor de los bordes izquierdo y derecho y el tercero es el borde inferior y si se especifican  dos valores, el primero hace referencia a los bordes superior e inferior y el segundo es el valor de los bordes izquierdo y derecho:

También podemos especificar un lado concreto utilizando borde-top-style, border-rigth-style, border-bottom-style o border-left-style, en el siguiente gráfico se muestra las propiedades del gráfico anterior especificadas de manera independiente:

No hay especificaciones sobre la manera en que se visualiza el efecto o es espaciamiento de puntos. 


Espero que les haya sido de utilidad... hasta la próxima!!!

CSS | Border-radius & Border-width

Muy bien, continuemos un poco con la fructuosa relación entre las propiedades border-radius y border width.


Por un lado tenemos border-witdh que nos permite dar un ancho específico a los bordes, y por otro lado border-radius que nos permite redondear las esquinas teniendo como referencia el radio vertical y horizontal de un cuarto de elipse que nos determinará la curvatura.


En el siguiente ejemplo veremos algo que hemos visto muchas veces, un div con un ancho de borde idéntico en los cuatro bordes y con una curvatura de mismo radio para todas las esquinas,la relación entre las propiedades empieza en la curvatura de la parte interior del borde que se determina por el radio menos en ancho de borde :

border-width:2px; 
border-radius:10px;

Si el resultado de Radio menos ancho de borde da como resultado un valor negativo, entonces se considera el valor como cero, se ve algo así (la parte interior del borde no tiene curvatura):

  border-width: 20px; 

border-radius: 18px;

hasta ahora hemos visto la relación entre border-witdh y border-radius en un elemento que tiene siempre el mismo ancho de borde, ahora bien, cuando dos bordes adyacentes tienen diferentes grosores la curvatura  va a mostrar una transición suave entre los bordes más gruesos y delgados, esto nos da mucho juego a la hora de crear. (Si el centro de la curvatura exterior y el de la curvatura interior son diferentes  la curva interior no puede ser un cuarto de elipse completa.):

border-width:10px 20px;
 border-radius:50px;



algunos ejemplos:

La combinación de los parámetros (radios horizontales, verticales y ancho de borde) puede dar muchas alternativas a la hora de trabajar con los objetos, de todos eso queda a criterio del programador o maquetador. 

espero que este articulo les haya sido de utilidad. 

Gracias y hasta la próxima!!!

CSS1 | Border-width

He saltado de manera un poco drástica a CSS1 pero hay un motivo para este salto, quiero llegar a la relacion entre border-radius y border-witdh, y para que todo sea mas claro haremos un repaso de border-witdh a modo de introducción a la siguiente publicación en la que veremos, por fin,  la relación entre estas dos propiedades.

La propiedad de CSS border-width es compatible con los principales navegadores.

Border-width, como en la mayoría de estilos, tiene un modo abreviado:

border-width: value;

Donde “value” es la medida que introducimos para definir la anchura de los bordes, esta medida se puede indicar mediante las palabras: thin (fino o delgado),  medium (medio)  y  thick (ancho) o utilizando unidades relativas o absolutas. De todos modos la unidad  que nos permite un control más preciso es el Pixel y es el que utilizaremos en este artículo.

Border-width, acepta de uno a cuatro valores, el orden de aplicación es: borde superior, borde derecho, borde inferior y borde izquierdo: 

border-width: 10px 20px 30px 40px;

Si se indican tres valores, el orden de aplicación será: borde superior, borde izquierdo y derecho, el tercer valor se aplica al borde inferior:

border-width:10px 20px 30px;

Si se indican dos valores, el primero se aplica al borde superior e inferior y el segundo valor se aplica al borde izquierdo y derecho:

border-width: 10px 20px;

Si se indica un solo valor, se aplica a los cuatro bordes:

border-width:10px;

Podemos definir un border-width para cada uno de los bordes utilizando top, left, rigth  y  bottom. 
En el siguiente ejemplo atribuimos un valor whidth al borde superior, el resto de bordes mantiene el valor por defecto que es "medium":

border-top-width: 10px;

Es importante recordar que el “border-style” por defecto es “none” por lo que debemos asignar un estilo de borde sino border-width simplemente no se verá.

Hasta aquí llega el articulo de hoy, espero que haya sido de vuestro agrado, en el próximo articulo veremos la relación entre border-width y border-radius.

hasta la próxima!!!