Se você tem e está procurando ideias para tornar os sites a próxima grande novidade depois de A Song of Fire and Ice (série Game of Thrones para a população que não lê livros) sem rabiscar o cérebro, confira estes 15 CSS3 efeitos que reunimos para você.

De tutoriais a ofertas, oferecemos 15 efeitos incríveis que transformarão sites blá em uau!

Efeito Paralaxe

Você já navegou pelo site ihatetomatoes comemorando os 25 anos do Nintendo Game Boy? Onde você também jogou Tetris?

Ou talvez tenha navegado pelo site da Rimmel impressionado com a forma como os itens aparecem brilhantemente em um fundo colorido de modelos?

O efeito 3D que parece ser a moda do design agora é tecnicamente chamado de Efeito Parallax. Os designers adoram brincar com eles, mas você precisa ser sutil e estratégico, pois pode sair pela culatra e acabar criando uma confusão confusa.

O efeito Parallax ou a rolagem Parallax é o resultado do carregamento do plano de fundo em uma velocidade mais lenta do que o primeiro plano, criando uma aparência mais 3D. Parece muito trabalho? Não para alguém que trabalha com inteligência, obtenha um tema Parallax completamente pronto já no Cyberchimps.

Efeito Ken Burns

O documentarista foi pioneiro no conceito de panorâmica e zoom em uma imagem estática. O designer gráfico usou esse efeito abundantemente e você pode até ter encontrado isso em muitos sites.

O efeito não apenas guia os globos oculares, literalmente, para onde você deseja que o foco esteja, mas também adiciona uma pitada de intensidade a uma imagem. Você se lembra de ter assistido a um filme em que uma fotografia antiga foi exibida na tela e o narrador fala sobre algo na imagem, enquanto o quadro se move lentamente e se aproxima desse assunto?

O efeito Ken Burns tornou-se bastante popular e com razão, pois dá um facelift instantâneo a qualquer site chato.

Menu de Navegação Semicircular

Você não precisa fazer de tudo para mudar a aparência do seu site. Às vezes, apenas acabar com a opção de homens velhos e chatos pode ajudar.

Em vez disso, opte por uma elegante opção de navegação circular ou semicircular que ajuda a mostrar várias opções de menu. Alguns designers incluem isso apenas para botões de compartilhamento de mídia social, mas você ficaria surpreso com sua versatilidade.

Do console de música óbvio e ícones de compartilhamento de mídia social ao menu principal e ícones de perfil, há várias maneiras de aproveitar isso.

Não quer quebrar a cabeça criando esse efeito CSS3 do zero? Obtenha um como brinde da DealFuel.

Mostrar/ocultar painel de login

Painéis deslizantes são comumente usados hoje em dia, mas principalmente para aliviar a carga de muitas guias. Poucos designers experimentam o potencial dessa opção, porque os painéis deslizantes podem ser benéficos de várias maneiras.

Exiba tópicos de conteúdo, crie uma aparência organizada, melhore a estética ou apenas seja diferente dos sites com design convencional. O painel de login Mostrar/Ocultar é obrigatório para todos os sites do WordPress, ele fornece uma visão geral do painel com várias opções de menu após o login. Saiba mais sobre este painel aqui.

Formulário de login do controle deslizante

Outra opção do painel de login que desliza para revelar mais conteúdo é uma ótima jogada quando você deseja que os assinantes insiram um pouco mais de informações do que apenas endereço de e-mail e nome, mas ao mesmo tempo não deseja sobrecarregá-los.

Reduzindo o espaço também, definitivamente verifique isso, pois seria útil quando você estiver criando sites com temas minimalistas.

Fitas 3D e efeitos 3D

Se você ainda se sente intimidado pelo efeito Parallax e tem medo de estragar tudo, comece pequeno. Use fitas 3D, diferentes tonalidades e sombras para criar uma ilusão geral de profundidade em seu site, renderizando assim um efeito 3D.

As fitas 3D em si parecem absolutamente incríveis. Use isso para destacar uma parte do site ou em um documento de certificação oficial que você deseja colocar, isso aumentaria o apelo visual geral da página.

Saiba como criar o efeito usando CSS3 no pvmgarage.

Efeito Coverflow

Predominantemente usado em sites baseados em livros, você definitivamente viu esse efeito em seu Mac ou dispositivo Apple quando navegou pelas fotos. O efeito Coverflow mostra uma série de itens – como capas de livros – onde você pode deslizar para a esquerda ou para a direita para ver a capa, obter alguns detalhes pop-up e selecioná-los.

Isso parece interessante? Gostaria de implementar isso em um projeto? Se sim, então definitivamente navegue por esta peça.

