9.1 Combinación de funciones de color
El diseño web requiere un entendimiento más profundo y la aplicación de funciones de color para crear interfaces complejas, pero armónicas y adaptativas. Veamos manipulaciones más complejas con colores en CSS, usando funciones como rgba(), hsla(), hsl() y rgb().
Ejemplo 1: Creación de un gradiente semitransparente
Para crear gradientes complejos, se pueden combinar varias funciones de color.
En este ejemplo se usa un gradiente lineal que combina colores semitransparentes definidos mediante rgba() y hsla():
<div class="gradient"></div>
.gradient {
min-height: 200px;
background: linear-gradient(
to right,
rgba(255, 0, 0, 0.8),
hsla(240, 100%, 50%, 0.7),
rgba(0, 255, 0, 0.6)
);
}
Ejemplo 2: Gradiente con transición a través de varios colores
Aquí se utiliza un gradiente lineal en un ángulo de 45 grados, que pasa suavemente a través de cinco colores, cada uno de los cuales está definido por diferentes funciones de color:
<div class="gradient"></div>
.gradient {
min-height: 200px;
background: linear-gradient(
45deg,
hsl(0, 100%, 50%) 0%,
rgb(255, 255, 0) 25%,
hsla(240, 100%, 50%, 0.7) 50%,
rgba(0, 255, 0, 0.6) 75%,
rgb(0, 255, 255) 100%
);
}
9.2 Creación de sombras complejas y efectos semitransparentes
Ejemplo 3: Sombras usando rgba()
En este ejemplo se crea una sombra compleja que utiliza colores semitransparentes para crear un efecto de volumen y luz:
<div class="shadow"></div>
.shadow {
min-height: 155px;
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5),
-10px -10px 20px rgba(255, 255, 255, 0.2);
}
Ejemplo 4: Bordes y fondos semitransparentes
Los bordes y fondos semitransparentes pueden ser creados usando rgba() y hsla(), lo que permite crear efectos en capas y texturizados:
<div class="border-background"></div>
.border-background {
min-height: 200px;
border: 2px solid rgba(0, 0, 0, 0.5);
background-color: hsla(120, 100%, 50%, 0.3);
}
9.3 Animación y transiciones usando funciones de color
Ejemplo 5: Animación de fondo usando hsl()
En este ejemplo se usa una animación que cambia suavemente el color de fondo a través de diferentes tonos usando hsl():
<div class="animated-background"></div>
@keyframes color-change {
0% {
background-color: hsl(0, 100%, 50%);
}
50% {
background-color: hsl(120, 100%, 50%);
}
100% {
background-color: hsl(240, 100%, 50%);
}
}
.animated-background {
min-height: 200px;
animation: color-change 5s infinite;
}
Ejemplo 6: Transición de color de texto
Aquí el texto cambia suavemente de color y transparencia al pasar el cursor, usando rgba() y la propiedad transition:
<div class="text-transition">Some text</div>
.text-transition {
min-height: 100px;
color: rgba(255, 0, 0, 1);
transition: color 2s;
}
.text-transition:hover {
color: rgba(0, 0, 255, 0.5);
}
9.4 Uso de variables CSS
Veamos ejemplos de uso de variables CSS con funciones de color.
Ejemplo 7: Variables y funciones de color
Usar variables CSS con funciones de color permite manejar los colores de manera centralizada y crear estilos complejos pero fácilmente manejables:
<div class="advanced"></div>
:root {
--primary-color: rgba(255, 0, 0, 0.8);
--secondary-color: hsl(240, 100%, 50%);
--border-color: rgba(0, 0, 0, 0.5);
}
.advanced {
min-height: 200px;
background: linear-gradient(
to right,
var(--primary-color),
var(--secondary-color)
);
border: 2px solid var(--border-color);
}
Ejemplo 8: Combinación de múltiples gradientes
En este ejemplo, dos gradientes lineales se superponen entre sí, creando un efecto complejo y en capas:
<div class="multi-gradient"></div>
.multi-gradient {
min-height: 200px;
background: linear-gradient(to right, rgba(255, 0, 0, 0.5), rgba(0, 255, 0, 0.5)),
linear-gradient(to bottom, hsla(240, 100%, 50%, 0.5), hsla(60, 100%, 50%, 0.5));
}
GO TO FULL VERSION