CSS1 | background-attachment - Fijación del fondo

La propiedad background-attachment determina si una imagen de fondo es fija o se desplaza con el resto de la página cuando esta se desplaza (utilizando las barras de desplazamiento del navegador). 
La propiedad es compatible con los principales navegadores, aunque el valor de "inherit" no es compatible con Internet Explorer 7 y versiones anteriores. IE8 requiere un DOCTYPE!. IE9  para soportar "inherit". La sintaxis es la siguiente:

background-attachment:value;

Donde "value" puede ser cualquiera de las palabras claves siguientes:

• scroll: la imagen de fondo se desplaza con el resto de la página 
• fixed: la imagen de fondo está fija
• inherit: se hereda del elemento padre

Por defecto el valor de background-attachment es "scroll", es decir que la imagen de fondo se desplazara con el bloque:

scroll

Mencionamos anteriormente que para que la imagen de fondo no se desplace al utilizar las barras usamos la palabra clave "fixed":

fixed

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

CSS1 | Background-image

La propiedad background-image especifica una imagen para utilizarla como fondo de un elemento. la sintaxis es la siguiente:

background-image: url("ruta_de_imagen");

De manera predeterminada, la imagen se repite hasta cubrir todo el fondo del elemento.

veamos un ejemplo: 

Background-image: {url('ruta_de_imagen/nuestra_imagen.png');

la imagen anterior corresponde a un div al que se le ha aplicado una imagen de fondo, (he puesto un borde fino para mostrar los limites del div). Es conveniente, indicar siempre un color de fondo ya que si la imagen no estuviera disponible se mostraría el color de fondo.


Junto a background-image tenemos otras propiedades básicas que configuran detalles como repetición de fondo con background-repeat o posición del fondo con background-position, background-attachment y la implementación CSS3 nos ha traído nuevas propiedades como  background-size, background-origin o background-clip, de todos modos como en la mayoría (sino todas) de las propiedades CSS, se permite una forma abreviada para configurar en una sola línea todos estos parámetros, por medio de la propiedad background, a secas. 


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

CSS1 | Background-color

En en artículo anterior hemos visto como definir todos los parámetros del fondo en una sola línea con background, veamos las propiedades de manera independiente, en este artículo haremos un repaso a background-color. 


La propiedad background-color, establece el color de fondo de un elemento. la sintaxis es la siguiente:

background-color: value;

Las propiedades de fondo no se heredan, pero debido a que por defecto el valor inicial de background-color es transparente, los elementos que no tengan un valor de background-color mostraran el fondo de los elementos padre. 

Puede parecer que no tenga relevancia esta acotación, pero no podemos confundirnos, que podamos ver un elemento "hijo" con el fondo del elemento "padre" es simplemente por la opacidad predeterminada de su fondo y no por herencia. Si queremos que el fondo sea una propiedad heredada se utiliza la palabra clave "inherit"
la propiedad se complementa muy bien con border-radius, no hay ningún problema de la combinación de ambas, el relleno se adapta perfectamente a los bordes redondeados.

Background-color, simplifica mucho nuestro trabajo ya que puede aplicarse a diversos elementos, un párrafo, un titulo, etc

<h1> con color de fondo y border-radius

El valor del color, generalmente se define por un valor HEX ( "# FF0000"), un valor RGB  ("rgb (255,0,0)") o un nombre de color ( "red", "blue", etc).
La palabra clave "transparent" puede usarse para indicar que el fondo será transparente aunque por defecto ya lo es y la palabra clave "inherit" se utiliza para heredar el fondo del elemento padre, de todos modos debemos tener en cuenta que Internet Explorer en muchas de sus versiones no soporta esta configuración (IE8 requieres un !DOCTYPE. IE9 para soportar "inherit").Si quieres mas información sobre los colores en css, te invito que les eches un ojo a la publicación: CSS | El color en CSS y sus valores, si quieres información sobre la propiedad abreviada: CSS1 | Background - Trabajando con el fondo




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

CSS1 | Background - Trabajando con el fondo

Css nos permite configurar varias características del fondo en una sola propiedad: background.La sintaxis es la siguiente:

body {background:color url('image') repeat left top;}

Cuando se utiliza la propiedad abreviada, el orden de los valores es el siguiente:

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

Veamos un ejemplo de la propiedad en su estado abreviado:

La imagen de fondo que he utilizado es un png transparente:

En los siguientes artículos veremos cada valor de manera independiente. 
Hasta la próxima!

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!!!