9.1 Combinando funções de cores
O design da web requer uma compreensão mais profunda e aplicação de funções de cores para criar interfaces complexas, mas harmoniosas e
adaptáveis. Vamos dar uma olhada em manipulações mais complexas de cores em CSS, usando as funções
rgba(), hsla(), hsl() e rgb().
Exemplo 1: Criando um gradiente semitransparente
Para criar gradientes complexos, você pode combinar várias funções de cores.
Neste exemplo, usamos um gradiente linear que combina cores semitransparentes definidas com rgba() e 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)
);
}
Exemplo 2: Gradiente com transição através de várias cores
Aqui, usamos um gradiente linear em um ângulo de 45 graus que transita suavemente através de cinco cores, cada uma definida por diferentes funções de cores:
<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 Criando sombras complexas e efeitos semitransparentes
Exemplo 3: Sombras usando rgba()
Neste exemplo, criamos uma sombra complexa que usa cores semitransparentes para criar um efeito de volume e 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);
}
Exemplo 4: Bordas e fundos semitransparentes
Bordas e fundos semitransparentes podem ser criados usando rgba() e hsla(), permitindo criar efeitos em camadas e 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 Animação e transições usando funções de cores
Exemplo 5: Animação de fundo usando hsl()
Neste exemplo, usamos uma animação que muda suavemente a cor de fundo através de diferentes tons 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;
}
Exemplo 6: Transição de cor do texto
Aqui o texto muda suavemente de cor e transparência ao passar o cursor, usando rgba() e a propriedade 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 variáveis CSS
Vamos ver exemplos de uso de variáveis CSS com funções de cores.
Exemplo 7: Variáveis e funções de cores
Usar variáveis CSS com funções de cores permite gerenciar cores centralmente e criar estilos complexos mas facilmente gerenciados:
<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);
}
Exemplo 8: Combinando vários gradientes
Neste exemplo, dois gradientes lineares são sobrepostos, criando um efeito em camadas complexo:
<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