Essas ferramentas vão deixar você mais produtivo. Algumas tarefas podem ser extenuantes para serem feitas manualmente, por isso veja como avançar mais rapidamente na entrega de seu trabalho. Você vai ver aqui bancos de imagens grátis, recursos para fazer animações com CSS, além de um jeito prático de estilizar barras de rolagem. Se precisa usar um esquema de cores, que usa aprendizado profundo sobre estilos de cores usados para fotografia, filmes e arte popular. Tenha uma paleta de cores para sua landing page, com 5 tons a sua escolha. Veja também com fazer bordas estilizadas, sem muito esforço. Use uma ferramenta para criar formas complexas com CSS, recortando um elemento em uma forma básica como círculo, elipse, inserção ou em uma fonte SVG, além de fazer animações e transições CSS. Há também um recurso para fazer sombras estilizadas a partir da seleção de propriedades CSS. Para fazer gradientes CSS, use uma aplicação criada em 2017, que também traz um blog com várias dicas de como melhorar o seu trabalho frontend.
Animista
Animista é um aplicativo onde você pode usar uma coleção de animações CSS, ajustá-las para ter a que você precisa.
Cubic Bezier
Como você pode fazer transições saltitantes com cube-bezier()? Essa aplicação lhe entrega isso. Nem sabe o que é Bezier Cúbico? Com ele você cria transições suaves e personalizadas. Com ele, seus projetos terão um outro patamar de fluidez e expressividade.
The App Guruz
Escolha das animações prontas, então pegue o CSS para colocar em seu projeto.
Clip Path CSS
Bennett Feely fez diversas ferramentas. Destacamos essa que é um gerador de Clip Path, uma espécie de máscara que você coloca facilmente em uma imagem.
Fancy Borders Radius
Para entender a elegância nas bordas com quatro pontos que essa ferramenta pode entregar a você vá ao artigo dos idealizadores desse aplicativo.
CSS Scan
Diversos exemplos de box shadow.
CSS Gradient
Com esse gerador de gradiente, você escolha as cores do gradiente numa tela e pronto.
Shadows
Faça uma sombra CSS suave com curvas suaves. Ajuste o alfa, o deslocamento e o desfoque com curvas de atenuação individuais, proporcionando um controle incomparável sobre a aparência da sua sombra.
CSS Tricks
Os maiores truques de CSS
CSS Portal
Para alterar a aparência e as cores das barras de rolagem do seu site. Muito fácil de usar. Aproveite para descobrir uma infindade de ferramentas desse aplicativo.
CSS Tricks
Color Mind
Colormind é um gerador de esquema de cores que usa aprendizado profundo. Ele pode aprender estilos de cores a partir de fotografias, filmes e arte popular.
FontAwesome
Font Awesome é a biblioteca de ícones e kit de ferramentas da Internet usado por milhões de designers, desenvolvedores e criadores de conteúdo.
IconMoon
IcoMoon é uma solução de ícones que fornece três serviços principais: pacotes de ícones vetoriais, o aplicativo IcoMoon e hospedagem de ícones como SVGs ou fontes.
Graphic Burger
Aproveite as opções de mockups, interface de usuário editáveis no formato PSD, ícones, efeitos para textos, imagens de fundo e muito mais.
PhosphporIcons
Um biblioteca com mais de 6 mil ícones. Há integração no Vscode com HTML e até mesmo com React – você importa ícones para você interagir com os ítens. Assim, você poderá começar a escrever o nome de um ícone, para aparecer uma lista de opções no Vscode, por exemplo. Para instalar no Linux:
npm i @phosphor-icons/reactAdobe Color
Descubra paletas de cores populares e pesquise temas por nome, humor ou paralavra-chave. Com um clique em um tema de cores você começa a editá-lo na roda de cores.
Google Fonts
Baixe fontes para seu projetos ou use os recursos pela API dele.
FontSquirrel
Baixe fontes para seus projetos, mas observe se são livres de licença. Na hora de baixar, faça o download do próprio site para não ser redirecionado para outra aplicação. Selecione o arquivo baixado, então clique em Webfont Generator e envie a fonte para em seguida vcoê fazer o download de seu kite para aquela fonte.
Escolha um desses aplicativos para baixar fotos grátis para seus projetos. Mas cuidado, que alguns deles exibem fotos para serem compradas.
Pexels
Faça seu cadastro, baixe suas fotos e dê uma lida no blog da ferramenta. Se tiver alguma dúvida é bom dar uma lida nas dúvidas frequentes. Aí você vai ver que algumas fotos não podem ser usadas em campanhas políticas ou partidárias.
Pixabay
Pegue fotos, ilustrações, imagens vetoriais, música, efeitos sonoros e gifs.
Chakra
Chakra UI é uma biblioteca de componentes simples, modular e acessível que fornece os blocos de construção necessários para construir seus aplicativos React.
Radix
Uma biblioteca de componentes de código aberto otimizada para desenvolvimento rápido, fácil manutenção e acessibilidade. Basta importar e pronto – nenhuma configuração é necessária.
Shadcn-ui
Componentes projetados que você pode copiar e colar em seus aplicativos. Acessível. Customizável. Código aberto.
TanStack
Software aberto para construir UI e UX
Theme UI
Theme UI é uma biblioteca para criar interfaces de usuário temáticas com base em princípios de design baseados em restrições. Crie bibliotecas de componentes personalizados, sistemas de design, aplicativos da Web, temas Gatsby e muito mais com uma API flexível para a melhor ergonomia do desenvolvedor.
Unsplash
O blog desse aplicativo disse que desde março de 2014 você tem acesso a 6 milhões de imagens, que podem ser escolhidas por tipo de licença.
Yandex
Buscador de imagens, vídeos com muitas opções para selecionar suas buscas. Mas tome cuidado para checar os direitos autorais das imagens.
Freepik
Ferramenta gratuita, mas com alguns conteúdos com licenciamento. Baixe imagens vetoriais para você editar e adaptar ao seu projetos, bem como PSD, ícones e vídeos.
Lorem Picsum
Essa aplicação ajuda você a ilustrar seu projeto com fotos de acordo com as dimensões de seu interesse. Basta adicionar o tamanho da imagem, largura e altura, apó a URL para exibir uma imagem aleatória: https://picsum.photos/200/300. Para imagens quadradas basta colocar o tamanho, como https://picsum.photos/200.