Executando verificação de segurança...
7

[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?

Carregando publicação patrocinada...
1

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

1

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.

1

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

1

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