CSS, Curso Intensivo – Lección 05, Fondos

El manejo de los fondos de las cajas por medio de CSS se puede realizar de varias formas. La primera usando colores solidos o planos, la segunda usando degradados y la tercera usando mapas de bits.

Fondos Planos

La propiedad ‘background’ permite colocar fondos con colores planos, el sistema de color puede ser por medio de palabras claves, hexadecimal, RGB, HSL o HSA.

Palabra clave, nombres de los colores, los 16 colores básicos son: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, y yellow:

background-color: red;

Notación hexadecimal:

background: #ff0000;
background: #f00;

Notación funcional RGB:

background: rgb( 255, 0, 0);
background: rgb( 100%, 0%, 0%);

Notación funcional HSL: Hue Saturation Lightness

background: hsl(240, 50%, 80%);

Notación funcional RGB o HSL con Alpha:

background-color: rgba(0, 0, 0, 0.2); 0-1
background-color: hsla(0, 0%, 0%, 0.2);

App Web para manejar colores en todos sus rangos métricos:

http://colorizer.org/

Fondos Degradados

En CSS3 ahora es posible construir degradados de color lineales, diagonales o radiales. Es una buena práctica colocar un color plano de base de manera que si por alguna razón el degradado no se puede mostrar, se muestre el color plano.

Degradados lineales:

.degradado-lineal{
    background-color: #EEE;
    background: linear-gradient(purple, blue, aqua, yellow, orange, red);
}

Degradados diagonales:

.degradado-diagonal{
    background-color: #EEE;
    background: linear-gradient(to bottom right, blue, aqua);
}

.degradado-diagonal-2{
    background-color: #EEE;
    background: linear-gradient(60deg, blue, yellow);
}

Degradados radiales:

.degradado-radial{
    background-color: #EEE;
    background: radial-gradient(red, orange, yellow);
}

App Web para manejar degradados y esquemas de color:

https://coolors.co/

Fondos de Imagen

Para adicionar texturas y mapas de bits, por medio de CSS se pueden adicionar imágenes a los fondos, usando la función url() y la ruta a la imagen.

background-image: url("../img/background.png");

Colocación de las imagines, CSS permite gran control en la forma en que se colocan las imágenes, se repiten o se posicionan dentro de la caja:

Repetición (repetir en x o repetir en y):

    background-image: url("../img/background.png");
    background-repeat: no-repeat;

Posición (eje horizontal eje vertical (top, center, bottom / left, center, right)):

background-image: url("../img/background.png");
background-position: 10% 10%;