Sem dúvida um dos mais brilhantes tendências 2012 está o desenvolvimento em CCS3, HTML5. Hoje oferecemos uma visão geral ampla e muito útil de exemplos " 20+: lições criativas e úteis sobre CSS3″ oferecido em SpeckyBoy. Todos os exemplos são feitos em limpar sem JavaScript, as lições apresentadas contêm demonstrações e arquivos prontos CSS3 para download.

Temos certeza que essas técnicas serão úteis para desenvolvedores web!

aulas de css3 :

1. Galerias de fotos CSS3, controles deslizantes, efeitos com imagens

1.1.Slider em CSS3

Não acredito, mas esse slider com efeitos diversos é feito exclusivamente em CSS3, muito impressionante.

1.2. Plano de fundo para um site em tela cheia com efeito deslizante usando CSS3

Há muito tempo que os web designers experimentam diferentes planos de fundo para o site, mas até agora muito pouco poderia ser feito com CSS puro, era necessário usar JS. Agora o CSS3 lhe dá a oportunidade de fazer o plano de fundo do seu site como desejar - você pode ter um plano de fundo com uma fotografia grande e de alta qualidade, pode alterar vários planos de fundo com efeitos diferentes e com a escalabilidade do plano de fundo dependendo de os parâmetros da tela. Em geral, uma oportunidade incrível para sites criativos.

1.3. Caixa de luz em CSS3

Com este tutorial você aprenderá como criar um Lightbox com diversos efeitos usando CSS puro.

1.4. Propriedades de imagem em CSS3

Este tutorial demonstra novos recursos em CSS3 para propriedades de imagem, como cantos arredondados, sombras e outros efeitos.

1.5. Banner animado usando CSS3

1.6. Painel de carregamento em CSS3

1.7. Fita 3D com CSS3

Veja a demonstração ou baixe os arquivos de código CSS3 →

2. Menus, navegação e botões CSS3

2.1. Menu Apple.com em CSS3

Tutorial para criar o famoso menu Apple.com em CSS3.

2.2. Menu horizontal animado em CSS3

Um tutorial simples que mostra como fazer um menu animado em CSS3 com diversos efeitos.

2.3. Menu vertical animado com CSS3

2.4. Botões animados com CSS3

Ótimo tutorial com 7 exemplos de botões criativos animados.

2.5. Menu criativo animado com imagens usando CSS3

Nesta lição, os 10 exemplos apresentados são simplesmente reveladores. Esses menus criativos complexos costumavam ser criados exclusivamente usando JS. Impressionante!

2.6. Efeito de navegação circular com CSS3

Um efeito incomum ao passar o mouse sobre um item de navegação selecionado na forma de um círculo com uma imagem. Tome nota!

2.7. Menu suspenso em CSS3

Tutorial para implementar um menu suspenso simples com subníveis em CSS3.

2.8. Navegação CSS3 com transições animadas

3. Vários efeitos em CSS3

3.1. Dica animada em CSS3 sem jQuery

Graças ao desenvolvimento das tecnologias web e dos navegadores modernos, podemos criar muitos efeitos sem usar Javascript. Isso tornou a vida muito mais fácil para os desenvolvedores web. Porque agora podemos criar efeitos usando CSS puro sem usar Javascript. Portanto, neste artigo quero falar se é possível criar banners usando CSS puro, o que isso exige, bem como os prós e contras dessa abordagem.

CSS3 oferece uma ampla gama de possibilidades, você só precisa usá-las corretamente. Como exemplo, gostaria de fornecer links para meus trabalhos anteriores “Personagens em Pure CSS”:

Primeiro, quero dar exemplos dos meus banners CSS. Você já deve tê-los visto no site, mas nem sabia o que e como foram criados.

Sobre a demonstração: Cada exemplo (banner) tem uma duração em segundos na parte inferior, além de um botão “Atualizar”, que inicia a exibição do banner desde o início.

Bandeira nº 1 - "Treinamento individual em construção de sites":

Criei este banner por cerca de 2 dias. Por que tanto tempo? Porque demorou um pouco para adaptar o banner (para torná-lo emborrachado) na hora de recalcular as coordenadas. Atualmente, seu tamanho depende da largura do bloco pai (que contém o próprio banner CSS).

Criei este banner em literalmente 2 a 2,5 horas. A única coisa que retardou o processo de criação aqui foi a escolha dos ícones. Porque tiveram que ser selecionados próximos ao tema do banner.

Este banner também se estende dependendo da largura do contêiner de bloco em que está localizado. Demorou aproximadamente 1,5 horas para criar.

