Recursos gratuitos para você utilizar em seu frontend

Recursos gratuitos para você utilizar em seu frontend

Neste artigo eu mostro sites com vários recursos gratuitos para você utilizar em seu frontend. Você vai ver sites com geradores de CSS, paletas de cores e banco de imagens

 

GERADORES DE CSS

Precisa de ajuda para criar um efeito em CSS? Seus problemas acabaram!

 

Best CSS Button Generator
https://www.bestcssbuttongenerator.com
O mais completo gerador de botões que você já viu

 

CSS Generator
https://html-css-js.com/css/generator/
Gerador de CSS com vários exemplos prontos de efeitos para tabelas, texto, bordas e backgrouds, além de outros recursos

 

Fancy Border Radius
https://9elements.github.io/fancy-border-radius
Permite criar elementos com borda irregular utilizando um editor onde você arrasta as bordas até chegar no formato desejado

 

Hamburgers
https://jonsuh.com/hamburgers/
Animações para menu hamburguer.

 

Hover
https://ianlunn.github.io/Hover/
Uma coleção de efeitos hover para aplicar em links, botões ou imagens.

 

Magic Animation
https://www.minimamente.com/project/magic/
Magic Animation possui 12 categorias de efeitos de animação

 

Neumorphism
https://neumorphism.io
Cria cartões arredondados com sombras

 

Shape Dividers
https://shapedividers.com
Este site cria divisores de formas verticais, responsivos, e animados. Os divisores são feitos em SVG

 

UI Universe
https://uiverse.io
Botões, checkboxes, cartões, loaders... dezenas de elementos de interface prontos para uso

 

Wait! Animate
https://waitanimate.wstone.io
O Wait! animate é um site que cria animações utilizando apenas CSS

 

PALETAS DE CORES

Se achar a combinação de cores ideais para seu site é um problema estes sites tem a solução!

 

Adobe Color
https://color.adobe.com/pt/create/color-wheel/

 

Color Hunt
https://colorhunt.co/

 

Coolors
https://coolors.co/

 

Couleur
https://couleur.io

 

Happy Hues
https://www.happyhues.co/

 

Flat UI Colors
https://flatuicolors.com/

 

Grabient
https://www.grabient.com/

 

Gradient Hunt
https://gradienthunt.com/

 

Paletton
https://paletton.com/

 

Pigment
https://pigment.shapefactory.co/

 

WebGradient
https://webgradients.com/

 

IMAGENS

Se você está com dificuldades para encontrar imagens para seus projetos considere as seguintes sugestões.

 

404 Illustrations (by kapwing)
https://www.kapwing.com/404-illustrations/

 

404 Illustrations
https://error404.fun/

 

DrawKit
https://www.drawkit.io/

 

Delesing
https://delesign.com/free-designs/graphics/

 

Humaaans
https://www.humaaans.com/

 

Ouch
https://icons8.com.br/illustrations/

 

Open Doodle
https://www.opendoodles.com/

 

Pexels
https://www.pexels.com/pt-br/

 

Storyset
https://storyset.com/

 

unDraw
https://undraw.co/

 

NÃO DEIXE DE CONHECER

Outros sites que podem ser de seu interesse...

 

Can I Use?
https://caniuse.com
Verifica a compatibilidade de recursos com diferentes versões de navegadores

 

Dev Hints
https://devhints.io
Possui lista de comandos em várias linguagens

 

One Page Love
https://onepagelove.com/templates/free-templates
Templates gratuitos e pagos para quem quer criar um site de apenas uma página

 

UI Deck
https://uideck.com
Modelos de landing pages gratuitas, temas de bootstrap, modelos de React, modelos de Tailwind, modelos de site HTML, e kits de interface de usúario

 

BÔNUS

 

Se você se interessa por recursos gratuitos, não deixe de conferir outras listagens que eu fiz para vocês!

 

Banco de Imagens e outros recursos gratuitos para seu site

 

Cursos e outros materiais gratuitos para estudar programação

 

Compiladores online

 

Hospedagem de sites e banco de dados grátis

 

 

Está começando e deseja saber o que precisa estudar de HTML e JavaScript? Não deixe de conferir os roteiros de estudo de HTML e JavaScript!. São dezenas de conteúdos para você melhorar suas habilidades.

Roteiro de estudos - HTML e CSS

Roteiro de estudos - Javascript

 

Outros conteudos que podem ser de seu interesse

Roadmap HTML e CSS
13/02/2022JAVASCRIPT

Roadmap HTML e CSS

Um roteiro de estudos para aprender HTML e CSS

Saiba mais...
Percorrer as propriedades de um objeto com JavaScript
25/11/2019JAVASCRIPT

Percorrer as propriedades de um objeto com JavaScript

Veja as várias formas de fazer loop nas propriedades de um objeto

Saiba mais...

Conteúdo sobre banco de dados sem complicação!