Saiba como criar um estilo de sombra para embelezar seu flat design.

Olá pessoal, tudo bom?
Neste tutorial iremos trabalhar com os efeitos de sombra em CSS3 de uma forma um pouco diferente. Deixaremos o design do site um pouco mais moderno.
Espero que gostem.
Vamos lá!

FLAT DESIGN

Flat Design é uma tendência recente, que defende interfaces simples e claras, sem muitos efeitos visuais.

Um bom exemplo de flat design é o Windows8. Ele possui uma tela simples, com esquemas de cores bem encaixadas e que permitem uma harmonia sem cansar ao seus olhos.

Simples, é o que retrata essa nova tendência.

flat-design

VAMOS AO EFEITO

Como eu já havia explicado na aula BOX-SHADOW – SAIBA COMO APLICAR EFEITOS DE SOMBRA COM CSS, nós podemos aplicar o efeito de sombra a objetos utilizando as propriedades do CSS3 box-shadow e aplicar a textos utilizando text-shadow.

Portanto, essa aula vai se basear totalmente nessa propriedades. Caso você ainda não viu as aulas abaixo, seria muito interessante que você conhecesse outras formas de trabalhar com essas propriedades e aplicar efeitos diferenciados.

PASSO 1: HTML

Nosso html é bem simples, vai ter apenas um container para que possamos avaliar o efeito e e um box no qual vamos aplicar o efeito.

Como disse anteriormente, iremos utilizar o padrão de Flat design durante todo esse tutorial.

PASSO 2: CSS

Agora vamos aplicar o estilo padrão para nossos elementos:

Por enquanto nós apenas adicionamos simples configurações como: font-size, text-align, width, height entre outros.

Até o momento você deve ter o seguinte efeito.

imagem1-long-shadow

PASSO 3: EFEITO LONG SHADOW NO TEXTO

Agora que vem o interessante!

O efeito de long shadow é criado através de diversas sombras aplicadas ao mesmo objeto. Cada sombra é deslocada 1 pixel verticalmente e horizontalmente até que a mesma assuma o comprimento do efeito que gostaríamos. Neste tutorial iremos aplicar 100 passos para que a sombra possa ultrapassar o quadrado do box e produza um efeito muito bacana.

Agora que o efeito já foi aplicado, vamos ver o resultado.

imagem2-long-shadow

PASSO 4: EFEITO LONG SHADOW NO BOX

Agora que já sabemos como aplicar esse efeito, vamos aplicá-lo também ao box com a propriedade box-shadow.

Dessa vez iremos fazer com que a sombra vá se desfazendo, portanto iremos utilizar o esquema de cores rgba().

Agora nossa efeito deve estar assim:

imagem3-long-shadow

FINALIZANDO

Eu sei que fazer um CSS utilizando essa estrutura de box-shadow e text-shadow gigante é muitooooo chato, não é mesmo? Por isso deixo aqui, de primeira mão, um site que gera todo esse código para vocês. Já imaginou que maravilha! =)

http://sandbox.juan-i.com/longshadows/

Façam seus teste e dêem um visual novo aos seus projetos.

Espero que vocês tenham gostado desse tutorial e caso tenham algum dúvida ou sugestão para novos tutoriais, não deixem de comentar, ok?

Muito obrigado e até a próxima.

TAGS: , , ,

AUTOR: Gabriel Costa
Gabriel Costa

Trabalho com desenvolvimento web a mais de 5 anos e atualmente desenvolvo projetos para órgãos do governo federal na área de interface digital, programação e design. Tenho parceria na empresa AidWeb - Desenvolvimento web e trabalho desenvolvendo websites e protótipos de sistemas acessíveis e responsíveis.

ARTIGOS RELACIONADOS

2

Deixe o seu comentário!

  1. Cardiano Vilanculo disse:

    como fazer os botoes ter efeitos com css3

Autentificado como . Sair desta conta »

<pre lang="aqui vai o tipo de linguagem (js, html, css, php...)">
   Agora você posta seu código a vontade!
</pre> //aqui você fecha o código