Esses banners parecem muito bonitos, mas é realmente tão simples? Vejamos os prós e os contras desse método de criação de banners.

Vantagens e desvantagens dos banners CSS:

Como criar um banner CSS?

1 ideia

Primeiro, você precisa saber exatamente qual animação o banner deve ter (o que, para onde e de onde deve se mover e onde deve aparecer). Você pode pegar uma folha A4 e desenhar onde cada elemento irá se mover e o que deverá ficar no banner.

Afinal, você não pode começar a criar um banner se não souber o que ele deve ser e como funcionar.

2 Estrutura HTML

A próxima etapa é criar a marcação HTML para que os elementos possam ser movidos (e animados para eles). Ou seja, você não pode fazer tudo com uma imagem que vai se mover para a direita ou para a esquerda e então a animação termina.

Normalmente existe um bloco comum no qual todos os outros estão localizados. E neste bloco geral podemos gerenciar os elementos que precisarmos.

3 Animação CSS

A etapa final é criar animações para os blocos, bem como escrever estilos para eles, pois algumas partes da animação ficam ocultas por padrão.

Para criar seu próprio banner, você precisa ter um bom domínio dos conceitos básicos de CSS e HTML.

Aprenda animação CSS básica com este tutorial - .

Conclusão

Todos os navegadores modernos suportam propriedades CSS3, o que significa que os banners serão exibidos corretamente nesses navegadores. Mas com a ajuda de plug-ins JS você pode criar banners CSS para navegadores mais antigos. Ao aprender o básico da animação CSS, você entenderá o processo de criação de banner e em breve estará criando seu primeiro banner CSS puro! 😉

Vamos fazer um banner publicitário usando CSS3. Atualmente suporta apenas animações CSS3 Navegadores Firefox e WebKit. Mas é fácil fazer o banner funcionar em outros navegadores. No entanto, não espere ótimo desempenho em todos os lugares (especialmente no IE 7 e versões anteriores) ao experimentar as técnicas CSS mais recentes.

Observação: Para economizar espaço na página, todos os prefixos dos fabricantes dos navegadores foram omitidos. Veja o código nas fontes.

Marcação HTML

Primeiro, vamos dar uma olhada na estrutura do banner em HTML. Nesta fase precisamos imaginar como funcionará a animação:

Para uma compreensão mais profunda da estrutura de marcação, vamos nos concentrar no barco:

Três animações ocorrem com o barco:

Barco escorregando à esquerda. Aplica-se a uma lista não ordenada (grupo).

Imitação de um barco balançando na água. Aplica-se a um item da lista (barco).

Aparecimento de um ponto de interrogação. Aplica-se a um elemento div (ponto de interrogação).

Se você olhar a página de demonstração, verá que a animação do item da lista (barco) também afeta o elemento div dentro dele (ponto de interrogação). Além disso, a animação "deslizante" para uma lista não ordenada funciona no item da lista (barco e ponto de interrogação).

Portanto, podemos concluir que os elementos filhos recebem as animações dos pais além de suas próprias ações. Agora só falta listar as estruturas pai/filho.

CSS

Antes de começar a analisar a criação da animação, você precisa garantir compatível com versões anteriores com navegadores mais antigos.

Compatibilidade com versões anteriores

Garantiremos a compatibilidade com versões anteriores simplesmente estilizando a marcação como se as animações CSS nem existissem. Se alguém visualizar a página em um navegador antigo, verá uma imagem estática normal, e não um espaço em branco vazio.

Por exemplo: e se você usar CSS? semelhante ao abaixo, haverá problemas:

/* ERRADO! */ @keyframe our-fade-in-animation ( 0% (opacity:0;) 100% (opacity:1;) ) div ( opacity: 0; /* Esta div está oculta por padrão - opa! */ animação: nosso -fade-in-animação 1s 1)

Se o navegador não suportar animações, o elemento div permanecerá invisível para o usuário.

E é assim que garantiremos a compatibilidade retroativa com navegadores mais antigos:

/* TRUE */ @keyframe our-fade-in-animation ( 0% (opacity:0;) 100% (opacity:1;) ) div ( opacity: 1; /* Esta div é visível por padrão */ animação: nosso -fade-in-animação 1s 1)

Agora o elemento div será exibido mesmo se a animação falhar ao iniciar. E em navegadores modernos A div ficará oculta primeiro durante a animação.

Urdidura

Agora sabemos como garantir a compatibilidade com versões anteriores (o que ajudará a evitar problemas ao trabalhar com projetos reais). É hora de criar a base do nosso código CSS.

