50+ Técnicas CSS3 Incríveis para Melhores Designs
O CSS3 está ganhando força, apesar do fato de que o padrão ainda não foi finalizado.
Existem centenas de tutoriais para ensinar designers como usá-lo, mas infelizmente muitos deles cobrem o mesmo terreno.
E alguns dos tutoriais ensinam os designers a fazer coisas que eles podem não considerar úteis, embora as técnicas geralmente possam ser adaptadas para se adequarem perfeitamente a um projeto.
Abaixo estão mais de cinquenta tutoriais CSS3 impressionantes. Muitos são estritamente baseados em CSS e HTML, enquanto outros também incorporam JavaScript.
Se você tem uma técnica favorita ou tutorial que não está incluído abaixo, por favor, compartilhe nos comentários!
Usando CSS3 para ilustração sem imagens
Vários novos métodos em CSS3 permitem que vários gráficos muito complexos sejam criados usando CSS puro e sem imagens. Aqui estão alguns dos melhores exemplos por aí.
Ilustração de iPhone CSS puro
Uma mistura de bordas, transformações e gradientes para criar uma imagem animada de um iPhone.
Criando o logotipo do navegador Opera em CSS3
Uma ilustração limpa do logotipo da Opera renderizado usando técnicas CSS3.
Nosso sistema solar com CSS3
Uma representação suave do sistema solar com efeitos de animação.
Efeito de relógio analógico
Crie um relógio analógico legal usando apenas CSS3 e jquery.
Experimentos de sombra
Este tutorial mostra como usar sombras de CSS para criar uma variedade de efeitos, incluindo um gráfico do Lado Negro da Lua, uma tabela periódica sombreada e até mesmo uma “poção do amor” psicodélica.
Criando imagens de estilo Polaroid com apenas CSS
Este tutorial usa os efeitos CSS2 e CSS3 para adicionar o estilo Polaroid a uma lista simples de imagens.
CSS3 texto, layout e efeitos de cor
O CSS3 pode ser usado para muitas animações e gráficos diferentes, mas também é ótimo para efeitos de layout, texto e cor que você pode ter recorrido anteriormente ao Photoshop.
Colunas CSS3 Utilitzing
Codificando um módulo CSS3 limpo de várias colunas.
Implementação Geral do CSS3
Uma visão geral dos benefícios do CSS3.
Ligações de estilo com CSS3
Quatro maneiras diferentes de estilizar diferentes tipos de links com CSS3
Acordeão Vertical CSS3
Os gradientes e transições fazem este menu de acordeão que se degrada para uma lista ordenada em navegadores mais antigos.
Super Impressionante CSS3 Botões
Botões gradientes coloridos com drop-shadow que funcionam em fundos claros ou escuros e não requerem imagens!
Botões de Estilo Photoshop com CSS3
Uma comparação lado a lado de como criar botões CSS3 sem imagens e com o Photoshop.
Css Gradient Text Effect
Instruções sobre como criar um efeito de texto exclusivo, aplicando um mapa de textura ao texto. Você pode usar gradientes ou padrões para realmente tornar o texto pop.
Algumas alternativas CSS3 para efeitos JavaScript
7 maneiras de substituir efeitos JavaScript comumente usados por CSS3 para preparar seu site para o futuro.
Efeito de texto CSS3 em relevo
Criando um efeito de texto em relevo sem hacks do navegador Photoshop.
Entendendo os valores de cores CSS3
Tudo sobre as novas opções de cores disponíveis com o CSS3.
Criando Rich Effects com CSS3
Transições CSS e Transformações podem ser combinadas para fazer uma variedade de efeitos.
Fazendo um efeito Bokeh CSS3
A capacidade de usar gradientes e transparência com CSS3 possibilita esse efeito clássico.
Colunas CSS3
Um bom tutorial em vídeo sobre o conceito de usar colunas CSS3 para layout.
Listas de fantasia com CSS3
Estilo de lista com marcadores legal usando CSS3 para fazer marcas checadas.
Infoboxes sem ponta muito lisos com CSS3
As técnicas possibilitadas pelo CSS3 fazem essas caixas realmente aparecerem.
Balões de fala
Os pseudo-elementos de raio de borda e de transformação tornam essas formas possíveis.
Efeitos de Transição de Imagem em Estilo Flash
Uma maneira inteligente de usar o efeito de animação CSS.
Recriando a tela de atualização do Tumblr com CSS3
Um efeito de design CSS3 que se degrada bem para navegadores mais antigos.
Tipografia CSS3 sutil que você juraria foi feita no Photoshop
Este tutorial em vídeo de 13 minutos mostrará a você como criar um efeito tipográfico 3D bonito e sutil inteiramente com o CSS3.
Rotação de texto com CSS
Aqui está uma técnica um pouco mais antiga que mostra como criar texto compatível com navegador cruzado girado para alinhar com um eixo vertical.
Crie um efeito de tipografia com sombra de texto CSS
Este tutorial da Line25 mostrará a você como usar sombras de texto para criar um efeito estilo letterpress no texto do seu site.
Awesome Galeria CSS3 Lightbox com jQuery
Esse código cria uma galeria de imagens no estilo Polaroid com uma opção de compartilhamento de arrastar e soltar.
Sobreposições impressionantes
Este tutorial da Zurb mostra como criar sobreposições de imagens usando propriedades de borda CSS3 que podem ser usadas para exibir informações adicionais sobre uma imagem quando você passa o mouse sobre elas.
Etiquetas de formulário inline impressionantes
Este tutorial mostra como criar rótulos de formulários in-line que não desaparecem quando seus visitantes começam a digitar.
Efeitos 3D CSS3
Cubo CSS3 Animado
Um exclusivo cubo 3D animado usando 3D transforma estilo com CSS. O cubo pode ser girado usando as teclas de seta para mostrar as informações exibidas em cada face.
Fitas CSS3 3D
Dê um pouco de profundidade ao seu design usando essas fáceis fitas de CD CSS3.
Animated 3D Poster Scroller
Exibição de cartazes de filmes com legendas usando um surpreendente efeito de perspectiva 3D em CSS3.
Coca-cola 3D CSS3
Arrastar uma barra de rolagem faz com que esta Coca-Cola virtual possa ser revertida.
Sombras CSS
Criativamente estilizando sombras ao separá-las do elemento.
Animação CSS3
Uma rendição animada do Whale Fail do Twitter com CSS3
Um usuário muito elegante de CSS3 que surpreendentemente degrada um pouco bem em navegadores mais antigos.
Fundo Paralaxe Starfield
As estrelas se movem da esquerda para a direita, atrás do seu conteúdo, com este visual clássico de viagens espaciais.
Mostrando e ocultando conteúdo com CSS3
Expandindo e contraindo bandejas e árvores de menu sem javascript.
Uma aba de acompanhamento flutuante com CSS3
Coloque sua navegação ou ícones de contato em alcance fácil com este método útil.
Windows Modal Drop-in CSS3
Um par de janelas modais comuns geradas usando efeitos e transformações CSS3.
Spinners usando apenas CSS3
Criando animações de carregamento usando apenas CSS3 e sem gifs animados!
Exibindo ícones sociais usando CSS3
Um efeito legal de desvanecimento para exibir seus ícones sociais usando CSS3 puro.
Animação de desenhos animados CSS3
Criando uma animação inteira em estilo flash usando apenas CSS3 e jquery.
Uma paisagem animada usando CSS3
Montanhas e nuvens e água todos animados com CSS3.
Bonitas legendas de imagens de rolagem animadas
As Transições CSS3 permitem que você faça coisas incríveis com legendas de texto. Aqui está um exemplo.
Um menu de miniaturas elásticas
Uma série de imagens que se expandem e se retraem quando você passa o mouse sobre elas.
Cartões de índice dinâmicos empilhados
Um fantástico efeito de animação que pode ser aplicado a vários designs.
Um relógio colorido com CSS e jQuery
Este tutorial mostra como criar um relógio colorido realmente impressionante usando CSS e jQuery, consistindo em três círculos de estilo de carregamento separados que mostram horas, minutos e segundos.
Puro CSS3 At-At Walker
Este é um exemplo impressionante que usa CSS3 (sem JavaScript, sem Flash) para criar um At-At Walker animado de Star Wars. A única desvantagem é que atualmente só é visível nos navegadores Webkit (Safari e Chrome).
Crie um controle deslizante de conteúdo jQuery usando CSS puro
Aprenda a criar um controle deslizante puramente CSS no estilo jQuery com este tutorial.
Menu suspenso CSS3
Este tutorial do WebDesignerWall mostra como criar um menu suspenso CSS3 compatível com vários navegadores que também funciona em navegadores que não suportam CSS3 (embora com estilo limitado).
Escrito exclusivamente para WDD por Cameron Chapman .
Se você conhece outros tutoriais CSS3 de alta qualidade que não foram abordados acima e gostaria de compartilhar, por favor faça-o nos comentários!