Transições CSS3

Os designers que jogam com inteligência e não com força sabem que não é preciso muito para adicionar mojo ao seu site, uma mudança de tema aqui, algumas sombras e elementos de sombra ali e você pode realmente transformar sua página. Outra maneira de fazer isso é animar o conteúdo da página por meio de transições CSS3.

Do espaçamento das letras à sombra do texto, experimente o que quiser para ver o que se adapta melhor. Além disso, aqui está um ótimo brinde que inclui uma ampla gama de efeitos de transição.

Animação CSS3 com tema de neve

Ainda se recuperando do efeito colateral da temporada de férias? As animações CSS3 com tema de neve não apenas têm um toque festivo, mas também funcionam muito bem para determinados sites, como o de uma marca de sorvete.

É rápido e fácil de usar e pode alterar a aparência do seu site ou página do blog para complementar um tema ou uma temporada.

Animação

As animações podem fazer maravilhas para sites, mesmo que sejam feitas sutilmente. Chama a atenção e também ajuda nas conversões, pois a atenção é direcionada para a chamada à ação.

Ou simplesmente, acrescenta ao valor nominal de uma página, se nada mais. Aqui estão alguns ótimos efeitos especiais de animação que você pode conferir.

Efeito tipográfico

Você provavelmente já viu aquelas postagens de citações do Instagram com a aparência de texto em relevo? É assim que o efeito Letterpress se parece e também está se tornando bastante popular em web design.

Isso tem uma sensação de datilografia inversa, mas exibe uma aparência elegante e lustrosa. Definitivamente recomendado se o seu for uma publicação online ou um blog. Além disso, se você quiser dar um toque profissional sem se tornar um C-suite, isso ajudaria. Aqui está um tutorial sobre como você pode usar o efeito tipografia com CSS3.

Virando o Círculo

Um pouco de informação não apenas nunca fez mal a ninguém, mas também pode ser o USP do site. Um site como aquele que lança fatos aleatórios a cada atualização poderia ser transformado em uma espécie de galeria com fotos com uma pequena alça, que quando clicada abre para mostrar algumas curiosidades divertidas.

Mas mesmo em sites comuns, um círculo giratório é muito importante. Ele comprime as informações, para que você não tenha uma página cheia de texto. E também tem uma sensação 3D legal. Aqui está um tutorial sobre como criar um círculo giratório.

Mega Menu

Você provavelmente já os viu em sites de comércio eletrônico, onde muitas categorias precisam ser colocadas diretamente na página de destino, mas sem criar uma barra de menu lotada.

A opção Mega Menu também é obrigatória para o setor educacional. Você tem um site universitário que mostra todos os principais cursos, informações sobre admissão, resultados dos alunos e muito mais?

O Mega Menu pode ajudar a organizar, criar uma opção de barra de menu mais nítida e elegante e não confundir os leitores para que cliquem na opção errada por causa das opções de menu mais longas e abafadas. Você também pode ganhar muito pegando o Mega Menu responsivo gratuitamente.

Galeria do Acordeão

Existem duas maneiras de manter os leitores engajados em seu site, apresentar conteúdo poderoso e chamar a atenção para esse conteúdo poderoso. Uma página estática pode chamar a atenção do leitor, mas algo interativo como uma Galeria Acordeão chamará a atenção do leitor.

As galerias de acordeão – se você optar por mostrar sua melhor peça de portfólio ou chamar a atenção para seu produto mais vendido – sempre funcionarão. Você tem apenas 6 segundos para chamar a atenção do leitor e mantê-lo na página, use a galeria Accordion para chamar e manter a atenção dele em seu site por muito mais tempo. Aqui está um ótimo plug-in adaptável do Accordion Gallery que você pode obter gratuitamente.

caixa de luz

Qual a importância de uma galeria de grade? Se você é um fotógrafo, um artista ou simplesmente um blogueiro, isso pode significar seu próximo grande trabalho.

Uma galeria de grade coloca todas as suas melhores peças em exibição! Desde a foto deslumbrante do pôr do sol no topo de uma colina até aquele intenso retrato de rua, impressione-os, divulgue ou simplesmente os seduza para ganhar um contrato, uma galeria de grade pode ser o seu melhor currículo.

Como designer, isso é algo que você não deve considerar apenas para o trabalho do seu cliente, mas também para o seu próprio site. Faça com que seu trabalho defenda você e ateste sua proeza criativa, uma galeria em grade vale seu peso em ouro.

Mas você ganha de graça neste negócio, então pegue agora!

Qual destes você recomendaria a um amigo?