Você precisa se lembrar de 3 pontos:

Como o banner será usado em sites diferentes, faremos o nosso melhor Seletores CSS especial. Todos começarão com o identificador #ad-1. Desta forma tentaremos evitar sobreposições entre o nosso código e o código do site.

Estamos ignorando intencionalmente o atraso da animação nas instalações. Se você usar um atraso de animação ao definir estilos com visibilidade de elementos padrão, a estrutura do banner será interrompida pelo desaparecimento repentino ou aparecimento de partes da imagem após a conclusão da animação. O atraso da animação é simulado pela duração e configuração dos quadros.

Sempre que possível Usamos uma animação para vários elementos. Dessa forma, economizamos tempo e reduzimos o tamanho do código.

Então vamos criar a base para o nosso banner. Vamos definir o posicionamento relativo para que os elementos internos possam ser posicionados corretamente. Também ocultará qualquer coisa fora do escopo do elemento:

#ad-1 ( largura: 720px; altura: 300px; float: esquerda; margem: 40px auto 0; imagem de fundo: url(../images/ad-1/background.png); posição de fundo: centro; fundo -repeat: sem repetição; overflow: oculto; sombra de caixa relativa: 0px 0px 6px #000;

Em seguida, definimos estilos para os campos de texto e entrada. Chame as animações apropriadas. Você também precisa garantir que o conteúdo tenha o índice z mais alto para as partes móveis, para que não se sobreponham:

#ad-1 #content (largura: 325px; float: direita; margem: 40px; alinhamento de texto: centro; índice z: 4; posição: relativa; estouro: visível; ) #ad-1 h2 (família de fontes: "Alfa Slab One", cor cursiva: #137dd5; line-height: 50px; text-shadow: 0px 0px 4px #fff; atraso */ ) #ad-1 h3 ( font-family: "Boogaloo", cursivo; cor: #202224; tamanho da fonte: 31px; altura da linha: 31px; sombra do texto: 0px 0px 4px #fff; animação: atrasado -fade-animation 10s 1 facilidade de entrada; /* Aparência de h3 com atraso simulado */ ) #ad-1 form ( margin: 30px 0 0 6px; posição: relativa; animação: form-animation 12s 1 facilidade de entrada -out; /* Deslizando o formulário para inserir um endereço de e-mail com atraso simulado */ ) #ad-1 #email ( largura: 158px; altura: 48px; float: esquerda; preenchimento: 0 20px; tamanho da fonte: 16px; família de fontes: "Lucida Grande", sem serifa; sombra de texto: 1px 1px 0px #a2917d;

borda:1px sólido #a2917d;

#ad-1 ul#water( /* Se precisar de outra animação para água, você pode adicioná-la aqui */ ) #ad-1 li#water-back ( width: 1200px; height: 84px; background-image: url( .. /images/ad-1/water-back.png); repetição de fundo: índice z: 1; esquerda absoluta: -20px; * Imitação de ondas espirrando */ ) #ad-1 li#water-front ( largura: 1200px; altura: 158px; imagem de fundo: url(../images/ad-1/water-front .png); background- repetir: índice z: 3; fundo: -70px animação: animação frontal de água 2s facilidade de entrada infinita;

Vamos definir estilos para o barco e seus elementos. Também chamamos as animações correspondentes:

#ad-1 ul#boat (largura: 249px; altura: 215px; índice z: 2; posição: absoluto; inferior: 25px; esquerda: 20px; estouro: visível; animação: animação de barco 3s 1 facilidade ; /* Desliza o grupo quando o anúncio começa */ ) #ad-1 ul#boat li ( width: 249px; height: 215px; background-image: url(../images/ad-1/boat.png); posição: absoluto; fundo: 0px; overflow: animação visível: animação de barco 2s facilidade de entrada infinita */ ) # ad-1 #question-mark (largura: 24px; altura: 50px; imagem de fundo: url(../images/ad-1/question-mark.png); posição: absoluta; direita: 34px; topo: -30px ; animação: animação com fade atrasado 4s 1 facilidade de entrada /* Fade in no ponto de interrogação */ )

Agora vamos criar estilos para as nuvens. Para eles usaremos animação com efeito de movimento sem fim. A ilustração demonstra a essência da ideia:

E aqui está o código CSS:

