Introducción
Al utilizar estilos de forma habitual tendrás que establecer el color del los diferentes elementos, por lo que debes conocer el modo de hacerlo. Los colores en CSS se pueden indicar de varias formas diferentes:
- Mediante palabras clave.
- Lee el artículo Códigos de colores.
- Mediante la función RGB.
- Lee el artículo La función RGB().
- Mediante el formato hexadecimal.
- Lee el artículo El formato hexadecimal.
- Mediante el formato HSL.
- (Voluntario) Leer Formato HSL.
- (Voluntario) Lee el artículo Descripción del modelo de color HSL.
¿De dónde a dónde van los valores de los colores RGB? ¿Qué significa la A de RGBA?
Las formas de indicar un color en CSS son las siguientes:
| Esquema | Nombre | Descripción |
|---|---|---|
red | Palabra clave predefinida | Establece un color mediante una palabra clave predefinida. |
rgb() | Función RGB | Utiliza una función rgb() (rojo, verde, azul). |
rgba() | Función RGB con canal alfa | Función rgb() o rgba() con un canal alfa (opacidad) añadido. |
#rrggbb | Código RGB hexadecimal | Notación RGB abreviada en hexadecimal. |
#rgb | Código RGB hexadecimal con canal alfa | Notación RGB abreviada en hexadecimal con un canal alfa añadido. |
hsl() | Función HSL | Función hsl() (matiz de color, saturación y brillo). |
hsla() | Función HSL con canal alfa | Función hsl() o hsla() con un canal alfa añadido. |
Puedes probarlo tú mismo en este enlace.
En CSS, se puede representar el color rojo con la palabra red?
¿Qué diferencia hay entre la notación legacy y la notación moderna?
¿Tiene algo que ver la notación RGB con la notación hexadecimal?
¿Para qué sirve el canal alfa?
¿Qué número en decimal simboliza FF (en hexadecimal)?
¿Qué significan las siglas HSL?
Las siglas HSL significan matiz de color (hue), saturación y luminosidad (brillo). La primera cifra selecciona el matiz de color, representado con H en el círculo exterior de la imagen. Se trata de un valor ANGLE de 0deg a 360deg. Por otro lado, las dos siguientes, son el porcentaje PERCENT de saturación y el brillo del color, respectivamente, en ambos casos un valor de 0% a 100%.
Color del primer plano
La propiedad color es la que debes utilizar para configurar el color del primer plano, es decir, el color del texto y el color por defecto del borde de un elemento.
Con respecto al color del primer plano deberás tener en cuenta que:
Si añades color al primer plano de una imagen, ésta seguirá viéndose pero el color se aplicará al borde de la imagen.
La propiedad border-color sobrescribe la propiedad color.
Para configurar el color de todo un documento debemos escribir una regla con esta propiedad color para el selector body.
La aplicación de color a los elementos de los formularios no funciona bien en todos los navegadores.
Los ejemplos siguientes muestran diversas formas de configurar el color del texto de los párrafos.
Ejemplos:
1
2
3
4
5
p {color: #0000FF; }
p {color: #00F; }
p {color: rgb(0,0,255); }
p {color: rgb(0%, 0%, 255%); }
p {color: gray; }
Color de fondo
Con la propiedad background-color no sólo se puede proporcionar un color de fondo a toda la página, también se puede configurar el color de fondo de cualquier elemento del documento, tanto si son elementos de bloque como de línea.
Las propiedades relativas al fondo no se heredan pero, como el valor predeterminado de esta propiedad es transparent, salvo que se especifique un color concreto, el color de fondo del elemento padre aparecerá a través de sus elementos hijos.
Ejemplo:
1
2
3
4
p {
padding: 5px;
background-color: #ccc;
}
Imágenes de fondo
Las imágenes las podrás configurar de forma muy completa ya que, además de poner una imagen como fondo de una página, podrás ajustar su punto de partida, su patrón de repetición, su posición dentro de un elemento cualquiera y lograr que permanezca fija en esa posición aunque se mueva el resto del documento. Para realizar esta configuración detallada se emplean las propiedades:
background-imagebackground-repeatbackground-positionbackground-attachmentbackground
background-image
Esta propiedad sirve para configurar la imagen de fondo de cualquier elemento.
La propiedad background-image prevalece sobre la propiedad background-color por lo que si con un elemento realizas declaraciones con estas dos propiedades ignorará la declaración de background-color.
En el siguiente ejemplo se muestra la configuración de la imagen de fondo, usando un archivo de imagen de nombre “fondo.gif”, en todo el documento excepto para el párrafo que tiene un identificador “cabecera” que tendrá como imagen de fondo un archivo de imagen de nombre “fondo-cuerpo.gif”:
1
2
body {background-image: url(fondo.gif); }
p#cabecera {background-image: url(fondo-cuerpo.gif); }
background-repeat
Permite configurar a tu gusto la forma en la que se repetirá la imagen cuando su tamaño sea más pequeño que la ventana del navegador. También permite evitar que la imagen se repita.
Ejemplos:
1
2
3
div#cuerpo {background-image: url(fondo.gif); background-repeat: no-repeat; }
div.horiz {background-image: url(imagen.gif); background-repeat: repeat-x; }
div.vert {background-image: url(imagen.gif); background-repeat: repeat-y; }
Explicación del código:
- En la primera línea, consigues que la imagen aparezca sólo una vez.
- En la segunda línea, la imagen se repetirá a lo ancho (horizontalmente) tantas veces como necesite.
- En la tercera línea, la imagen de fondo se repetirá a lo largo del documento (verticalmente).
background-position
Especifica la posición de la primera imagen que cubrirá el fondo del elemento en el que esté definida esta propiedad. Al posicionamiento podemos asignarles los valores: left, right, top, bottom y center los cuales se usan, normalmente, de dos en dos sin importar el orden (uno indica su posición horizontal y el otro indica su posición vertical). Si sólo se indica una, se supone que la otra es center.
En el siguiente ejemplo, se configura el fondo del elemento body con una imagen llamada “fondo.gif” que aparecerá sólo una vez en la parte superior central del cuerpo del documento.
Ejemplo:
1
2
3
4
5
body {
background-image: url(fondo.gif);
background-position: top center;
background-repeat: no-repeat;
}
Para el posicionamiento se pueden emplear diferentes medidas de longitud. En este caso, las medidas son relativas al extremo superior izquierdo del elemento. En el siguiente ejemplo, se configura el mismo fondo de antes que aparecerá a 150 píxeles de la esquina superior izquierda del cuerpo del elemento (horizontal y verticalmente):
1
2
3
4
5
body {
background-image: url(fondo.gif);
background-position: 150px 150px;
background-repeat: no-repeat;
}
También puedes utilizar los valores porcentuales. Como seguro supones, si indicas sólo un valor se asume que el otro es un 50%. Debes tener en cuenta que el valor porcentual se aplica “al contenedor y a la imagen en sí”. En el siguiente ejemplo se muestra la regla de estilo que logra que la imagen quede colocada en el centro del elemento body:
1
2
3
4
5
body {
background-image: url(imagen.gif);
background-position: 50% 50%;
background-repeat: no-repeat;
}
background-attachment
Con esta propiedad puedes fijar la imagen en una posición concreta. Se le pueden asignar los valores: scroll, fixed e inherit, siendo scroll el valor por defecto. Se suele emplear el valor fixed para conseguir que la imagen no se desplace con el documento.
background
Esta propiedad permite configurar todas las propiedades de fondo vistas anteriormente usando una única declaración, de forma similar a lo que ocurría con la propiedad font, pero a diferencia de ésta, no tiene ninguna propiedad obligatoria y sus valores pueden aparecer en cualquier orden.
Sólo debes tener una restricción: la posición se indica con dos valores que deben aparecer juntos, primero el horizontal seguido, inmediatamente después, por el vertical ya que si sólo aplicamos un valor el otro se configura por defecto a center.
Ejemplos:
1
2
3
4
5
6
7
8
9
10
11
12
body {
background: url(fondo.gif) fixed top center no-repeat;
}
div.cabecera {
background: repeat-x url(fondo.gif) red;
}
p {
background: #ccc;
}
#contenido span.imagen {
background: url("imagenes/imagen.gif") 0 50% no-repeat;
}
Opacidades
La opacidad es una característica de los elementos que nos permite mostrar o no otros elementos que tengan por debajo. Para conseguir efectos de transparencia en algunos elementos tienes las siguientes propiedades:
opacityfilter
opacity
Esta propiedad permite asignar valores comprendidos entre 0 (invisible o totalmente transparente) y 1 (totalmente opaco).
filter
Esta propiedad tiene varios efectos: degradaciones, desenfocados, sombras, etcétera. Para lograr la transparencia hay que aplicar el filtro alpha, con valores entre 0 y 100.
Ejemplos:
1
2
3
.element {
filter: blur(5px); /* Aplica un desenfoque de 5 píxeles */
}
1
2
3
.element {
filter: brightness(150%) contrast(120%) sepia(50%); /* Aumenta el brillo, el contraste y añade un toque de sepia al elemento */
}