No CSS, os gradientes são adicionados como um valor do background propriedade. Por exemplo, um gradiente simples pode ser assim:
1 |
background: linear-gradient(to right, red, pink); |
Aqui, estamos criando um gradiente linear que faz a transição de vermelho para rosa horizontalmente. Você também pode definir um ângulo para controlar a direção do gradiente. Confira este exemplo:
1 |
background: linear-gradient(45deg, red, pink); |
Aqui, o gradiente transita de vermelho para rosa em um ângulo de 45 graus. Para saber mais sobre como manipular gradientes com CSS, aqui está um guia rápido:
O que estamos criando neste tutorial
Neste tutorial, você usará o JavaScript e aprenderá como criar uma ferramenta que produz todos os tipos de gradientes CSS. Aqui estão os recursos da ferramenta de gradiente:
- Um elemento de visualização para mostrar o gradiente atual.
- Uma opção para escolher entre gradientes lineares ou radiais.
- A capacidade de adicionar e remover as cores do gradiente.
- Uma opção para adicionar um ângulo ao gradiente linear.
- Capacidade de copiar o código de gradiente gerado.
No final do tutorial, você terá algo assim:
HTML: Crie a interface
Nossa ferramenta de gradiente terá uma interface bastante mínima, cuja marcação se parece com a seguinte:
1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 |
|
14 |
|
15 |
|
16 |
|
17 |
|
18 |
|
19 |
|
20 |
|
21 |
|
22 |
|
23 |
|
24 |
0°
|
25 |
|
26 |
360°
|
27 |
|
28 |
|
29 |
|
30 |
|
31 |
|
32 |
|
33 |
|
34 |
|
35 |
Copy CSS |
36 |
|
37 |
|
CSS: modelando o gerador de gradiente
Vamos estilizar nossa ferramenta de gradiente. Abaixo estão os estilos para os elementos do corpo, recipiente, visualização e parada de cores:
1 |
body { |
2 |
display: flex; |
3 |
flex-direction: column; |
4 |
align-items: center; |
5 |
min-height: 100vh; |
6 |
padding: 20px; |
7 |
font-family: "DM Mono", monospace; |
8 |
|
9 |
}
|
10 |
.container { |
11 |
width: 80%; |
12 |
max-width: 600px; |
13 |
display: flex; |
14 |
gap: 20px; |
15 |
flex-direction: column; |
16 |
align-items: center; |
17 |
border-radius: 20px; |
18 |
border: #f3ecec solid 1px; |
19 |
padding: 40px 80px; |
20 |
}
|
21 |
.preview { |
22 |
width: 100%; |
23 |
height: 200px; |
24 |
border-radius: 8px; |
25 |
}
|
26 |
.color-control { |
27 |
display: flex; |
28 |
gap: 25px; |
29 |
padding: 20px; |
30 |
border-radius: 8px; |
31 |
}
|
32 |
.color-list { |
33 |
display: flex; |
34 |
flex-wrap: wrap; |
35 |
gap: 10px; |
36 |
margin-bottom: 15px; |
37 |
}
|
38 |
.color-list input[type="color"] { |
39 |
width: 48px; |
40 |
height: 48px; |
41 |
border: none; |
42 |
border-radius: 8px; |
43 |
padding: 4px; |
44 |
cursor: pointer; |
45 |
}
|
46 |
|
47 |
.color-stop .add-color { |
48 |
width: 60px; |
49 |
height: 60px; |
50 |
}
|
51 |
|
52 |
.add-color-btn { |
53 |
width: 48px; |
54 |
height: 48px; |
55 |
border: none; |
56 |
border-radius: 8px; |
57 |
padding: 4px; |
58 |
cursor: pointer; |
59 |
}
|
Remova o botão de cor
Para remover uma cor do gradiente, um ícone de exclusão aparecerá ao passar o mouse sobre qualquer elemento do seletor de cores.
Aqui estão os estilos para isso:
1 |
.color-stop { |
2 |
position: relative; |
3 |
}
|
4 |
.color-stop:hover .fa-solid.fa-trash-can { |
5 |
opacity: 1; |
6 |
}
|
7 |
|
8 |
.fa-solid.fa-trash-can { |
9 |
position: absolute; |
10 |
opacity: 0; |
11 |
top: -35%; |
12 |
left: calc(100% - 20px); |
13 |
transform: none; |
14 |
background: transparent; |
15 |
font-size: 24px; |
16 |
cursor: pointer; |
17 |
color: red; |
18 |
transition: all 0.3s ease-in-out; |
19 |
}
|
Entrada de intervalo
Os elementos de entrada do alcance podem parecer e se comportar de maneira diferente entre os navegadores. Para garantir uma aparência consistente, é importante personalizar o CSS para garantir a mesma experiência em vários navegadores. Aqui estão os estilos para o elemento deslizante Range
1 |
.slider-wrapper { |
2 |
display: flex; |
3 |
align-items: center; |
4 |
flex-direction: column; |
5 |
gap: 10px; |
6 |
font-family: Arial, sans-serif; |
7 |
width: 100%; |
8 |
}
|
9 |
.slider-wrapper input[type="range"] { |
10 |
-webkit-appearance: none; |
11 |
appearance: none; |
12 |
width: 100%; |
13 |
height: 10px; |
14 |
background: #e5e7eb; |
15 |
border-radius: 2px; |
16 |
outline: none; |
17 |
cursor: pointer; |
18 |
}
|
19 |
|
20 |
.slider-wrapper input[type="range"]::-webkit-slider-thumb { |
21 |
-webkit-appearance: none; |
22 |
appearance: none; |
23 |
width: 25px; |
24 |
height: 25px; |
25 |
border-radius: 5px; |
26 |
background: #119cec; |
27 |
cursor: pointer; |
28 |
}
|
29 |
|
30 |
.slider-wrapper input[type="range"]::-moz-range-thumb { |
31 |
-webkit-appearance: none; |
32 |
appearance: none; |
33 |
width: 25px; |
34 |
height: 25px; |
35 |
border-radius: 5px; |
36 |
background: #119cec; |
37 |
cursor: pointer; |
38 |
}
|
39 |
|
40 |
.slider-content { |
41 |
display: flex; |
42 |
justify-content: space-between; |
43 |
width: 100%; |
44 |
}
|
Estilos restantes
O restante dos estilos ficará assim:
1 |
.slider-content { |
2 |
display: flex; |
3 |
justify-content: space-between; |
4 |
width: 100%; |
5 |
}
|
6 |
|
7 |
#output { |
8 |
color: #000; |
9 |
width: 100%; |
10 |
height: 80px; |
11 |
padding: 15px; |
12 |
border: 1px solid #e7e2e2; |
13 |
border-radius: 12px; |
14 |
}
|
15 |
|
16 |
.css-output { |
17 |
display: none; |
18 |
}
|
19 |
|
20 |
.copy-css { |
21 |
color: #fff; |
22 |
width: 100%; |
23 |
font-size: 1.2rem; |
24 |
width: 100%; |
25 |
height: 45px; |
26 |
background-color: #119cec; |
27 |
border-radius: 8px; |
28 |
font-weight: 800; |
29 |
border: none; |
30 |
}
|
31 |
pre { |
32 |
white-space: pre-wrap; |
33 |
word-wrap: break-word; |
34 |
}
|
JavaScript: gradiente de construção
O primeiro passo como sempre é obter todos os elementos que precisam de manipulação.
1 |
const slider = document.getElementById("angle"); |
2 |
const sliderValue = document.getElementById("angle-value"); |
3 |
const addColorBtn = document.querySelector(".add-color-btn"); |
4 |
const gradientTypeInputs = document.querySelectorAll('input[name="gradient-type"]'); |
5 |
const sliderContainer = document.querySelector('.slider-wrapper'); |
Vamos definir as cores para a visualização inicial do gradiente.
1 |
let colors = ['#d81848', '#fd26ae', '#0c43c6']; |
O colors A matriz servirá como fonte de verdade para todas as cores do gradiente. Todos os gradientes serão gerados com base nas cores desta matriz, por isso estaremos adicionando e removendo cores.
Para adicionar gradiente AA ao elemento de visualização, aplique uma transição de gradiente usando as cores do colors variedade.
1 |
const updateGradient = () => { |
2 |
let gradientString; |
3 |
const angle = document.getElementById("angle").value; |
4 |
const gradientType = document.querySelector('input[name="gradient-type"]:checked').value; |
5 |
console.log(gradientType); |
6 |
|
7 |
if (gradientType === 'linear') { |
8 |
gradientString = `linear-gradient(${angle}deg, ${colors.join(", ")})`; |
9 |
} else { |
10 |
gradientString = `radial-gradient(circle, ${colors.join(", ")})`; |
11 |
}
|
12 |
|
13 |
const gradientPreview = document.querySelector(".preview"); |
14 |
gradientPreview.style.background = gradientString; |
15 |
document.getElementById( |
16 |
"output" |
17 |
).textContent = `.gradient {\n background: ${gradientString};\n}`; |
18 |
};
|
Aqui, estamos definindo o plano de fundo do contêiner de visualização para um linear ou radial plano de fundo, dependendo da seleção do usuário. Também estamos atualizando a saída para mostrar o código usado para gerar o gradiente.
Por padrão, o gradiente linear será mostrado porque a opção linear é verificada no HTML. Além disso, o ângulo será padrão no valor padrão do controle deslizante (45 graus).
O CSS gerado será assim:
1 |
.gradient {background: linear-gradient(45deg, #d81848, #fd26ae, #0c43c6);} |
Atualizando valores
Para garantir que o tipo de gradiente seja atualizado quando o usuário selecionar a opção radial, vamos adicionar ouvintes de eventos às entradas do tipo de gradiente (input[name="gradient-type"]). Isso garantirá que o gradiente e o código gerados respondam às ações do usuário.
1 |
gradientTypeInputs.forEach(input => { |
2 |
input.addEventListener('change', () => { |
3 |
updateGradient(); |
4 |
});
|
5 |
});
|
O próximo recurso é ocultar o controle deslizante do alcance quando a opção de gradiente radial for selecionada.
1 |
function toggleAngleSlider() { |
2 |
const gradientType = document.querySelector('input[name="gradient-type"]:checked').value; |
3 |
sliderContainer.style.display = gradientType === 'linear' ? 'block' : 'none'; |
4 |
}
|
O toggleAngleSlider() A função será chamada toda vez que houver uma mudança na seleção de gradientes.
1 |
gradientTypeInputs.forEach(input => { |
2 |
input.addEventListener('change', () => { |
3 |
updateGradient(); |
4 |
toggleAngleSlider(); |
5 |
});
|
6 |
});
|
Atualizar gradiente na seleção do usuário
Agora temos um gradiente predefinido, mas queremos permitir que o usuário faça seu gradiente selecionando cores personalizadas. Para conseguir isso, exibiremos as cores no colors Array como elementos do seletor de cores.
1 |
function initializeGradient() { |
2 |
const colorList = document.querySelector(".color-list"); |
3 |
colorList.innerHTML = ""; |
4 |
colors.forEach((color, index) => { |
5 |
const colorStop = document.createElement("div"); |
6 |
colorStop.className = "color-stop"; |
7 |
|
8 |
const colorInput = document.createElement("input"); |
9 |
colorInput.type = "color"; |
10 |
colorInput.className = "color-input"; |
11 |
colorInput.value = color; |
12 |
colorInput.dataset.index = index; |
13 |
colorInput.addEventListener("input", (e) => |
14 |
updateColor(e.target.dataset.index, e.target.value) |
15 |
);
|
16 |
|
17 |
const removeButton = document.createElement("i"); |
18 |
removeButton.className = "fa-solid fa-trash-can"; |
19 |
|
20 |
colorStop.appendChild(colorInput); |
21 |
colorStop.appendChild(removeButton); |
22 |
colorList.appendChild(colorStop); |
23 |
});
|
O principal objetivo desta função é criar dinamicamente elementos de coloridos na interface do usuário com base na matriz de cores. Para cada cor da matriz, estamos criando um nativo Elemento permitindo que os usuários selecionem cores de gradiente personalizadas.
Além de criar catadores de cores, também adicionamos um ícone Remover a cada elemento de entrada para garantir que uma cor possa ser removida do gradiente.
Também anexamos um ouvinte de eventos que ouve quaisquer alterações em cada elemento do seletor de cores. Quando ocorre uma mudança de entrada, o updateColor() A função é invocada. Adicione o updateColor() função.
1 |
function updateColor(index, color) { |
2 |
colors[index] = color; |
3 |
updateGradient(); |
4 |
}
|
Esta função obterá o índice atual e atualizará a cor nesse índice para a cor recém -selecionada; Isso garante que o gradiente seja atualizado para refletir as cores selecionadas.
Agora, o usuário pode escolher cores personalizadas para seu gradiente.
Adicione e remova as cores de um gradiente
Ao lado dos catadores de cores, há um + Botão para adicionar novas cores.
Para ativar sua funcionalidade, precisamos adicionar um ouvinte de evento ao botão para que, quando o botão for clicado, ele acionará a adição de uma nova cor ao colors variedade.
1 |
function addColorStop() { |
2 |
if (colors.length >= 6) { |
3 |
alert("Maximum 6 colors allowed!"); |
4 |
return; |
5 |
}
|
6 |
colors.push("#ffffff"); |
7 |
initializeGradient(); |
8 |
}
|
Para remover uma cor do gradiente, simplesmente a removemos da matriz e reinacionalizamos o gradiente. Reinacionar o gradiente criará um novo gradiente usando o atualizado colors variedade.
1 |
function removeColorStop(index) { |
2 |
if (colors.length > 2) { |
3 |
colors.splice(index, 1); |
4 |
initializeGradient(); |
5 |
} else { |
6 |
alert("Minimum 2 colors required!"); |
7 |
}
|
8 |
}
|
Como você pode ver, ao adicionar e remover as cores ao gradiente, também precisamos garantir que o usuário não possa adicionar mais de 6 cores e que deve haver pelo menos 2 cores para criar um gradiente.
Código de gradiente gerado por cópia
O último recurso é adicionar a capacidade de copiar o código gerado. Vamos adicionar um ouvinte de evento ao Copie CSS botão. Quando um usuário clica no botão, o código gerado será copiado para a área de transferência.
1 |
const copyCssBtn = document.querySelector(".copy-css"); |
2 |
copyCssBtn.addEventListener("click", () => { |
3 |
const gradientCode = document.getElementById("output") |
4 |
|
5 |
navigator.clipboard |
6 |
.writeText(gradientCode.textContent) |
7 |
.then(() => alert("CSS copied to clipboard!")) |
8 |
.catch((err) => console.error("Failed to copy: ", err)); |
9 |
});
|
10 |
})
|
Aqui está a demonstração final! Divirta -se criando seus gradientes
Conclusão
Criamos uma ferramenta de gradiente totalmente funcional (bastante épica). Agora você pode adicionar seus próprios gradientes atraentes aos seus designs!
