[PITCH] Me ajudam a melhorar meu web app de ferramentas para CSS
Fala, pessoal. Tenho um projeto voltado para ferramentas de CSS.
Ele se chama: tools4css.com
Queria adicionar mais coisas nele mas estou sem ideias. O que vocês acham que seria legal adicionar no site?
Se você conseguir fazer um jeito de mexer no Radial Gradient, ajudaria muito também. Eu tava justamente ontem me batendo pra refazer um radial no tailwind pois ele começava do top-to-bottom E começava com cor e ia pra transparente, resultado final:
"radial-light":
"radial-gradient(ellipse 200% 60% at 50% 00%, hsl(210, 100%, 90%) 0%, rgba(0, 0, 0, 0) 30%)",
"radial-dark":
"radial-gradient(ellipse 200% 60% at 50% 00%, hsl(210, 100%, 16%) 0%, rgba(0, 0, 0, 0) 30%)"
Me bati nesse ellipse ai com as porcentagens kkkkkkkk
Cara, muito top seu projeto, de verdade. A navegação tá muito boa e design muito bonito. Como você quer ideias do que adicionar, o que você acha de loaders? Pode ser loaders feitos em HTML e CSS como é feito no site CSSLoaders
Projeto muito bacana! O site está perfeito, a navegação e o design me agradaram bastante. Como vi em alguns comentários, aqui vão meus dois centavos: algo interessante seria adicionar um color picker, conversores de RGBA para HEX, HSL, etc., e também a opção de minificar CSS. Eu sempre esqueço os shorthand e acabo recorrendo ao W3Schools para converter 4 ou 5 linhas de código na versão simplificada. Um exemplo que sempre procuro (e esqueço) é o shorthand do background
uma transição mais suave na alteração de temas é bom. Notei que você utilizou tailwindcss e Next.js, então em poucos minutos você consegue lidar isso.
Existe uma API chamada Match
do browser. Eu customo utilizar bastante desta forma:
export const SwitchMode = () => {
const [currentState, setCurrentState] = useState("");
useEffect(() => {
try {
if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
document.documentElement.classList.remove("light");
localStorage.ThemeStorage = "dark";
setCurrentState("dark");
document.documentElement.classList.add(localStorage.ThemeStorage);
} else {
document.documentElement.classList.remove("dark");
localStorage.ThemeStorage = "light";
setCurrentState("light");
document.documentElement.classList.add(localStorage.ThemeStorage);
}
} catch (menssage) {
console.log(`Erro ao definir tema: ${menssage}`);
}
}, []);
const toggleTheme = () => {
try {
const newCurrentMode =
localStorage.ThemeStorage === "dark" ? "light" : "dark";
localStorage.ThemeStorage = newCurrentMode;
if (newCurrentMode === "dark") {
document.documentElement.classList.remove("light");
setCurrentState("dark");
document.documentElement.classList.add(localStorage.ThemeStorage);
} else {
document.documentElement.classList.remove("dark");
setCurrentState("light");
document.documentElement.classList.add(localStorage.ThemeStorage);
}
} catch (menssage) {
console.log(`Erro ao trocar o tema: ${menssage}`);
}
};
Da pra tornar mais personalizável com mais cores e transições. Até animações! Eu facilmente utilizaria todas as vezes. Apesar de simples, personalizar certos aspectos é complicado.