15 grandes geradores HTML5 e CSS3
HTML5 e CSS3 são ótimas linguagens para começar a aprender, e eu sempre achei que uma das melhores maneiras de começar a aprender é mergulhar e manipular o código. Como você provavelmente poderia dizer, é aí que os geradores entram. Eles são uma ótima maneira de gerar código, brincar com ele e aprender.
Não só isso, eles são incrivelmente úteis, porque muitas vezes, como desenvolvedor ou designer, descobrimos que estamos fazendo coisas repetidas vezes. Bem, os geradores podem tirar essa vantagem e fazer pequenas coisas para você a cada vez.
Como exemplo, tenho um snippet de expansão de texto que cria um modelo HTML5 sobre o qual escrevi Aqui . Agora, o expansor de texto é ótimo, mas não resolve todas as necessidades, e neste caso há uma grande necessidade de geradores, então aproveitei para encontrar 20 dos meus favoritos e descrever por que gosto deles.
Eu vou dizer que a maior parte dessa lista vai se concentrar em geradores CSS3, simplesmente porque eles estão em demanda mais do que geradores HTML5, e vamos aprender o porquê. Nota: clique nas imagens para abrir os sites.
Geradores CSS3
Há uma conotação um tanto negativa quando se trata desses geradores, e eu tenho que dizer que como designer e desenvolvedor não há nada negativo sobre o uso de um. É uma grande economia de tempo e, com toda a honestidade, conheço três desenvolvedores que escreveram seus próprios geradores apenas porque queriam ajudar a comunidade. Portanto, tenha em mente que não é como se você estivesse usando algo tabu feito pela AOL; Estes são geradores muito naturais e orgânicos que surgiram como nós precisamos deles. Então, por que não compartilhar algumas das riquezas? Vamos passar por alguns dos meus favoritos e por que você pode gostar deles.
Geradores Gerais
Esta seção se concentrará nos geradores que cuidam das necessidades e usos do espectro amplo. Estes irão cobrir quase tudo o que você precisa, ou quer em um gerador, mas pela sua própria natureza eles podem ser piores em detalhes. É por isso que eu darei tantas opções mais adiante neste artigo para tipos específicos.
CSS3.me
Este é um dos geradores exatos que eu estava me referindo. Este foi criado por um dos meus designers favoritos, Eric Hoffman e é incrível. Muito simples, minimalista e elegante, mas ao mesmo tempo muito funcional. Dando-lhe a capacidade de alterar e definir o raio da borda, sombra, o gradiente e opacidade - é bastante funcional.
Nota: Dê uma olhada no site de Eric; é um ótimo exemplo de primeiro design móvel. Ele também é designer Zendesk , então envie-lhe algum amor se você já gostou desse produto.
Criador CSS3
Muitas vezes as pessoas vão encontrar geradores que amam e ficar com eles. E foi exatamente isso que aconteceu com um cliente com quem trabalhei anteriormente em relação a esse gerador. Ele estava absolutamente apaixonado por isso, e eu posso ver por que - é certamente funcional. Pode não ser a coisa mais linda já feita, mas parece ter todos os sinos e assobios.
Você pode fazer trabalhos de face @ font, trabalho de animação, sombras de caixa, sombras de texto, rotação de texto, transições, gradientes, raio de borda e muito mais. É um que eu geralmente tenho marcado, mas raramente uso simplesmente por causa de quão bem os geradores menores fazem em cada uma das suas respectivas categorias. Mas é certamente um bom gerador para tentar se você precisar de um e não gostar de pular para um monte de diferentes.
Gerador CSS3
Este é outro bom general que fornece muita funcionalidade. Eu gosto deste porque tem um bom e fácil drop downs, e fácil de usar a funcionalidade. O design também é muito bom. Ele também oferece uma funcionalidade de tamanho de caixa agradável. Este oferece uma grande capacidade de fazer o seguinte: raio de borda, caixa de sombra, sombra de texto, RGBA, várias colunas, dimensionamento de caixa, estrutura de tópicos, transições, transformações, gradientes de seletores. Eu acho que este é um dos meus favoritos, porque o design e a interface do usuário são tão limpos. Eu costumo usar este quando eu esqueço cssmaker.
Geradores de botão
Criador de botões CSS3-Tricks
Um dos primeiros fabricantes de botões que vi no dia realmente me fez estremecer. Foi muito linear, não tinha nenhuma interface para ele (ironicamente) e foi, em geral, um produto terrivelmente projetado. Como uma nota lateral, eu estarei falando sobre algo similar em seguida, mas por enquanto mostrarei uma que eu encontrei em css3tricks e é realmente muito legal.
Um dos pontos-chave a se referir aqui é o fato de que é quase totalmente controlável por um controle deslizante de arrastar e soltar, o que é realmente bom. Apenas espere até que você tenha que inserir tudo manualmente usando o teclado e você desejará que você tenha um bom controle deslizante. Como nota final, CSS3 Tricks é um site maravilhoso com uma tonelada de conteúdo bem organizado e atencioso que todos vocês gostariam de verificar.
CSS3 Button.net
E agora chegamos ao gerador que eu estava me referindo. O design pode estar faltando, mas oferece muito mais opções do que o anterior, que é ironicamente muitas vezes como as coisas funcionam. Às vezes você gostaria de facilidade de uso e às vezes você precisa de uma escolha séria quando se trata de geradores, e esses dois últimos realmente acertam esses dois pontos.
Este oferece a capacidade de adicionar várias sombras de texto, sombras internas, bordas e cores de fontes, enquanto o último realmente não entrou em muitos detalhes. Pode ser difícil descobrir no início, mas você vai conseguir se você apenas jogar com ele por alguns minutos. Eu acho que este é o mais útil se você está acostumado com o Windows UI, e como resultado, eu tive clientes me dizendo que este era o favorito deles porque eles estão presos no XP há anos e não sabem nada melhor. E agora eu tenho certeza que alguns de vocês estão se perguntando, mas honestamente como isso acontece - alguns clientes querem que os links para os geradores aprendam por si mesmos depois que você os impressionar. Eu costumo ligá-los a Lynda , TeamTreehouse e alguns desses geradores para uma boa medida.
Gerador de Botões CSS3
Isso é muito divertido. Ele te dá um grande botão para manipular, que também está em uma cor retrô. Você pode então manipular a sombra, a borda, a cor e, além disso, permite editar o mouse sobre o mouse. Eu gosto deste porque é um que eu encontrei um tempo atrás quando eu estava entrando no CSS, e realmente me deu uma idéia do que ele pode fazer. Os controles deslizantes de arrastar e soltar são ótimos para pessoas que são novas nos idiomas, porque você pode ver o que é capaz de fazer imediatamente. Agora, eu vou dizer, eu não uso mais este particularmente - à luz de outros que surgiram, mas é uma ótima lembrança.
Imagem Fronteira e Geradores de Raios
Imagem de Fronteira
Nada supera o border-image.com quando se trata de tirar uma imagem específica e depois replicá-la para encontrar o estilo de borda correto. Verifique se você não infringe os direitos autorais e use a imagem de outra pessoa sem atribuição.
Mas digamos que você desenhou uma seta ou triângulo e gostaria de encontrar um gerador para repeti-lo na borda do site ou até mesmo na borda de um elemento. Bem, nada é melhor que este site quando se trata dessa necessidade. Você pode manipular o deslocamento, o tamanho e a repetição da imagem.
Assim que chegar ao site, você verá uma imagem de exemplo que eles carregaram, mas é muito mais útil do que aquela imagem mostrou. Muitas vezes vou usá-lo para projetos em planos de fundo que eu quero repetir e / ou ver como seria realmente rápido, antes de realmente replicar a totalidade do plano de fundo no Photoshop. Você pode usá-lo para qualquer coisa relacionada a imagens repetidas, na verdade.
Raio da Borda
Esta é uma ótima e pequena ferramenta, que eu geralmente acho muito prática. Com isso, tudo o que você faz é simplesmente definir o quanto de uma borda arredondada você quer em cada canto. Muito prático, muito simples. E então você apenas verifica qual tipo de prefixo de navegador você quer incluir, e lança pronto. É uma interface bonita com toda a honestidade. Deve haver testes em cursos de ciência da computação onde tudo o que você faz é tentar criar algo tão simples e funcional quanto isso.
Geradores de gradiente CSS3
Editor de gradiente de cor Zilla
Isso é cobrado como o Editor final de gradientes CSS3, e por um bom motivo. Na verdade, é tão incrível que é o único editor de gradientes que eu vou incluir aqui. Tem uma tonelada de funcionalidades e é muito utilizável e fácil de começar. Basta arrastar os lápis preto e azul um pouco e você verá rapidamente o que eles fazem. Eles também fazem um editor de navegador cromada ou Raposa de fogo isso é realmente útil para designers que trabalham na web. Também não se esqueça de brincar com as predefinições desta, porque muitas vezes elas são boas o suficiente - quem as escolheu fez um ótimo trabalho.
Geradores / editores tipográficos
Gerador de @fontes
Este é um produto muito interessante. O que ele faz é permitir que você carregue fontes que você tenha escolhido da Web ou que possa ter no computador e, em seguida, forneça um arquivo de saída pronto para trabalhar na Web. Você ganha mais de uma coisa, você ganha algumas coisas. Você obtém o CSS para as propriedades @ font-face, de acordo com a fonte escolhida, e um arquivo HTML que exibe a fonte e seus diversos usos. É realmente uma ótima ferramenta para verificar todo o potencial de uma fonte, se você não tem certeza sobre isso, e especialmente se você não tem tempo para gerar um site inteiro com essa fonte antes de tomar a decisão.
Gerador Inverso de CSS3
CSS3 por favor
Este é um produto realmente fascinante. Basicamente, o que ele faz é dar a você um box set, e todo o CSS para ele, e então lhe dá a habilidade de ativar e desativar as seções para ver o que elas fazem. Então você pode essencialmente fazer engenharia reversa do CSS3 para descobrir o que ele faz, e então você pode ver o que está fazendo. Esta é uma ótima maneira de aprender CSS3 se você estiver interessado, mas pense que os geradores são um pouco complicados demais.
Geradores de sombreamento CSS3
Gerador de Sombras Webestools
Eu gosto bastante desse gerador de sombras, porque ele entra em detalhes e profundidade em relação a sombras que os outros geradores simplesmente não fazem. Pode não parecer o produto mais bem projetado de todos os tempos, mas certamente é incrível. Ele tem sombras embutidas, sombras iniciais e a capacidade de manipular deslocamentos, definir cores e fazer praticamente qualquer coisa que você possa fazer com o código - mas, em vez disso, com uma boa barra de arrastar. Oh como eu amo a barra de arrastar. Marque esta opção se você precisa ver, em geral, como sua ideia-sombra parecerá antes de codificá-la.
Geradores HTML5
Geradores de HTML5 são meio difíceis de encontrar, e a razão para isso é provavelmente por causa de quão grande Boilerplate HTML5 é. Nós não estaremos falando sobre isso, porque não é especificamente um gerador, então eu vou resumir aqui: É basicamente um template HTML5 já preenchido e pronto para você trabalhar, então vá checar se você não viu isso. É muito legal, na verdade. Muitas pessoas usam isso como um modelo inicial para seus sites e por um bom motivo. Agora de volta aos geradores. Encontrar um de qualidade é realmente muito difícil, mas eu consegui encontrar alguns aqui que eu vou estar mostrando - e depois eu tenho alguns mais generalizados que tocam em todos os tópicos deste artigo.
Gerador HTML5 Shikiryu
O Gerador HTML5 de Shikiryu é muito mais complexo. Você pode adicionar recursos que permitem que você faça coisas dentro do Blueprint (mixins, etc) e do tipo fantasia - por isso é bastante útil. Eu gosto porque é um pouco mais semântica do que as outras opções, e ao mesmo tempo permite que você adicione aplicativos de terceiros realmente populares que as pessoas adoram usar.
Mudar para o gerador HTML5
Este é um gerador interessante. O que ele faz é permitir que você gere uma estrutura rápida e fácil para a criação de sites, mas, diferentemente do HTML5 Boilerplate, ele permite escolher exatamente quais seletores preferiríamos ver em nossa estrutura. Na verdade, eu tenho tendência a usar isso para gerar código em vez de HTML5 Boilerplate quando preciso de mais alguns seletores ou itens do que ele oferece. Agora, ele não segue exatamente todos os princípios de marcação semântica - como o HTML5 Boilerplate - mas faz um trabalho bom o suficiente, e você pode entrar e fazer o resto se realmente precisar usá-lo.
Quackit Gerador HTML5
Este dá um passo para trás e, em vez de apenas fornecer um grupo de código bastante genérico e básico, permite que você insira todas as suas próprias informações. Isso é realmente útil, e eu descobri que outros que são mais novos nos sites realmente adoram. Eles o amam, eu descobri, porque ele gera o HTML base padrão para você fazer a aparência que quiser com CSS. Então, se você está aprendendo CSS, e ainda está um pouco nebuloso em HTML (embora não saiba por que isso aconteceria), então você pode fazer isso dessa maneira.
E isso vai envolvê-lo. Esses geradores são simplesmente incríveis para trabalhar de maneira rápida e ágil, mas, em vez de empreendedores, são para designers. E isso é realmente brilhante na minha opinião. Tem uma idéia rápida para um raio de borda (tab'd talvez?), Ou uma sombra, ou um gradiente de cor, ou um modelo html5 com blueprint incluído - bem, estes são feitos apenas para você então. Tome nota, porém, que esta não foi uma lista exaustiva, mas foram alguns dos meus favoritos e aqueles que os meus colegas no passado usaram. Eu realmente gosto de usar muitos desses, e espero que você também.