Guia do iniciante para CSS3
Desde o anúncio de 2005, o desenvolvimento do nível 3 de Cascading Style Sheet, ou mais conhecido como CSS3, tem sido observado de perto e monitorado por muitos designers e desenvolvedores. Todos nós empolgados em conhecer os novos recursos do CSS3 - as sombras de texto, bordas com imagens, opacidade, vários fundos, etc, só para citar alguns.
A partir de hoje, nem todos os seletores de CSS3 são totalmente suportados ainda. Mas isso não significa que não podemos nos divertir testando novas coisas sobre o CSS3. Este post é dedicado a todos os designers e desenvolvedores que já estão familiarizados com CSS 2.1 e querem sujar as mãos no CSS3.0.
É uma compilação de leituras úteis CSS3, códigos de amostra, dicas, tutoriais, cheat-sheets e muito mais. Sinta-se à vontade para usá-los em seus projetos, apenas certifique-se de que eles caiam perfeitamente em navegadores incompatíveis.
Introdução ao CSS3
Introdução ao CSS3
Uma introdução oficial (roadmap) para CSS e CSS3. Este documento dá uma ideia geral sobre o desenvolvimento do CSS3.
CSS3: leve o design para o próximo nível
Vantagens do CSS3, com explicações e exemplos de propriedades e seletores CSS3.
Vários truques com CSS3
O Webmonkey apresenta diversos truques básicos em CSS3, incluindo bordas arredondadas, bordas, sombras projetadas por imagens, truques de imagem e muito mais.
Entrevista: Seis perguntas com Eric Meyer no CSS3
O pessoal da Six Revision entrevistou Eric Meyer com informações e respostas valiosas sobre CSS3.
CSS3: aprimoramento progressivo
Como você pode usar técnicas de aprimoramento refinadas (ou progressivas) para usar os recursos CSS3 em navegadores que os suportam, garantindo que seu código ainda forneça uma experiência de usuário satisfatória em navegadores mais antigos que ainda não oferecem suporte a esses recursos.
CSS3: plano de fundo e bordas
Bordas arredondadas (raio de fronteira)
Um guia para criar bordas arredondadas com CSS3 raio de borda propriedade.
Bordas arredondadas com imagem (imagens de borda)
Como usar imagens em bordas com border-image propriedade.
Bordas CSS3, fundos e caixas
Explicação detalhada com exemplos de novas propriedades CSS3 como: clipe de fundo, origem de fundo, conexão de fundo, Sombra da caixa, box-decoration-break, raio de borda e border-image.
CSS3: texto
Efeito de tipografia
Crie um efeito simples de tipografia com CSS3.
Seis efeitos de texto usando sombra de texto
Efeitos de texto incluem: vintage / retro, neon, inset, anaglyphic, fogo e jogo de tabuleiro.
Tipografia bonita
Como fazer uma marcação básica e transformá-la em um atraente e belo design tipográfico através do CSS3 puro.
Rotação de Texto
Usa um sprite de imagem e uma pitada de CSS para colocar as coisas no lugar certo.
Texto do esboço
Como adicionar um esboço ou traçado ao seu texto usando o CSS3 traço de texto propriedade.
Efeito de mascaramento de texto
Efeito de mascaramento de texto interativo usando o text-shadow Propriedade CSS.
Link cutucando (animação) com CSS3
Ditch Javascript e crie efeito de deslocamento totalmente com CSS3.
Estilo de Seleção de CSS
Alterar o estilo de seleção de texto com CSS3.
CSS3: Menu
Conteúdo de várias colunas
Usando CSS3 para criar um conjunto de colunas em seu site sem precisar atribuir camadas individuais e (ou) parágrafos para cada coluna.
Tooltips sensuais com apenas CSS
Como usar o padrão CSS em evolução pode aprimorar algumas adoráveis dicas de ferramentas de vários navegadores.
Mais dicas de ferramentas:
- Sugestão de CSS3 pura
- Tooltips com CSS3.
Menu suspenso
Como criar um menu suspenso de vários níveis semelhante ao Apple.com usando raio de borda, Sombra da caixa, e text-shadow.
Área com guias somente CSS3
Clique em uma aba, esconda todos os painéis, mostre o que corresponde à aba que acabou de ser clicada - tudo com CSS.
Fitas 3D com CSS3
Crie belas fitas 3D com apenas CSS3.
CSS3: sombra projetada
Sombra na imagem
Demonstrar várias técnicas e algumas das possíveis aparências para eliminar sombras sem usar imagens.
Abas de brilho com sombra de caixa
Como criar abas intuitivas e bonitas em CSS3 sem imagem.
CSS3: botões
Tutorial: botões bonitos
Como criar belos botões CSS3 compatíveis com cross-browser que se degradam graciosamente.
Balões de fala
Várias formas de efeito de bolha de fala criadas com CSS 2.1 e aprimoradas com CSS3.
Botões semelhantes ao Github
Coleção de botões que mostram o que é possível usando o CSS3 ao mesmo tempo em que mantém a marcação mais simples possível.
Girando, desbotando ícones com CSS3 e MooTools
Como usar o CSS3 e o MooTools para criar elementos rotativos dinâmicos.
Sobreposição de imagem
Aplicação prática da propriedade de imagem de borda CSS3.
Mais
- CSS3 + Mootools. Um exemplo de experimentação em mootools. Isso adiciona propriedades CSS3 ao trabalho de quadro principal do MooTools.
- Logotipo explodindo com CSS3 e MooTools ou jQuery. Capture a imagem estática e torne-a um efeito animado e explodido no mouse.
- O poder do HTML 5 e CSS 3. HTML 5 e CSS 3 estão rapidamente ganhando popularidade, Perecível Press está aqui para explicar como e porquê.
- Raios Giratórios com Animações CSS3 e Exemplo de JavaScript. Efeito de raio simples e sutil na parte de trás de uma imagem.
- Galeria de fotos Polaroid CSS3. Como construir uma pilha legal de fotos Polaroid com estilo CSS puro.
- HTML 5 e CSS 3: as técnicas que você estará usando em breve. Um passo a passo na criação de um blog a partir do zero com HTML5 e CSS3.
Cheatsheets e referências
CSS3 Cheat Sheet (PDF)
Cheatsheet imprimível com lista completa de todas as propriedades, tipos de seletores e permite valores na especificação CSS3 atual do W3C.
Suporte a CSS no Opera 9.5
Lista completa dos seletores CSS suportados no Opera 0.5.
Fontes disponíveis para incorporação de fontes
Lista abrangente de fontes atualmente licenciadas para @Tipo de letra incorporação.
CSS 3 Seletores - Explained
Um guia e referência aos seletores CSS3 e seus padrões.
Gerador de regras CSS3 entre navegadores
Regras CSS3 que você pode copiar e colar em sua própria folha de estilo.
CSS3 Click Chart
Obtenha estilos CSS3 como dimensionamento de caixa, raio de borda, sombra de texto e mais em um clique.
CSS Content & Browser Compatibility
Lista completa de tabelas seletoras de CSS e CSS3 com declaração para verificação de compatibilidade de navegador.
