Gradientes

5.1 Gradientes Lineares

Gradientes são uma ferramenta poderosa no web design, permitindo criar transições suaves entre cores sem usar imagens. CSS fornece dois tipos principais de gradientes: linear (linear-gradient) e radial (radial-gradient). Esses gradientes são usados para fundos de elementos, criação de botões e outros efeitos visuais.

Gradientes Lineares (linear-gradient)

Um gradiente linear cria uma transição suave entre duas ou mais cores ao longo de uma linha (eixo) específica. A linha pode ser horizontal, vertical ou em qualquer ângulo.

Sintaxe

    
      background: linear-gradient( direction, color-stop1, color-stop2, ...);
    
  

Valores

• direction: direção do gradiente. Pode ser especificado em graus (por exemplo, 90deg), usando palavras-chave (por exemplo, to right, to bottom left)
• color-stop: parada de cor, definindo a cor e sua posição no gradiente

Exemplos de Uso

Gradiente Horizontal:

    
      .linear-gradient-horizontal {
        width: 200px;
        height: 200px;
        background: linear-gradient(to right, red, yellow);
      }
    
  

    
      <body>
        <div class="linear-gradient-horizontal">Gradiente Horizontal</div>
      </body>
    
  

Gradiente Vertical:

    
      .linear-gradient-vertical {
        width: 200px;
        height: 200px;
        background: linear-gradient(to bottom, blue, green);
      }
    
  

    
      <body>
        <div class="linear-gradient-vertical">Gradiente Vertical</div>
      </body>
    
  

Gradiente Diagonal:

    
      .linear-gradient-diagonal {
        width: 200px;
        height: 200px;
        background: linear-gradient(45deg, purple, pink);
      }
    
  

    
      <body>
        <div class="linear-gradient-diagonal">Gradiente Diagonal</div>
      </body>
    
  

Gradiente Multicolorido:

    
      .linear-gradient-multi {
        width: 200px;
        height: 200px;
        background: linear-gradient(to right, red, yellow, green, blue);
      }
    
  

    
      <body>
        <div class="linear-gradient-multi">Gradiente Multicolorido</div>
      </body>
    
  

Explicação do Código:

• to right: o gradiente vai da esquerda para a direita
• to bottom: o gradiente vai de cima para baixo
• 45deg: o gradiente vai em um ângulo de 45 graus
• red, yellow, green, blue: várias paradas de cor para criar um gradiente multicolorido

5.2 Gradientes Radiais

radial-gradient cria uma transição suave entre cores, partindo do centro e se espalhando para as bordas de um círculo ou elipse. Gradientes radiais podem criar efeitos visuais interessantes, como a imitação de tridimensionalidade.

Sintaxe:

    
      background: radial-gradient( direction, color-stop1, color-stop2, ...);
    
  

Valores:

• shape: forma do gradiente, pode ser circle (círculo) ou ellipse (elipse) (valor padrão)
• size: tamanho do gradiente, pode ser closest-side, closest-corner, farthest-side, farthest-corner
• position: posição do centro do gradiente, pode ser especificada em porcentagens, pixels ou usando palavras-chave (por exemplo, center, top left)
• color-stop: parada de cor, definindo a cor e sua posição no gradiente

Exemplos de Uso

Gradiente Circular:

    
      .radial-gradient-circle {
        width: 200px;
        height: 200px;
        background: radial-gradient(circle, red, yellow);
      }
    
  

    
      <body>
        <div class="radial-gradient-circle">Gradiente Circular</div>
      </body>
    
  

Gradiente Elíptico:

    
      .radial-gradient-ellipse {
        width: 200px;
        height: 200px;
        background: radial-gradient(ellipse, blue, green);
      }
    
  

    
      <body>
        <div class="radial-gradient-ellipse">Gradiente Elíptico</div>
      </body>
    
  

Gradiente do Centro:

    
      .radial-gradient-at-center {
        width: 200px;
        height: 200px;
        background: radial-gradient(circle at center, purple, pink);
      }
    
  

    
      <body>
        <div class="radial-gradient-at-center">Gradiente do Centro</div>
      </body>
    
  

Gradiente do Canto:

    
      .radial-gradient-at-corner {
        width: 200px;
        height: 200px;
        background: radial-gradient(circle at top left, red, blue, green);
      }
    
  

    
      <body>
        <div class="radial-gradient-at-corner">Gradiente do Canto</div>
      </body>
    
  

Explicação do Código:

• circle: cria um gradiente circular
• ellipse: cria um gradiente elíptico
• at center: o gradiente começa do centro
• at top left: o gradiente começa do canto superior esquerdo
• red, blue, green: várias paradas de cor para criar um gradiente multicolorido

5.3 Configurações Adicionais de Gradientes

Gradientes Repetidos

1. Gradientes Lineares Repetidos (repeating-linear-gradient)

Gradientes lineares repetidos criam um padrão repetitivo com um gradiente linear.

    
      background: repeating-linear-gradient(45deg, red, yellow 10%, green 20%);
    
  

2. Gradientes Radiais Repetidos (repeating-radial-gradient)

    
      background: repeating-radial-gradient(circle, red, yellow 10%, green 20%);
    
  

3. Paradas de Cor Transparentes

Paradas de cor podem incluir transparência para criar efeitos visuais mais complexos.

    
      background: linear-gradient(to right, rgba(255, 0, 0, 0.5), rgba(0, 0, 255, 0.5));
    
  

4. Uso Conjunto de Vários Gradientes

É possível usar vários gradientes para criar fundos complexos.

    
      background: linear-gradient(to right, red, yellow), radial-gradient(circle, blue, green);
    
  

1

Tarefa

Frontend SELF PT, nível 18, lição 5

Bloqueado

Gradiente Linear

Gradiente Linear

Abrir

1

Tarefa

Frontend SELF PT, nível 18, lição 5

Bloqueado

Gradiente Radial

Gradiente Radial

Abrir