Teoria das Cores

• Definição de Teoria das Cores: Este é o estudo de como as cores interagem entre si e como elas afetam nossa percepção. Abrange relacionamentos de cores, harmonia de cores e o impacto psicológico da cor.
• Cores Primárias: Essas cores que são amarelo, azul e vermelho, são os tons fundamentais dos quais todas as outras cores são derivadas.
• Cores Secundárias: Essas cores resultam da mistura de quantidades iguais de duas cores primárias. Verde, laranja e roxo são exemplos de cores secundárias.
• Cores Terciárias: Essas cores resultam da combinação de uma cor primária com uma cor secundária vizinha. Amarelo-Verde, Azul-Verde e Azul-Violeta são exemplos de cores terciárias.
• Cores Quentes: Essas cores que incluem vermelhos, laranjas e amarelos, evocam sensações de conforto, calor e aconchego.
• Cores Frias: Essas cores que incluem azuis, verdes e roxos, evocam sentimentos de calma, serenidade e profissionalismo.
• Roda de Cores: A roda de cores é um diagrama circular que mostra como as cores se relacionam entre si. É uma ferramenta essencial para designers porque os ajuda a selecionar combinações de cores.
• Esquemas de Cores Análogas: Esses esquemas de cores criam experiências coesas e tranquilizadoras. Eles possuem cores análogas, que são adjacentes umas às outras no círculo cromático.
• Esquemas de Cores Complementares: Esses esquemas de cores criam alto contraste e impacto visual. Suas cores estão localizadas em extremos opostos do círculo cromático, em relação umas às outras.
• Triadic Color Scheme: This color scheme has vibrant colors. Eles são feitos de cores que estão aproximadamente equidistantes umas das outras. Se eles estiverem conectados, formam um triângulo equilátero na roda de cores.
• Esquema de Cores Monocromático: Para este esquema de cores, todas as cores são derivadas da mesma cor base ajustando seu brilho, escuridão e saturação. Isso evoca uma sensação de unidade e harmonia ao mesmo tempo que cria contraste.

Diferentes Formas de Trabalhar com Cores em CSS

• Cores Nomeadas: Essas cores são nomes de cores predefinidos reconhecidos pelos navegadores. Exemplos incluem blue, darkred e lightgreen.
• Função rgb(): RGB significa Vermelho, Verde e Azul — as cores primárias da luz. Essas três cores são combinadas em diferentes intensidades para criar uma ampla variedade de cores. a função rgb() permite que você defina cores usando o modelo de cores RGB.

<link rel="stylesheet" href="styles.css">
<p>RGB Color</p>

p {
  color: rgb(255, 0, 0);
}

• Função rgba(): Esta função adiciona um quarto valor, alpha, que controla a transparência da cor. Se não for fornecido, o valor alpha padrão é 1.

<link rel="stylesheet" href="styles.css">
<div>RGBA Background</div>

div {
  background-color: rgba(0, 0, 255, 0.5);
}

• Função hsl(): HSL significa Hue, Saturation e Lightness — três componentes principais que definem uma cor.

<link rel="stylesheet" href="styles.css">
<p>HSL Color</p>

p {
  color: hsl(120, 100%, 50%);
}

• Função hsla(): Esta função adiciona um quarto valor, alpha, que controla a opacidade da cor.

<link rel="stylesheet" href="styles.css">
<div>HSLA Background</div>

div {
  background-color: hsla(0, 100%, 50%, 0.5);
}

• Hexadecimal: Um código hexadecimal (abreviação de código hexadecimal) é uma string de seis caracteres usada para representar cores no modelo de cores RGB. O "hex" refere-se ao sistema de numeração base 16, que usa os dígitos 0 a 9 e as letras A a F.

<link rel="stylesheet" href="styles.css">
<h1 class="hex-text">Hex Text</h1>
<p class="hex-bg">Hex Background</p>

h1 {
  color: #FF5733; /* A reddish-orange color */
}

p {
  background-color: #4CAF50; /* A shade of green */
}

A Propriedade box-shadow

• Definição: A propriedade box-shadow aplica uma ou mais sombras ao redor de um elemento.
• Valores de Offset: Você deve especificar valores horizontais (offset-x) e verticais (offset-y). Valores positivos de offset-x movem a sombra para a direita, enquanto valores negativos a movem para a esquerda. Valores positivos de offset-y movem a sombra para baixo, enquanto valores negativos a movem para cima. Se um valor for 0, não é necessário incluir uma unidade.
• Raio de Desfoque: Este valor opcional controla o quão borrada a sombra aparece. Se não for incluído, o padrão é 0, que cria bordas nítidas. Quanto maior o valor, mais suave a sombra.
• Spread Radius: Este valor opcional controla o quanto a sombra se expande ou encolhe. Se não for incluído, o padrão é 0.
• Cor da Sombra: Você pode especificar a cor usando cores nomeadas, valores hexadecimais, funções rgb(), rgba(), hsl() ou hsla().
• Palavra-chave inset: Adicionar a palavra-chave inset coloca a sombra dentro do elemento em vez de fora.
• Aplicando Múltiplas Sombras de Caixa: Você pode aplicar múltiplas sombras separando-as por vírgulas. As sombras são empilhadas da frente para trás.

Sintaxe

box-shadow: offset-x offset-y blur-radius spread-radius color;

<link rel="stylesheet" href="styles.css">
<div class="shadow-box">Shadow Color Example</div>

.shadow-box {
  width: 200px;
  padding: 20px;
  background-color: lightblue;
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
}

Gradientes Lineares e Radiais

• Gradientes Lineares: Esses gradientes criam uma mistura gradual entre cores ao longo de uma linha reta. Você pode controlar a direção dessa linha usando palavras-chave como to top, to right, to bottom right ou ângulos como 45deg. Você pode usar qualquer cor CSS válida e quantas paradas de cor desejar.

<link rel="stylesheet" href="styles.css">
<div class="linear-gradient">Linear Gradient</div>

.linear-gradient {
  background: linear-gradient(45deg, red, #33FF11, rgba(100, 100, 255, 0.5));
  height: 40vh;
}

• Gradientes Radiais: Esses gradientes criam gradientes circulares ou elípticos que irradiam de um ponto central.

<link rel="stylesheet" href="styles.css">
<div class="radial-gradient">Radial Gradient</div>

.radial-gradient {
  background: radial-gradient(circle, red, blue);
  height: 40vh;
}