espera aí...

2 de janeiro de 2019
100 bibliotecas, frameworks e ferramentas CSS favoritas de 2018
100 bibliotecas, frameworks e ferramentas CSS favoritas de 2018

Com todas as mudanças e avanços rápidos que o CSS passou ao longo dos últimos anos, não devemos nos surpreender com o vasto volume de recursos e ferramentas de código aberto que estão sendo continuamente liberados.

Essas bibliotecas, estruturas e ferramentas de CSS que economizam tempo foram criadas para tornar nossas vidas um pouco mais fáceis e também oferecem uma janela de aprendizado para as áreas de CSS que talvez não entendamos completamente.

Nesta coleção você encontrará 100 de nossas bibliotecas CSS favoritas, frameworks, recursos e ferramentas que foram lançadas este ano (2018). Sem dúvida, você encontrará algo interessante!

Novas bibliotecas CSS

100 bibliotecas, frameworks e ferramentas CSS favoritas de 2018

WickedCSS Animations – Uma biblioteca de animações CSS puras.


100 bibliotecas, frameworks e ferramentas CSS favoritas de 2018

Motus – Uma biblioteca de animação que imita os quadros-chave CSS durante a rolagem.


100 bibliotecas, frameworks e ferramentas CSS favoritas de 2018

ScrollOut – Detecta alterações na rolagem para efeitos variáveis ​​de revelação, paralaxe e CSS.


100 bibliotecas, frameworks e ferramentas CSS favoritas de 2018

SimpleBar – Crie barras de rolagem personalizadas entre navegadores usando CSS puro.


100 bibliotecas, frameworks e ferramentas CSS favoritas de 2018

Repaintless.css – Uma biblioteca de animação CSS leve.


100 bibliotecas, frameworks e ferramentas CSS favoritas de 2018

Three Dots – Uma coleção de animações de carregamento – tudo com apenas 3 pequenos pontos.


100 bibliotecas, frameworks e ferramentas CSS favoritas de 2018

Divisão – Biblioteca para animar texto e grades com variáveis ​​CSS.


100 bibliotecas, frameworks e ferramentas CSS favoritas de 2018

Epic Spinners – Uma coleção de ícones girando somente CSS com integração VueJS.


100 bibliotecas, frameworks e ferramentas CSS favoritas de 2018

Boilerform – Um clichê HTML e CSS para tirar o sofrimento de trabalhar com formulários.


100 bibliotecas, frameworks e ferramentas CSS favoritas de 2018

Micron.js – Uma biblioteca de microinteração construída em CSS e JS.


100 bibliotecas, frameworks e ferramentas CSS favoritas de 2018

AnimTrap – Uma estrutura CSS e JavaScript para animações.


100 bibliotecas, frameworks e ferramentas CSS favoritas de 2018

Pure HTML5 e CSS3 SVG Loaders – Uma atraente coleção de imagens de carregamento que você pode baixar gratuitamente.

Utilitários CSS

100 bibliotecas, frameworks e ferramentas CSS favoritas de 2018

basicScroll – Uma ferramenta que permite alterar variáveis ​​CSS, dependendo da posição de rolagem.


100 bibliotecas, frameworks e ferramentas CSS favoritas de 2018

CSS não utilizado – Uma ferramenta que analisa o seu site para quaisquer seletores CSS não utilizados.


100 bibliotecas, frameworks e ferramentas CSS favoritas de 2018

Purgecss – Uma ferramenta que remove o CSS não usado do seu site.


100 bibliotecas, frameworks e ferramentas CSS favoritas de 2018

sanitize.css – Esta biblioteca CSS corrige estilos quebrados e ausentes.


100 bibliotecas, frameworks e ferramentas CSS favoritas de 2018

CSS Gridish – Crie um arquivo Sketch e um código CSS Grid das especificações do seu projeto.


100 bibliotecas, frameworks e ferramentas CSS favoritas de 2018

OptiCSS – Um otimizador CSS com reconhecimento de modelo.


