MDN
é uma base de dados referência hoje com um
explicativo fácil de entender, além de exemplos práticos sobre toda a linguagem de marcação.
O Devdocs também é uma base de dados, tão
completa quanto a MDN, além do CSS é possível pesquisar sobre outras linguagens.
Uma ferramenta essencial! Informações
sobre
suporte a tecnologias front-end pelos
principais
navegadores e dispositivos.
Ferramenta muito interessante para quem
ainda possui dúvidas na
especificidade do
CSS, permitindo até mesmo comparar vários seletores.
Esta ferramenta permite criar as próprias
funções para transições e
animações. É possível ver a animação em tempo real.
Ferramenta que ajuda a fazer shapes
complexos usando a propriedade CSS clip-path. Além de
ser
muito interativo e prático.
Essa ferramenta é uma mão na roda! Ela
irá lhe ajudar com aqueles prefixos "-webkit-,
-moz-, -ms- e etc", fazendo com que precise
apenas colocar a propriedade escolhida ele logo retornará esta propriedade com todos os
prefixos, acaso a propriedade não faça uso do prefixo ele não o retornará.
Assim como o autoprefixer CSS, essa
ferramenta assim que colocado o código css ele o retorna com seu prefixo *se o mesmo
necessitar de compatibilidade cross browser, e traz um toque mais destacado nas propriedades
css.
Uma ótima opção para otimização de
projeto, aquele código CSS que está muito grande, ou se precisa colocá-lo em ambiente de
produção, eis que o CSS
Minifier irá lhe auxiliar a minificar todo o código, deixando apenas em
uma linha, fazendo com que ganhe em desempenho durante o carregamento do site.
Eis uma ótima ferramenta para ganhar
tempo, para quem gosta, ou precisa fazer animações com CSS, ela é interativa pois poderá ver em
funcionamento os movimentos de um objeto e no final obter o código daquela
animação.
Para quem quer uma agilidade na criação
de um botão, ou não está com *aquela criatividade utilize essa ferramenta interativa que
traz diversas formas de estilizar seu botão e o melhor, no final obtenha o código desse css3
para incluir em seu projeto.
Essa ferramenta age como um minificador,
porém ela tem 3 estágios de compressão podendo encurtar comentários, puladas de linha até um
minificador por completo do código.
O patternify é uma ótima
tool, para
muitas pessoas que são detalhistas e querem ser criativas em seus projetos, há algumas opções de
patterns, sendo possível retirar o código em Base64 e
importar em seu código.
Utilize esta ferramenta prática para geração de códigos em flexbox e extraia o código que precisa para seu projeto. Além de ser interessante botar em prática de modo interativo seus conhecimentos no flexbox.
Além de disponibilizar curso para a
tecnologia Flexbox a documentação feita pela Origamid é bem objetiva e interativa, além dos
exemplos de como funciona cada propriedade, vale a pena acompanhar.
A documentação completa com as
propriedades para o CSS Grid que você precisa! Assim como no Flexbox, a Origamid trouxe de forma
direta e bem exemplificada o funcionamento da tecnologia.
Faça sua página bootstrap de forma
interativa e obtenha ao final o código fonte do projeto.
Um gerador muito tranquilo de se utilizar
para gerar um formulário Bootstrap, atualmente ele conta apenas com as versões 2 e 3 do
framework css, a seu final é possível exportar o código para utilizar.
Um gerador de botões em Bootstrap, ele
conta com uma sessão de Icons, onde é possível também utilizar os ícones nos botões, além do uso
das classes padrões como default, primary e outras mais.
Estilize seus textos utilizando essa ferramenta de sombra, ela conta com o preview para ver seu resultado, além de contar com a possibilidade de incluir 4 text shadows num mesmo elemento.
Uma ferramenta espetacular para geração de efeitos de sombra em textos. Ela possui alguns templates sensacionais para já utilizar, além de permitir editar, ou criar seu efeito.
Tenha diversas opções para geração de box shadow para seu css. Como premissa ele habilita 3 tipos de box shadow no mesmo elemento, obtenha o código que necessita.
Tenha uma agilidade maior para gerar sombras em seu CSS. De modo interativo ele exibe como fica a forma da shadow, além de possuir os códigos com compatibilidade para todos os navegadores.
Uma ferramenta espetacular para geração de efeitos
de sombra em elementos HTML. Ela possui ótimos templates para dar início e porque não já utilizar em algum projeto? Veja o quão interessante é esta ferramenta.
Tenha praticidade através de uma ferramenta que
auxilia na criação do border radius. Ele conta com a compatibilidade para todos os navegadores,
além de uma pré-visualização da borda em questão.
Mais uma opção para geração de border radius para automatização de seu css. Conta também com a opção de compatibilidade entre navegadores, além de deixar em CSS3, ou não.
Ferramenta simples e intuitiva para geração de border-radius. Conta com básico preview de modelo, além de permitir que altere manualmente as propriedades similar ao w3schools.
Ferramenta para geração de border radius, ela conta com todas as configurações de borda padrão além da possibilidade de dar um radius. Interativa e de fácil compreensão.
Mais uma opção para bordas no CSS. Estilize seus projetos e tenha maior familiaridade com o estilo outline.
Ferramenta para geração de bordas, ou outline para
seu elemento HTML. Ela conta com um preview interessante e intuitivo para quem possa não estar
acostumado com as propriedades CSS.
Eis uma ferramenta que compõe muitas soluções em CSS, tais como: border-radius, multiplas colunas, box-sizing, outline, flexbox, text-shadow, transition e muito mais.
Trabalhe melhor a organização de seus textos utilizando essa ótima ferramenta css. Para muitos que não a conhecem, ele conta uma interface de simples e fácil interação e compreensão.
Gerador de colunas CSS, uma ótima ferramenta para otimizar a estrutura de seus textos. Ela é interativa, além da possibilidade da extração dos códigos CSS com compatibilidade a outros browsers.
Uma ótima ferramenta para utilização do filtro no
css. Ele conta com o preview de uma imagem, na qual pode usar e abusar do filtro e ver o
resultado final.
Se sua familiaridade com o box-sizing não é a melhor, utilize esta ferramenta que possui um preview de fácil compreensão, na qual pode obter o código para rápida implementação em seu projeto.
Faça transições CSS com essa ferramenta. Ela conta com 4 propriedades para edição da transição e o código final é liberado com compatibilidade entre os navegadores.
Uma propriedade que sempre é cheia de mistérios, esta ferramenta vem para desmistificar o transform para elementos 2D. É interativa e de fácil entendimento.
Suba um pouquinho mais o nível do transform com esta ferramenta. Ela conta com muitos controles para edição do elemento em 3D.
Gerador de transform CSS, ela é uma ferramenta simples, porém bem intuitiva ao usuário. Mais uma ótima opção para a propriedade transform do CSS.
Faça uso de um compilado de ferramentas CSS, dentre elas o transform, flexbox, border-radius, text-shadow e muito mais. Além de contar com aquele preview para facilitar a visualização.
