O que estamos construindo
Sem mais delongas, vamos dar uma olhada no projeto final. Clique no ícone de configuração à esquerda da tela para acessar o painel de controles:
1. Comece com a marcação do painel
Comece definindo um botão de alternância e o configurador do painel. Dentro do painel, colocaremos cinco wrappers de formulário – examinaremos cada um deles mais tarde.
Aqui está a marcação inicial:
1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
Por razões puramente estilísticas, incluiremos a biblioteca de ícones Font Awesome em nosso projeto.
2. Alternar o painel
Por padrão, o painel do configurador ficará fora da tela. Assim que clicarmos no botão, ele deslizará suavemente do lado esquerdo.
Aqui estão os estilos relacionados:
1 |
/*CUSTOM VARIABLES HERE*/
|
2 |
|
3 |
.btn-toggle-panel, |
4 |
.panel { |
5 |
position: fixed; |
6 |
left: 10px; |
7 |
z-index: 1; |
8 |
color: var(--vampire-black); |
9 |
background: var(--anti-flash-white); |
10 |
}
|
11 |
|
12 |
.btn-toggle-panel { |
13 |
top: 10px; |
14 |
font-size: 18px; |
15 |
width: 54px; |
16 |
height: 54px; |
17 |
border-radius: 50%; |
18 |
}
|
19 |
|
20 |
.panel { |
21 |
top: 70px; |
22 |
font-size: 16px; |
23 |
line-height: normal; |
24 |
padding: 30px 20px; |
25 |
border-radius: 30px; |
26 |
transform: translateX(calc(-100% - 10px)); |
27 |
transition: transform 0.4s; |
28 |
}
|
29 |
|
30 |
.panel.show { |
31 |
transform: none; |
32 |
}
|
E o código JavaScript associado:
1 |
const togglePanelBtn = document.querySelector(".btn-toggle-panel"); |
2 |
const panel = document.querySelector(".panel"); |
3 |
|
4 |
togglePanelBtn.addEventListener("click", function () { |
5 |
panel.classList.toggle("show"); |
6 |
});
|
3. Personalizações de página
Vamos agora discutir com mais detalhes quais opções de personalização nosso configurador permitirá.
Para simplificar, pularemos a maior parte do CSS e mostraremos apenas as partes essenciais.
Família de fontes
Por padrão, o projeto usará o Arial família de fontes. No entanto, podemos optar por uma das seguintes fontes do Google:
- Fira Sans
- Internacional
- Lato
- Montserrate
- Raleway
- Robô
- Ubuntu
Observe que não faremos download de todas as fontes juntas, mas mediante solicitação, seguindo a API do Google Fonts. É por isso que você verá uma oscilação instantânea acontecer na primeira vez que selecionar uma nova fonte. Você pode verificar os arquivos de fontes baixados no seu navegador Rede guia.
A parte HTML:
1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 |
|
14 |
|
15 |
|
A parte JavaScript:
1 |
const html = document.documentElement; |
2 |
const fontFamilySelect = document.querySelector('[name="family"]'); |
3 |
const fontSizeInput = document.querySelector('[type="number"]'); |
4 |
|
5 |
fontFamilySelect.addEventListener("input", function (e) { |
6 |
const value = e.target.value; |
7 |
if ("Arial" === value) { |
8 |
html.style.setProperty("--font-family", value); |
9 |
return; |
10 |
}
|
11 |
const link = document.createElement("link"); |
12 |
link.rel = "stylesheet"; |
13 |
link.href = `https://fonts.googleapis.com/css2?family=${value.replaceAll( |
14 |
" ", |
15 |
"+" |
16 |
)}:wght@400;700&display=swap`; |
17 |
document.head.appendChild(link); |
18 |
html.style.setProperty("--font-family", value); |
19 |
});
|
Tamanho da fonte
O tamanho base da fonte será 18px. Podemos diminuir ou aumentar por meio de botões ou digitando dentro da entrada de destino. Em nenhum momento, o tamanho base da fonte não pode ser menor que 18px ou maior que 36px.
Observe que definimos um tamanho inicial no elemento raiz e, em seguida, usando o rem unidades, aplicamos o tamanho de fonte desejado nos elementos de destino.
A parte HTML:
1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
A parte JavaScript:
1 |
const html = document.documentElement; |
2 |
const fontFamilySelect = document.querySelector('[name="family"]'); |
3 |
const fontSizeInput = document.querySelector('[type="number"]'); |
4 |
const fontSizeBtns = document.querySelectorAll(".btn-font-size"); |
5 |
let selectedFontSize = fontSizeInput.value; |
6 |
|
7 |
fontSizeBtns.forEach(function (btn) { |
8 |
btn.addEventListener("click", function (e) { |
9 |
const inputValue = Number(fontSizeInput.value); |
10 |
if ( |
11 |
e.target.classList.contains("btn-decrease") || |
12 |
e.target.parentElement.classList.contains("btn-decrease") |
13 |
) { |
14 |
if (fontSizeInput.value <= 10) return; |
15 |
fontSizeInput.value--; |
16 |
} else { |
17 |
if (fontSizeInput.value >= 20) return; |
18 |
fontSizeInput.value++; |
19 |
}
|
20 |
selectedFontSize = fontSizeInput.value; |
21 |
html.style.setProperty("--font-size", `${selectedFontSize}px`); |
22 |
});
|
23 |
});
|
24 |
|
25 |
fontSizeInput.addEventListener("change", function () { |
26 |
const value = this.value; |
27 |
if (value < 10 || value > 20) { |
28 |
this.value = selectedFontSize; |
29 |
} else { |
30 |
selectedFontSize = value; |
31 |
}
|
32 |
html.style.setProperty("--font-size", `${selectedFontSize}px`); |
33 |
});
|
Cores
A cor de fundo da página padrão será branca, enquanto a cor do texto será preta. Graças ao input elemento do tipo colorpodemos facilmente aplicar uma nova aparência à nossa página.
A parte HTML:
1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 |
|
A parte JavaScript:
1 |
const html = document.documentElement; |
2 |
const colorInputs = document.querySelectorAll('[type="color"]'); |
3 |
|
4 |
colorInputs.forEach(function (input) { |
5 |
input.addEventListener("input", function () { |
6 |
html.style.setProperty(`--${this.id}`, this.value); |
7 |
});
|
8 |
});
|
Efeitos de imagem
Por padrão, todas as imagens não terão nenhum efeito. No entanto, podemos optar por um dos seguintes:
Observe o uso de consultas de estilo de contêiner para aplicar o estilo solicitado. Esse é um recurso CSS bastante novo com quase 75% apoiar durante esta escrita.
Claro, você pode implementar uma solução alternativa para suporte mais amplo ao navegador.
A parte HTML:
1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
A parte CSS:
1 |
@container style(--type: grayscale) { |
2 |
img { |
3 |
filter: grayscale(1); |
4 |
}
|
5 |
}
|
6 |
|
7 |
@container style(--type: blur) { |
8 |
img { |
9 |
filter: blur(3px); |
10 |
}
|
11 |
}
|
12 |
|
13 |
@container style(--type: rounded) { |
14 |
img { |
15 |
border-radius: 50px; |
16 |
}
|
17 |
}
|
A parte JavaScript:
1 |
const html = document.documentElement; |
2 |
const imageStyleSelect = document.querySelector('[name="image-style"]'); |
3 |
|
4 |
imageStyleSelect.addEventListener("input", function (e) { |
5 |
html.style.setProperty("--type", e.target.value); |
6 |
});
|
Conclusão
Isso é tudo, pessoal! Espero que este configurador de páginas tenha inspirado você a construir algo semelhante em seus projetos. Sinta-se à vontade para estender adicionando mais recursos, como um botão de redefinição ou a capacidade de copiar para a área de transferência as opções selecionadas para facilitar a reutilização.
Se você tiver alguma dúvida ou precisar de algo extra, comente na área de demonstração.
Vejamos novamente nossa criação:
Como sempre, muito obrigado pela leitura!