100 bibliotecas, frameworks e ferramentas CSS favoritas de 2018

Mort – Uma ferramenta para detectar CSS “morto”.

Efeitos de Imagem CSS

100 bibliotecas, frameworks e ferramentas CSS favoritas de 2018

Instagram.css – Um conjunto completo de filtros do Instagram em CSS puro.


100 bibliotecas, frameworks e ferramentas CSS favoritas de 2018

Pure CSS Halftone Effect – Como criar um efeito hipnotizante com CSS.


100 bibliotecas, frameworks e ferramentas CSS favoritas de 2018

Efeito Glitch CSS – Mary Lou compartilha um efeito de falha experimental alimentado por animações CSS e pela propriedade clip-path.


100 bibliotecas, frameworks e ferramentas CSS favoritas de 2018

Direction Aware Hover Effects – Nifty CSS / JS hover efeitos com base na direção de um usuário está vindo.


Para mais efeitos de imagem baseados em CSS, dê uma olhada nesta coleção de bibliotecas .

Estruturas de Layout CSS

100 bibliotecas, frameworks e ferramentas CSS favoritas de 2018

Atomic Bulldog Grid – Um layout CSS Grid, com fallback parcial para o Flexbox.


100 bibliotecas, frameworks e ferramentas CSS favoritas de 2018

BuddyCSS – Um framework CSS simples que visa facilitar o desenvolvimento.


100 bibliotecas, frameworks e ferramentas CSS favoritas de 2018

60GS – Um kit para iniciantes CSS Grid de 60 colunas.


100 bibliotecas, frameworks e ferramentas CSS favoritas de 2018

Teutonic CSS – Um framework CSS moderno que pesa apenas 12KB.


100 bibliotecas, frameworks e ferramentas CSS favoritas de 2018

ModestaCSS – Um framework CSS limpo que é escuro e responsivo.


100 bibliotecas, frameworks e ferramentas CSS favoritas de 2018

Flat Remix CSS Library – Um conjunto de elementos pré-definidos que contribuem para um desenvolvimento mais rápido.


100 bibliotecas, frameworks e ferramentas CSS favoritas de 2018

FICTOAN – Uma estrutura SCSS intuitiva que também funciona como um kit de interface do usuário.


100 bibliotecas, frameworks e ferramentas CSS favoritas de 2018

Mostarda UI – Faturado como um framework CSS que “realmente parece bom”.


100 bibliotecas, frameworks e ferramentas CSS favoritas de 2018

Material – Essa estrutura combina o Bootstrap 4 com o material design do Google.


100 bibliotecas, frameworks e ferramentas CSS favoritas de 2018

Smart CSS Grid – Um sistema CSS Grid mínimo e responsivo.


100 bibliotecas, frameworks e ferramentas CSS favoritas de 2018

Biomatic UI – Um framework CSS focado em atômica flexível.


100 bibliotecas, frameworks e ferramentas CSS favoritas de 2018

Tailwind CSS – Um framework CSS utilitário para o desenvolvimento rápido da interface do usuário.


100 bibliotecas, frameworks e ferramentas CSS favoritas de 2018

PaperCSS – O framework CSS menos formal.


Para mais estruturas de layout CSS, dê uma olhada nesta coleção .

Estruturas de Flexbox CSS

100 bibliotecas, frameworks e ferramentas CSS favoritas de 2018

Frow CSS – Uma estrutura HTML e CSS de software livre usando o Flexbox.


100 bibliotecas, frameworks e ferramentas CSS favoritas de 2018

Cirrus – Uma estrutura CSS responsiva que usa o Flexbox.


100 bibliotecas, frameworks e ferramentas CSS favoritas de 2018

Butter Cake – Um framework CSS de código aberto baseado no Flexbox.


100 bibliotecas, frameworks e ferramentas CSS favoritas de 2018

Flexit – Uma grade CSS Flexbox simples e limpa.


100 bibliotecas, frameworks e ferramentas CSS favoritas de 2018

Morango – Uma estrutura leve de CSS Flexbox.