#ad-1 #clouds (posição: absoluta; topo: 0px; índice z: 0; animação: animação de nuvem 30s linear infinito; /* Role as nuvens para a esquerda, redefina e repita */ ) #ad-1 # cloud-group -1 ( largura: 720px; posição: absoluto; esquerda: 0px; ) #ad-1 #cloud-group-2 ( largura: 720px; posição: absoluta; esquerda: 720px; ) #ad-1 .cloud- 1 (largura: 172px; altura: 121px; url(../images/ad-1/cloud-1.png); posição: topo absoluto: 40px; (largura: 121px; altura: 75px; imagem de fundo: url( ../images/ad-1/cloud-2.png); posição: topo absoluto: -25px; esquerda: 300px; : url(../images/ad-1/cloud-3.png); posição: topo absoluto: -5px esquerda: 530px;

Animações

Lembrete: Deste ponto em diante, nada é realmente animado. Se você olhar nosso banner agora, verá uma imagem estática. É aqui que as animações são criadas e chamadas no código acima.

Agora vamos dar vida à nossa bela imagem estática:

/* A animação de atraso simulada é usada para exibir vários elementos. A simulação de atraso é realizada iniciando o processo com 80% da animação continuando (e não imediatamente). Desta forma você pode simular qualquer atraso: */ @keyframes delay-fade-animation ( 0% (opacity: 0;) 80% (opacity: 0;) 100% (opacity: 1;) ) /* Animação para exibição de um formulário com um endereço de e-mail e um botão. Imitação de atraso também é usada */ @keyframes form-animation ( 0% (opacidade: 0; direita: -400px;) 90% (opacidade: 0; direita: -400px;) 95% (opacidade: 0,5; direita: 20px ;) 100% (opacidade: 1; direita: 0px;) ) /* Esta animação é usada para tirar o barco da tela no início do vídeo: */ @keyframes boat-in-animation ( 0% (esquerda: -200px;) 100% (esquerda: 20px;) ) /* Animação para nuvens. O primeiro grupo de nuvens começa a se mover do centro e o segundo à direita da tela. O primeiro grupo é lentamente removido da tela e o segundo aparece à direita. Assim que o grupo esquerdo estiver completamente oculto, as nuvens retornam rapidamente à sua posição original: */ @keyframes cloud-animation ( 0% (left: 0px;) 99.9999% (left: -720px;) 100% (left: 0px; ) ) / * As três últimas animações são quase iguais - a diferença está no posicionamento dos elementos. Eles simulam o respingo das ondas do mar: */ @keyframes boat-animation ( 0% (bottom: 0px; left: 0px;) 25% (bottom: -2px; left: -2px;) 70% (bottom: 2px; left : - 4px;) 100% (inferior: -1px; esquerda: 0px;) ) @keyframes water-back-animation ( 0% (inferior: 10px; esquerda: -20px;) 25% (inferior: 8px; esquerda: - 22px; ) 70% (inferior: 12px; esquerda: -24px;) 100% (inferior: 9px; esquerda: -20px;) ) @keyframes water-front-animation ( 0% (inferior: -70px; esquerda: -30px ;) 25% (inferior: -68px; esquerda: -32px;) 70% (inferior: -72px; esquerda: -34px;) 100% (inferior: -69px; esquerda: -30px;))

Conclusão

Nesta lição aprendemos vários conceitos-chave:

1. Os elementos herdeiros recebem as animações de seus pais, além de suas próprias animações.
2. Ao criar um banner, você deve se esforçar para usar um identificador exclusivo para evitar a sobreposição de código com um projeto CSS existente.
3. A posição e o estilo dos elementos devem ser escolhidos como se a animação não estivesse disponível para garantir compatibilidade com versões anteriores.
4. Se possível, você deve usar uma animação para vários elementos.

Hoje vamos criar um banner usando animação CSS3.

Atualmente apenas os navegadores Firefox e WebKit suportam animações CSS, mas veremos como podemos fazer esses banners funcionarem em outros navegadores (que chamo de navegadores do século XVIII) também. No entanto, você não deve esperar grande suporte em todos os navegadores (particularmente IE 7 e anteriores) ao experimentar tecnologias CSS modernas.

Então vamos criar banners animados!

Observação: para economizar espaço, todos os prefixos do navegador foram removidos. Cm. arquivos de origem para ver todo o código CSS. Se você não está familiarizado com animações CSS, recomendo fortementeem primeiro lugarleia isto.

Marcação HTML

Primeiro, criaremos a estrutura do banner usando HTML. Neste ponto precisamos pensar em como queremos que nossa animação funcione - como ela afetará os elementos filho e pai na estrutura da nossa marcação (explicarei isso abaixo):