Recursos
Recursos
Sugerir | Contribuir | Conduta
Menu de conteúdos
Inspiração
awwwards - Sites premiados por design, criatividade e inovação
CSS Design Awards - Galeria com sites premiados por boas UI’s ou com boa UX
CSS Nectar - Galeria de design de sites para se inspirar
Free Frontend - Site com diversos snippets para utilizar
Screenlane - Inspiração de UI Design com publicações semanais
Siteinspire - Mais de 7.000 sites e perfis de agências digitais
UI Garage - Inspirações e padrões de UI
Ilustrações
Blush Design - Ilustrações customizáveis
BURST - Fotos gratuitas livres de direitos
DrawKit - Ilustrações gratuitas atualizadas semanalmente
Free 3D Illustration - Temas de ilustração 3D e com integração com Figma
Freepik - Repositório com imagens em diversos formatos, possui filtro para imagens com uso livre
HiClipart - Banco de imagens com fundo transparente
Humaaans - Coleção de ilustrações
illustrations - Kit de ilustrações open source e de uso livre
Ira Design - Ilustrações customizáveis em formato SVG
kaboompics - Repositório de fotos gratuitas
Life of Pix - Fotografias de alta resolução
Open Peeps - Coleção customizável de ilustrações de pessoas
Pexels - Repositório de imagens para uso livre
Pixabay - Mais de 1 milhão de imagens de uso livre
PNGEgg - Banco de imagens com fundo transparente
PNGWing - Banco de imagens com fundo transparente
Skuawk- Fotos públicas licenciado pela CC0 1.0
Stock Snap - Repositório com imagens livres de direitos
Stock Vault - Fotos, texturas e ilustrações
Storyset - Diversas ilustrações customizáveis disponíveis em SVG
unDraw - Ilustrações modernas com a possibilidade de adaptá-las a identidade visual do seu site
Unsplash - Repositório de imagens para uso livre
Ícones e Material UI
BoxIcons - Biblioteca de ícones SVG
Components AI - Theme builder, color scale, color system e gradients
Evil Icons - Pacote de ícones SVG com suporte para Rails, Sprockerts, Node, Gulp, Grunt e CDN
Free Line Icons - Mais de 5.000 ícones SVG em formato de linha
Freebies - Diversos UI kits para Figma, Adobe XD, Sketch e em PSD
Icon Duck - Aproximadamente 120 mil ícones e ilustrações de código aberto e gratuitos
Iconify - Biblioteca que agrupa outras bibliotecas de ícones em um só lugar
Simple Icons - Ícones SVG gratuitos para marcas populares
SNOWEB - Biblioteca de ícones SVG
Vector Mockups - Biblioteca de mockups para Figma
Worldvectorlogo - Logos SVG de marcas famosas
Utilitários para media
AnyConv - Conversor de imagem, documentos, vídeos e áudios
Baseline - Remova background de imagens
CapCut - Editor de vídeos gratuito e online
Cleanup Pictures - Remova objetos de imagens
Cloudinary - Otimize seus vídeos e imagens, aplique filtros, entre outros
Edit Photo - Editor de imagens online gratuito
Erase BG - Remova fundo de imagens
EZGIF - Diversos utilitários para imagens, gifs e vídeos
Imagator - Comprima, converta, edite e redimencione imagens online
Image Color Picker - Obtenha a paleta de cores presente na imagem desejada
Magic Eraser - Remova objetos de imagens
Pyka - Gere screenshots bonitas para postagem em mídias sociais
PROMO - Redimencione imagens mantendo a proporção
Remove BG - Remova fundo de imagens
SVGOMG - Otimize seu SVG online
Trace - Remova fundo de imagens
Vecta - Comprima e otimize seus arquivos SVG
ZMO - Remova objetos de imagens
Paleta de cores e Gradientes
Color Hunt - Paleta de cores selecionadas para boas UI’s
Color Palette Generator - Paleta de cores com exportação em SVG e criação de paleta através de imagem
Color Scale - Ferramenta para escalar cores (muito útil para determinar peso tipográfico)
colorpalettes.earth - Paleta de cores inspirada em paisagens da natureza
colors.lol - Paleta de cores com a regra 60-30-10 de UI Design
ColorSpace - Gere uma paleta de cores a partir de uma cor inicial informada
Coolors - Paleta de cores com diversos tipos de exportação, integração com Figma e extensão para navegador
CSS Gradient - Background gradiente com customização de ângulo e possibilidade de obter cores de imagem
Curated Color Palette - Paleta de cores selecionada para boas UI’s
Data Viz Color Palette - Paletas de cores em contexto, recomendadas para usar em gráficos
Eggradients - Background gradients
Flat UI Colors - Mais de 13 paletas de cores para utilizar em seu projeto
Gradient Hunt - Projeto open-source com cores gradientes e extensão pro Google Chrome
Happy Hues - Paleta de cores selecionadas em contexto
Hex Colors - Monte backgrounds gradientes de no máximo 7 cores diferentes
Radix UI Colors - Paleta de cores com variações
Randoma11y - Gere 2 cores com um excelente contraste
uiGradients - Backgrounds gradiente com exportação em .jpg
WebGradients - Coleção de mais de 180 backgrounds gradientes dos mais variados
Responsividade
Am I Responsive - Veja como está a responsividade do seu site de uma forma dinâmica
Angry Tools - Ferramenta para testar todas as propriedades de media query
Browserling - Teste a compatibilidade do seu site escolhendo um SO específico, navegador específico e até mesmo a versão
CSS3 Media Queries - Cheque quais tipos de media seu navegador suporta
Responsive Viewer - Extensão de navegador para verificar a responsividade do seu site
Responsively App - Programa para baixar e executar o site para testar a responsividade
Simple CSS - Gere media queries para qualquer tipo e tamanho de dispositivo
Templates
CSS Author - Diversos templates, incluindo recursos para Figma e Adobe XD
Free CSS - Coleção de templates e layouts CSS
UIDeck - Landing pages, templates e UI kits
Hospedagem
000webhost - Hospedagem gratuita com suporte para PHP e MySQL
Firebase Hosting - Hospedagem de até 10GB de armazenamento e 10GB de transferência por mês gratuitamente
GitHub Pages - Hospedagem de sites estáticos, não suporta linguagens back end
Infinity Free - Hospedagem gratuita com suporte para PHP e MySQL e sem anúncios
Render - Hospedagem que suporta backend, possui certificado gratuito e proteção contra DDoS
Vercel - Hospedagem de sites estáticos, não suporta linguagens de back end
Geradores, trechos de códigos prontos e cheat sheets
30 Seconds of Code - Mais de 1100 trechos de código curtos para diversos tipos de necessidade
BGJar - Gerador de background com padrões
Blobmaker - Crie shapes randomicos e exporte em .svg
cheatsheets.zip - Diversas dicas e exemplos de códigos segmentado por algumas categorias, como linguagens, sistemas operacionais, comandos linux, banco de dados, entre outros
CSS Generator Tool - Gere efeitos de shadow, gradients, borders, filters, entre outros
CSS Grid Generator - Playground para aprender Grid e exportar o código para utilizar
CSS Layout Generator - Templates bem comuns e prontos para utilizar, em Grid e FlexBox
CSS Pixel Art Generator - Ferramenta para criar pixel arts e exportar como código CSS
CSS Scan - Botões dos mais variados estilos para utilizar
Devhints - Coleção de cheatsheets
EnjoyCSS - Gere backgrounds, shadows, borders, transitions, transforms, shapes, entre outros
Fancy Border Radius - Gere formatos despadronizados utilizando border-radius
Flexy Boxes - Playground para aprender Flexbox e exportar o código para utilizar
Flowbite - Mais de 600 componentes de UI feitos com classes utilitárias do Tailwind CSS
Free Frontend - Exemplos de código, tutoriais e artigos gratuitos de HTML, CSS e JavaScript (jQuery, React, Vue)
Get Waves - Gerador de backgrounds de waves com exportação em .svg
Glassmorphism - Gerador de estilos com efeito de vidro
Grid Malven - Aprenda sobre as propriedades de CSS Grid através de exemplos visuais
Haikei - Padrões modernos para backgrounds, customizáveis e com exporação em .png ou .svg
Hamburgers - Diversos estilos de menu mobile, com diferentes tipos de animação
Headless UI - Diversos components de UI para React ou Vue
HTML Boilerplates - Boilerplate para estrutura inicial do HTML
HTML Code Generator - Diversos trechos de código em várias linguagens, bibliotecas e frameworks web
Layout patterns - Coleção de layouts comuns
Layoutit Grid - Playground interativo para aprender Grid e exportar o código para utilizar
MagicPattern - Backgrounds com padrões e totalmente customizáveis
Mesh Gradients - Backgrounds com padrões e exportação em .png
Neumorphic Generator - Gerador de estilos de neumorfismo para CSS
Neumorphism - Gerador de shadow com efeito de neumorfismo
Pattern Generator - Ferramenta para criar padrões únicos, contínuos e com direito de uso
Smooth Shadow - Gerador de box-shadow suave
The Component Gallery - Ferramenta de escalonamento de tipografia
UIverse - Diversos elementos de UI para utilizar de forma gratuita
Web Code Tools - Diversos tipos de geradores de código para Front End
Wicked Blocks - Coleção gratuita de blocos e componentes para Tailwind CSS
wweb.dev - Background animados
Jogos
CheckiO - Resolva desafios em TypeScript ou Python
css2wind - Playground para treinar e aprender nome de classes do Tailwind CSS a partir de propriedades CSS informadas
CodeCombat - Jogos para aprender Python e JavaScript
Codewars - Várias tarefas em diferentes linguagens para praticar
CodingGame - Aprenda conceiros resolvendo desafios em mais de 25 linguagens
CSSBattle - Teste suas habilidades CSS resolvendo desafios com o menor código possível
Flexbox Defende - Jogo interativo para aprender as propriedades de Flexbox
Flexbox Froggy - Jogo interativo para aprender as propriedades de FlexBox
Grid Garden - Jogo interativo para aprender as propriedades de Grid Layout
jsdares - Jogo open source e editável em JavaScript
JSRobot - Aprende lógica de programação em JavaScript
Open Game Art - Assets gratuitos e livres de direitos para utilizar em jogos
Pixel Game - Desenhe uma caixa que corresponda ao width e height informado
Screeps - MMO para programadores
Untrusted - Jogo para implementar algoritmos em JavaScript
Licença
Esse repositório é licenciado através da MIT License. Consulte LICENSE para mais informações.
Contato
Silas Rodrigues - @jinuye1 - silasrodrigues.fatec@gmail.com
Project Link: https://github.com/SilasRodrigues19/Recursos
<hr>
🔼 Retornar ao topo