100 bibliotecas, frameworks e ferramentas CSS favoritas de 2018

Katana.scss – Um sistema de layout baseado em CSS Flexbox .


100 bibliotecas, frameworks e ferramentas CSS favoritas de 2018

Grade flexível – Uma estrutura que ajudará você a implementar o CSS Flexbox.


Para mais recursos do flexbox, dê uma olhada neste artigo .

Ferramentas CSS e Geradores baseados na Web

100 bibliotecas, frameworks e ferramentas CSS favoritas de 2018

FlexBox Parent Attribute Visualizer – Uma maneira interativa de ver o efeito de várias configurações do CSS Flexbox.


100 bibliotecas, frameworks e ferramentas CSS favoritas de 2018

Fancy Border Radius Generator – Uma ferramenta que vai além dos cantos arredondados básicos.


100 bibliotecas, frameworks e ferramentas CSS favoritas de 2018

TinyEditor – Edite HTML / CSS / JS com este aplicativo super leve.


100 bibliotecas, frameworks e ferramentas CSS favoritas de 2018

css-doodle – Uma ferramenta baseada na web para desenhar padrões com CSS.


100 bibliotecas, frameworks e ferramentas CSS favoritas de 2018

Fonty – Uma ferramenta para testar fontes da web diretamente em um site ao vivo.


100 bibliotecas, frameworks e ferramentas CSS favoritas de 2018

CSS Duotone Generator – Crie uma imagem duotônica incrível e personalizada com HTML e CSS.


100 bibliotecas, frameworks e ferramentas CSS favoritas de 2018

StyleURL – Uma ferramenta que permite fazer alterações no CSS de forma colaborativa.


100 bibliotecas, frameworks e ferramentas CSS favoritas de 2018

Alegria gradiente – Use gradientes como imagens de espaço reservado.


100 bibliotecas, frameworks e ferramentas CSS favoritas de 2018

Font Playground – Um lugar para jogar com fontes variáveis.


100 bibliotecas, frameworks e ferramentas CSS favoritas de 2018

Keyframes.app – Um aplicativo da web e extensão do Chrome para criar animações CSS.


100 bibliotecas, frameworks e ferramentas CSS favoritas de 2018

Crie visualmente layouts responsivos com CSS Grid – Uma ferramenta para ajudá-lo a criar uma grade CSS responsiva.


100 bibliotecas, frameworks e ferramentas CSS favoritas de 2018

Cheatsheet de Alinhamento CSS – Um guia bem ilustrado para alinhar todas as coisas.


100 bibliotecas, frameworks e ferramentas CSS favoritas de 2018

Clippy – Uma ferramenta online que você pode usar para criar um CSS clip-path.


100 bibliotecas, frameworks e ferramentas CSS favoritas de 2018

GradPad – Um online para criar gradientes de cor CSS.


100 bibliotecas, frameworks e ferramentas CSS favoritas de 2018

Trianglify.io – Gere padrões personalizados de baixo polígono no formato PNG ou SVG.


100 bibliotecas, frameworks e ferramentas CSS favoritas de 2018

cssgr.id – Um gerador interativo de CSS Grid.


100 bibliotecas, frameworks e ferramentas CSS favoritas de 2018

Layoutit! – Uma ferramenta interativa de construção CSS Grid.


100 bibliotecas, frameworks e ferramentas CSS favoritas de 2018

Gradientify – Uma coleção dos principais gradientes com o código CSS copiar e colar.


Confira este artigo para uma enorme coleção de ferramentas e geradores de CSS gratuitos baseados na web.

Recursos de Aprendizagem CSS

100 bibliotecas, frameworks e ferramentas CSS favoritas de 2018

Aprenda CSS Grid gratuitamente – Um conjunto de 14 screencasts interativos para levá-lo do iniciante ao avançado.


100 bibliotecas, frameworks e ferramentas CSS favoritas de 2018

Livro de receitas de layout CSS – Acesse “receitas” para criar layouts comuns.


100 bibliotecas, frameworks e ferramentas CSS favoritas de 2018

