Coding Kung-fu 35 gráficos construídos puramente com CSS3
Olhe para os gráficos abaixo, Photoshop incrível funciona certo? Não, eles são criados pelo CSS3. Sim eles são completamente “desenhado” por CSS3! Quando vimos animações CSS3 suficientes, pensamos que todas elas são capazes de fazer um potencial Flash killer, mas estamos errados. Os desenvolvedores talvez não satisfaçam com a diversão da animação, então, novamente, eles expandem os limites do CSS3 para desafiar o reino do editor gráfico.
Com este post vem 35 gráficos CSS3 cuidadosamente criados que incluem até mesmo algo que você não se relacionaria com CSS3 como Iphone da Apple, Personagem de desenho animado Doraemon, e mais surpresas! Heck, alguns deles até vêm com um tutorial detalhado que ensina como alcançá-lo! Então não perca a grande chance de aprender a criar gráficos usando CSS3 e um pouco de HTML, vamos ficar safados com CSS3!
É altamente recomendável ver essas demonstrações usando a versão mais recente do Safari ou a versão do desenvolvedor do Google Chrome. A maioria das demonstrações suporta a versão mais recente do Firefox e do Google Chrome, embora.
Ícone de feed RSS
RSS Feed Ícone construído com CSS3, exclusivamente da Hongkiat! Junto com o link vem um tutorial que você pode realmente aprender a “desenhar” o ícone RSS Feed sem usar uma única imagem. Crie o milagre CSS3 com suas próprias mãos!
Apple iMac
Sim, meus olhos também não podem acreditar nisso, mas é o iMac “montado” puramente com CSS3.
Teclado Apple
É o Apple Keyboard construído com CSS3! Heck, os botões do teclado podem ser pressionados.
Iphone da Apple
Mais uma coisa: iPhoneCSS3.
Flor de cerejeira
O verdadeiro aspeto do CSS3 é que ele pode ser usado para construir qualquer coisa, incluindo plantas e animais!
Xícara de café
Um dia cansativo? Vamos tomar um café CSS3, melhor servido com o Safari / Google Chrome.
Doraemon
Este Doraemon é famoso pelo teste de compatibilidade CSS3. Experimente no Internet Explorer 8 ou abaixo e tenha um bom dia.
Meowww!
Agora você está olhando para um gato construído completamente com código! Pena que o CSS3 não pode gerar efeitos sonoros, pelo menos por enquanto.
Cogumelo, Triforce, Pokébola, Kirby
“Sendo um nerd, eu fiz algumas criações nerds - um cogumelo Mario, o Triforce, um Pokéball e Kirby. Para aqueles que usam navegadores de dinossauros, há uma captura de tela do que deve parecer.”
Nyan Cat
“Ele contém 81 elementos DOM, 688 linhas de CSS puro e uma função JavaScript para áudio em loop. Meu CSS falha no teste CSSLint e estou muito orgulhoso disso.”
Padrões
O CSS3 é tão bom que também pode ser usado para construir ativos fundamentais para web design, como esses padrões.
Bombom
BonBon são doces botões CSS3 criados com um objetivo em mente: botões de aparência sexy, realmente flexíveis, com a marcação mais minimalista possível.
Ícones iOS
Surpreendente? Sim. Estes ícones são construídos por cantos arredondados, sombras, gradientes, rgba, pseudo-elementos, e transforma, com a ajuda de certas ferramentas, como as ferramentas da westciv e o raio da borda.
Ícones de mídia social
Isso é impossível para o desenvolvedor web não construir ícones de mídia social se eles podem construir o iPhone e o Doraemon com CSS3. E eles construíram esses ícones muito bem.
Ícones de mídia social
Outro conjunto de ícones de mídia social que mostram as possibilidades do CSS3 na criação de ícones utilizáveis.
Peculiar
“Peculiar é um pacote de ícones grátis feito apenas em CSS. Ele foi criado para sites e aplicativos da Web que dependem de menos solicitações HTTP possíveis ou não precisam usar nenhuma imagem.”
Ícones da GUI
84 ícones GUI simples usando apenas CSS e HTML semântico. Isso ainda é considerado “pronto para produção” ícones, mas eles parecem muito promissores.
Steve Jobs
Steve Jobs não é apenas o ícone da era digital, mas também o líder que promove muito HTML5.
Baleia do Fail do Twitter
A baleia falida do Twitter não deixará de surpreendê-lo, exceto no Internet Explorer 8 ou abaixo.
umbrUI
Elementos da Interface do Usuário possibilitados pelo CSS3, e parece realmente elegante!
Logotipo do Adobe Photoshop
Uma homenagem ao Photoshop sem usar o Photoshop.
Logotipo do Android
O Android é feito de formas bastante simples, mas explica a vantagem do CSS3: você pode fazer coisas simples e modificá-las da maneira que quiser, usando apenas o código, mas não o Photoshop..
Logotipo da Apple
Logotipo da Apple retro apresentado usando CSS3, ainda tão impressionante quanto o tempo em que foi criado.
Atari Logo
Anos antes, quem teria pensado que o logotipo da Atari será recriado usando CSS3.
Logotipo da BP
Logo simples pode ser feito facilmente com CSS3. A melhor coisa com alguns desses logotipos exibidos aqui são os códigos fornecidos para você experimentar!
Logotipo da Dribbble
O famoso logotipo do Dribbble do site de vitrine de usuário exibido usando CSS3.
Logotipo do Magento
O logotipo do Magento não é muito difícil de desenhar, mas o resultado parece profissional.
Logotipo McDonald
Eu estou amando CSS3!
Twitter Bird
Proporção perfeita, ponta do chapéu para o criador.
Logotipo do Windows
Logotipo do Windows! Parece realmente incrível, e é fácil criar!
Logotipo do Internet Explorer
Realmente grande criação! Funciona nos principais navegadores, exceto no Internet Explorer 8 ou abaixo.
Logotipo do Google Chrome
Não tenho certeza se você adora o novo logotipo do Google Chrome ou não, mas esse logotipo CSS3 do Google Chrome parece incrível!
Logotipo da ópera
Agora uma prática para você: quais são as diferenças entre essa peça CSS3 e o negócio real?
Logotipo HTML5
HTML5 não pode brilhar sem CSS3!
Logotipo da Volkswagen
Exceto o esquema de cores, este clone CSS3 parece idêntico ao original.
Reflexão
Com o boom dos logotipos e gráficos feitos de puro CSS3 vêm as discussões que debatem muito sobre a usabilidade dos gráficos produzidos em CSS3 no ambiente de produção do mundo real..
Geralmente o gráfico CSS3 é bom, mas pode ficar chato, especialmente quando você precisa alterar o design ou simplesmente redimensionar o gráfico, Também a maior dor aqui é a tecnologia ainda não é totalmente suportada por certos navegadores como o Internet Explorer.
O que você acha? Você vai usar o gráfico feito com CSS3 em seu site? Você tem alguma solução para suas desvantagens atuais? Deixe-nos saber seu pensamento e compartilhe conosco se você acabou de assar um gráfico CSS3!
Mais
Disposto a realmente fazer algo com CSS3? Você veio ao lugar certo! Abaixo estão guias e tutoriais escritos para ajudá-lo muito em seu caminho para dominar o CSS3.
- CSS3: criar um menu de navegação de breadcrumb
- CSS3: crie um logotipo de feeds RSS
- CSS3: criar uma caixa de pesquisa
- CSS3: Guia para iniciantes
- CSS3 / HTML5: criar páginas da Web
- CSS3 / HTML5: criar um formulário de contato baseado em AJAX