Diretrizes para o Design Web Brutalista – Implementando o design brutalista do jeito certo.


100 bibliotecas, frameworks e ferramentas CSS favoritas de 2018

Cheatsheet Acessibilidade – Uma lista de verificação útil para garantir que seus projetos sejam acessíveis a todos.


100 bibliotecas, frameworks e ferramentas CSS favoritas de 2018

MODALZ MODALZ MODALZ – Um guia para quando usar modais (e quando não).


100 bibliotecas, frameworks e ferramentas CSS favoritas de 2018

GRID – Uma planilha visual para CSS Grid.


100 bibliotecas, frameworks e ferramentas CSS favoritas de 2018

Guia de Estilo A11Y – Uma biblioteca de padrões vivos com um olho para a acessibilidade.


100 bibliotecas, frameworks e ferramentas CSS favoritas de 2018

A Lista de Verificação de Carregamento de Fontes – Uma lista para ajudá-lo a maximizar o desempenho e a experiência do usuário.


100 bibliotecas, frameworks e ferramentas CSS favoritas de 2018

O que é o CSS modular? – Um guia detalhado escrevendo CSS em escala.


100 bibliotecas, frameworks e ferramentas CSS favoritas de 2018

Aprenda Flexbox – Ferramenta online que demonstra as várias propriedades do CSS Flexbox.


100 bibliotecas, frameworks e ferramentas CSS favoritas de 2018

Hot Tips CSS – Uma seleção selecionada de snippets de CSS para aprimorar seus projetos.


100 bibliotecas, frameworks e ferramentas CSS favoritas de 2018

CSS Cheat Sheet – Uma referência bem feita de propriedades CSS.


100 bibliotecas, frameworks e ferramentas CSS favoritas de 2018

Lista de verificação de projeto de front-end – Uma lista exaustiva de elementos para ajudá-lo a garantir a qualidade no design.


100 bibliotecas, frameworks e ferramentas CSS favoritas de 2018

Grid to Flex – fallbacks CSS Flexbox para projetos usando CSS Grid.


100 bibliotecas, frameworks e ferramentas CSS favoritas de 2018

Sistema de Design Baseado em Componentes Com Tachyons – Introdução a um sistema de estrutura / design CSS funcional.


100 bibliotecas, frameworks e ferramentas CSS favoritas de 2018

30 Seconds of CSS – Uma coleção com curadoria de trechos de CSS úteis que você pode entender em 30 segundos ou menos.


100 bibliotecas, frameworks e ferramentas CSS favoritas de 2018

100 Days CSS Challenge – Crie algo único e aprimore suas habilidades.


100 bibliotecas, frameworks e ferramentas CSS favoritas de 2018

Como o CSS funciona: Entendendo a cascata – Aprenda um dos verdadeiros fundamentos do CSS para um código mais eficiente.


100 bibliotecas, frameworks e ferramentas CSS favoritas de 2018

Sistemas utilitários gerenciáveis ​​com variáveis ​​CSS – Uma olhada na diferença entre variáveis ​​Sass e novas variáveis ​​CSS.

Cool CSS Creations

100 bibliotecas, frameworks e ferramentas CSS favoritas de 2018

Teclado Piano – Graças a este site CSS / JS, você pode tocar piano no teclado ou no mouse.


100 bibliotecas, frameworks e ferramentas CSS favoritas de 2018

CSS Snake & Ladders – Um jogo multi-player desenvolvido com HTML e CSS.


100 bibliotecas, frameworks e ferramentas CSS favoritas de 2018

Solar System Explorer em CSS – Veja esta simulação, construída sem um único bit de JavaScript.


100 bibliotecas, frameworks e ferramentas CSS favoritas de 2018

Pure CSS Francine – Uma renderização HTML / CSS de uma pintura a óleo do século XVIII.


100 bibliotecas, frameworks e ferramentas CSS favoritas de 2018

Air Bomb – Um divertido jogo escrito com CSS puro (não é necessário JS).

Posted in Blog
Write a comment