10 Técnicas criativas usando CSS3 Box Shadow

Temos visto um tremendo número de avanços no desenvolvimento da Web CSS3 nos últimos anos. Websites populares em toda a Internet começaram a incorporar muitos estilos exclusivos, como cantos arredondados e consultas de mídia com resposta móvel. Mas, ainda mais importante, isso abriu as portas para que as interfaces criativas fossem prototipadas em questão de minutos.

Neste artigo, quero compartilhar 10 trechos de código relacionados a designs brilhantes de sombra de caixa CSS3. Vou explicar como o código funciona e como você pode implementar cada sombra de caixa em seu próprio site.

Esses estilos são atribuídos a grande influência de design de outros sites populares. Este é um ótimo exemplo de como os desenvolvedores da Web atuais estão criando tendências impactantes para o futuro do design da Web..

1. Barra de ferramentas superior fixa

O serviço de mídia social romeno Trilulilu usa uma barra de ferramentas flutuante em todo o site. Isso pode ser criado rapidamente usando um posição: fixa; propriedade em qualquer elemento da barra superior. Mas essa sombra de caixa adicional leva o efeito a um novo nível.

#banner position: fixed; altura: 60px; largura: 100%; top: 0; esquerda: 0; border-top: 5px solid # a1cb2f; fundo: #fff; -moz-box-shadow: 0 2px 3px 0px rgba (0, 0, 0, 0,16); -webkit-box-shadow: 0 2px 3px 0px rgba (0, 0, 0, 0,16); box-shadow: 0 2px 3px 0px rgba (0, 0, 0, 0,16); índice z: 999999;  #banner h1 line-height: 60px;

Você notará que a propriedade box-shadow está realmente configurada com uma combinação de valores bastante simples. A sombra cairá abaixo da caixa e borrará em 3px de cada lado.

Nós podemos usar o rgba () método para aplicar uma leve opacidade na sombra, para que o elemento não pareça muito escuro. É uma adição sutil que certamente irá capturar a atenção do seu visitante.

Demonstração

2. Drop-down de sub-navegação

Aqui está outro método de sombra de caixa criativa aplicado a um submenu suspenso escalar. Um efeito semelhante pode ser visto no Empreendedor enquanto você passa o mouse sobre cada um dos principais links de navegação principais. Isto é definitivamente um pouco mais complicado de configurar, mas vale a pena a paciência.

#bar display: block; altura: 45px; fundo: # 22385a; top de preenchimento: 5px; margem inferior: 150px; posição: relativa;  #bar ul margin: 0px 15px; família-fonte: Candara, Calibri, "Segoe UI", Segoe, Arial, sans-serif;  #bar ul li fundo: # 22385a; display: bloco; tamanho da fonte: 1,2em; posição: relativa; flutuar: esquerda;  #bar ul li a display: bloco; cor: # fffff7; altura da linha: 45 px; intensidade da fonte: Negrito; preenchimento: 0px 10px; text-decoration: nenhum; índice z: 9999;  #bar ul li a: hover, #bar ul li a.selecionado color: # 365977; fundo: #fff; border-top-left-radius: 3px; border-top-right-radius: 3px; -webkit-border-top-left-radius: 3px; -webkit-border-top-right-radius: 3px; -moz-border-radius-topleft: 3px; -moz-border-radius-topright: 3px;  #bar ul .subnav display: bloco; esquerda: 14px; top: 48px; z-index: -1; largura: 500px; posição: absoluta; altura: 90 px; borda: 1px sólido # edf0f3; limite superior: 0; preenchimento: 10px 0 10px 10px; estouro: oculto; -moz-border-radius-bottomleft: 3px; -moz-border-radius-bottomleft: 3px; -webkit-border-bottom-left-radius: 3px; -webkit-border-bottom-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-right-radius: 3px; -moz-box-shadow: 0px 2px 7px rgba (0,0,0,0.25); -webkit-box-shadow: 0px 2px 7px rgba (0,0,0,0.25); box-shadow: 0px 2px 7px rgba (0,0,0,0.25); -ms-filter: "progid: DXImageTransform.Microsoft.Shadow (Força = 3, Direção = 180, Cor =" # 333333 ")"; filter: progid: DXImageTransform.Microsoft.Shadow (Força = 3, Direção = 180, Cor = "# 333333");

Os links de navegação podem ser estilizados para mudar de cor quando selecionados ou no foco do mouse. Também estou adicionando algumas bordas arredondadas nos links e na caixa do menu suspenso. Isso dá uma sensação melhor em vez de arestas duras ao redor. Eu também estou fazendo bom uso do -ms-filter e filtro propriedades que são proprietárias exclusivas do Internet Explorer.

Se você configurar um sistema de navegação completo, poderá alterar a exibição para none e ocultar o menu quando a página for carregada. Em seguida, usando algum jQuery, você pode direcionar o evento .hover () e exibir a barra de subnav com conteúdo atualizado.

Demonstração

3. Botão Sombra Brilhante

Este é possivelmente um dos meus estilos favoritos para criar apenas por causa da dinâmica que aparece na página. Se você não souber, este é o pequeno botão azul encontrado na página inicial do YouTube depois do primeiro login.

blues color: #fff; largura: 190px; altura: 35px; cursor: ponteiro; font-family: Arial, Tahoma, sem serifa; tamanho da fonte: 1.0em; intensidade da fonte: Negrito; -moz-border-radius: 2px; -webkit-border-radius: 2px; raio de fronteira: 2px; largura da borda: 1px; border-color: # 0053a6 # 0053a6 # 000; cor de fundo: # 6891e7; background-image: -moz-linear-gradient (superior, # 4495e7 0, # 0053a6 100%); background-image: -ms-linear-gradiente (em cima, # 4495e7 0, # 0053a6 100%); background-image: -o-linear-gradiente (em cima, # 4495e7 0, # 0053a6 100%); background-image: -webkit-gradient (linear, superior esquerdo, inferior esquerdo, cor-stop (0, # 4495e7), cor-stop (100%, # 0053a6)); background-image: -webkit-linear-gradient (em cima, # 4495e7 0, # 0053a6 100%); background-image: gradiente linear (para baixo, # 4495e7 0, # 0053a6 100%); text-shadow: 1px 1px 0 rgba (0, 0, 0, 0,6); -moz-box-shadow: inserção 0 1px 0 rgba (256, 256, 256, .35); -ms-box-shadow: inserção 0 1px 0 rgba (256, 256, 256, .35); -webkit-box-shadow: inserção 0 1px 0 rgba (256, 256, 256, .35); box-shadow: inserção 0 1px 0 rgba (256, 256, 256, .35); filter: progid: DXImageTransform.Microsoft.Gradient (GradientType = 0, StartColorStr = # 4495e7, EndColorStr = # 0053a6);  .blues: hover border-color: # 002d59 # 002d59 # 000; -moz-box-shadow: inserção 0 1px 0 rgba (256, 256, 256, 0,55), 1px 1px 3px rgba (0, 0, 0, 0,25); -ms-box-shadow: inserção 0 1px 0 rgba (256, 256, 256, 0,55), 1px 1px 3px rgba (0, 0, 0, 0,25); -webkit-box-shadow: inserção 0 1px 0 rgba (256, 256, 256, 0,55), 1px 1px 3px rgba (0, 0, 0, 0,25); box-shadow: inserção 0 1px 0 rgba (256, 256, 256, 0,55), 1px 1px 3px rgba (0, 0, 0, 0,25); filter: progid: DXImageTransform.Microsoft.Gradient (GradientType = 0, StartColorStr = # 3a8cdf, EndColorStr = # 0053a6); background-image: -moz-linear-gradient (superior, # 3a8cdf 0, # 0053a6 100%); background-image: -ms-linear-gradient (superior, # 3a8cdf 0, # 0053a6 100%); background-image: -o-linear-gradiente (superior, # 3a8cdf 0, # 0053a6 100%); background-image: -webkit-gradient (linear, superior esquerdo, inferior esquerdo, cor-stop (0, # 3a8cdf), cor-stop (100%, # 0053a6)); background-image: -webkit-linear-gradient (superior, # 3a8cdf 0, # 0053a6 100%); background-image: linear-gradient (para baixo, # 3a8cdf 0, # 0053a6 100%);  .blues: active border-color: # 000 # 002d59 # 002d59; -moz-box-shadow: inserção 0 1px 3px rgba (0,0,0,0,2), 0 1px 0 #fff; -ms-box-shadow: inserção 0 1px 3px rgba (0,0,0,0,2), 0 1px 0 #fff; -webkit-box-shadow: inserção 0 1px 3px rgba (0,0,0,0,2), 0 1px 0 #fff; box-shadow: inserção 0 1px 3px rgba (0,0,0,0,2), 0 1px 0 #fff; filter: progid: DXImageTransform.Microsoft.Gradient (GradientType = 0, StartColorStr = # 005ab4, EndColorStr = # 175ea6); background-image: -moz-linear-gradient (superior, # 005ab4 0, # 175ea6 100%); background-image: -ms-linear-gradiente (superior, # 005ab4 0, # 175ea6 100%); background-image: -o-linear-gradiente (superior, # 005ab4 0, # 175ea6 100%); background-image: -webkit-gradient (linear, superior esquerdo, inferior esquerdo, cor-stop (0, # 005ab4), cor-stop (100%, # 175ea6)); background-image: -webkit-linear-gradient (superior, # 005ab4 0, # 175ea6 100%); background-image: gradiente linear (para baixo, # 005ab4 0, # 175ea6 100%);

O código do botão inteiro é muito para olhar, mas estamos tentando para suportar o maior número possível de navegadores. Há sombras de texto e sombras de caixa com suporte para o MS Internet Explorer 7+. Também estamos definindo o imagem de fundo Propriedade com gradientes CSS3 em um grande número de prefixos específicos de fornecedores.

Mas se você ama este estilo de design, então o pairar e estados ativos também chamarão sua atenção. Basicamente, estamos atualizando a borda para incluir algumas sombras internas enquanto você empurra para baixo, enquanto atualiza o gradiente de fundo para mostrar um pouco mais escuro.

Como não há imagens no botão, você pode atualizar os valores hexadecimais e transformá-los em praticamente qualquer esquema de cores..

Demonstração

4. Notificações Flyout Menu

Eu não sou um grande usuário do Facebook, mas tenho notado algumas técnicas de interface do usuário a partir de seus redesigns. Este menu desdobrável pode ser comparado às notificações ou solicitações de amigos exibidas na página inicial.

.flyout largura: 310 px; margem superior: 10px; tamanho da fonte: 11px; posição: relativa; font-family: 'Lucida Grande', Tahoma, Verdana, Arial, sem serifa; cor de fundo: branco; preenchimento: 9 px 11 px; fundo: rgba (255, 255, 255, 0,9); borda: 1px sólido # c5c5c5; -webkit-box-shadow: 0 3px 8px rgba (0, 0, 0, 0,25); -moz-box-shadow: 0 3px 8px rgba (0, 0, 0, 0,25); box-shadow: 0 3px 8px rgba (0, 0, 0, 0,25); -webkit-border-radius: 3px; -moz-border-radius: 3px; raio de fronteira: 3px;  .flyout #tip background-image: url ('imagens / tip.png'); repetição de fundo: sem repetição; tamanho de fundo: auto; altura: 11px; posição: absoluta; topo: -11px; esquerda: 25px; largura: 20px;  .flyout h2 text-transform: maiúscula; cor: # 666; tamanho da fonte: 1,2em; preenchimento-fundo: 5px; margem inferior: 12px; border-bottom: 1px solid #dcdbda;  .flyout p padding-bottom: 25px; tamanho da fonte: 1.1em; cor: # 222;

Não há um monte de código novo para mostrar aqui. Estou usando um pequeno .gorjeta classe com um elemento span interno para adicionar o triângulo de dica de ferramenta. É possível criar triângulos CSS3 puros, mas esse método não é fácil, como você pode imaginar. Se você preferir esse método, pode valer a pena hackear algo juntos. Mas as propriedades de rotação CSS3 não são suportadas em todos os lugares; Enquanto isso, as imagens não exigem nenhum método de fallback.

Demonstração

5. Apple Page Wrapper

Há tantas sombras de caixa CSS3 impressionantes que você pode encontrar no site oficial da Apple. Este exemplo abaixo é um contêiner de caixa pequena com algumas extensões de coluna. Ao olhar para o layout da Apple, você notará muitas de suas páginas compostas de inúmeras caixas.

.Applewrap Largura: 100%; display: bloco; altura: 150 px; fundo: branco; borda: 1px sólido; border-color: # e5e5e5 #dbdbdb # d2d2d2; -webkit-border-radius: 4 px; -moz-border-radius: 4 px; raio de fronteira: 4 px; -webkit-box-shadow: rgba (0, 0, 0, 0.3) 0 1 px 3 px; -moz-box-shadow: rgba (0,0,0,0,3) 0 1 px 3 px; box-shadow: rgba (0, 0, 0, 0.3) 0 1 px 3 px;  .applewrap .col float: left; dimensionamento de caixa: caixa de borda; largura: 250px; altura: 150 px; preenchimento: 16px 7px 6px 22px; fonte: 12px / 18px "Lucida Grande", "Lucida Sans Unicode", Helvética, Arial, Verdana, sans-serif; cor: # 343434; borda direita: 1px solid #dadada;

Você poderia montar uma página semelhante dividida por caixas de conteúdo de várias larguras e alturas. Embora eu tenha colocado algumas colunas nesta demo, não é uma técnica de formatação necessária por nenhum meio. A sombra da caixa se encaixa melhor em um fundo branco / cinza. Mas eu acho que a exibição de qualquer cor clara ficaria muito boa.

Demonstração

6. Caixa de Conteúdo da Apple

Este outro estilo de caixa de conteúdo no site da Apple é usado principalmente para projetos de coluna. Estes são principalmente na parte inferior da página mostrando ofertas e outras informações relacionadas. É um estilo de design totalmente diferente com a sombra da caixa exibida de dentro para baixo.

.applebox width: auto; altura: 85 px; dimensionamento de caixa: caixa de borda; plano de fundo: # f5f5f5; preenchimento: 20px 20px 10px; margem: 10px 0 20px; border: 1px solid #ccc; raio de fronteira: 4 px; -webkit-border-radius: 4 px; -moz-border-radius: 4 px; -o-border-radius: 4px; -webkit-box-shadow: inserção 0px 1px 1px rgba (0, 0, 0, .3); -moz-box-shadow: inserção 0px 1px 1px rgba (0, 0, 0, .3); box-shadow: inserção 0px 1px 1px rgba (0, 0, 0, .3);  .applebox .col largura: 140px; flutuar: esquerda; margem: 0 0 30px;

Eu não acho que esse código seja muito difícil de seguir e copiar em outro contêiner div. A única caixa-sombra que estamos aplicando está usando inserir com os códigos de cores rgba alfa-transparentes. Então, embora tenhamos a sombra projetada para preto puro, estamos exibindo apenas uma opacidade de 30%.

Demonstração

7. Links em destaque

Este é provavelmente o meu estilo de sombra de caixa favorita do site atual da Apple. Você deve encontrar um estilo de demonstração ao vivo desta técnica na página do iCloud com uma série de caixas de links flutuantes.

.applefeature altura: 150px; margem: 8px; alinhamento vertical: top; display: bloco inline;  .applefeature a display: block; largura: 168 px; altura: 140px; border: 1px solid #ccc; cor: # 333; text-decoration: nenhum; intensidade da fonte: Negrito; Altura da linha: 1.3em; plano de fundo: # f7f7f7; -webkit-box-shadow: inserção 0 1px 2px rgba (0, 0, 0, .3); -moz-box-shadow: inserção 0 1px 2px rgba (0, 0, 0, .3); box-shadow: inserção 0 1px 2px rgba (0, 0, 0, .3); -webkit-border-radius: 4 px; -moz-border-radius: 4 px; raio de fronteira: 4 px;  .applefeature a: hover background: #fafafa; background: -webkit-gradient (linear, 0% 0%, 0% 100%, de (#fff), para (# f7f7f7)); plano de fundo: -moz-linear-gradiente (100% 100% 90deg, # f7f7f7, #fff); -webkit-box-shadow: inserção 0 1px 2px rgba (0,0,0, 0,3); -moz-box-shadow: inserção 0 1px 2px rgba (0,0,0, 0,3); box-shadow: inserção 0 1px 2px rgba (0,0,0, 0,3); -webkit-border-radius: 4 px; -moz-border-radius: 4 px; raio de fronteira: 4 px;  .applefeature a img display: block; margem: 26px auto 4px;  .applefeature a h4 display: bloco; largura: 160px; tamanho da fonte: 1.3em; font-family: Arial, Tahoma, sem serifa; cor: # 646464; texto-alinhar: centro;

Esses links em destaque são definidos para uma largura fixa e incluem um ícone distinto e exibem texto. O exemplo da Apple usa uma sombra de caixa semelhante à que vimos na caixa de conteúdo anterior. Contudo a caixa inteira agora pode ser ativada como um link que inclui tanto o :flutuar e :ativo estados. Há muita flexibilidade com esta caixa de links e você deve tentar brincar com o código-fonte.

É possível encurtar a altura / largura e criar uma lista muito menor de links. Esses podem ser um conjunto de capítulos ou páginas em um artigo ou você pode limitar um submenu com ícones de link. É honestamente um ótimo conjunto de técnicas CSS3 mais recentes que demonstram quanta potência você tem como web designer.

Demonstração

8. Imagens emolduradas

Eu adicionei um fundo cinza neste exemplo para que você possa ver os estilos de sombra da caixa com mais clareza. Esta caixa é semelhante às fotos de visualização em destaque no wordpress.com, exceto que adicionei um pouco mais de profundidade ao código-fonte..

.wpframe background: #fff; raio de fronteira: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; preenchimento: 8px; -webkit-box-shadow: 1px 2px 1px # d1d1d1; -moz-box-shadow: 1px 2px 1px # d1d1d1; box-shadow: 1px 2px 1px # d1d1d1;

Como as imagens recebem um pequeno preenchimento em ambos os lados, esse quadro aparece como uma borda branca grande. Você sempre pode atualizar a cor do plano de fundo ou até mesmo adicionar uma pequena borda externa para separar a imagem do plano de fundo. Mas esse conjunto bastante simplista de estilos pode ser manobrado em várias técnicas de sombra de caixa. Brinque com o código e veja como você pode melhorar os designs de imagem em seu próprio site.

Demonstração

9. Campos de Entrada Brilhantes

Eu tive essa ideia depois de visitar a página de login do Pinterest algumas vezes. Seus estilos animados realmente exibem alguns exemplos eloquentes de várias sombras de caixa inline, tanto externas quanto inseridas.

.formwrap display: bloco; margem inferior: 15px;  .formwrap label display: inline-block; largura: 80px; tamanho da fonte: 11px; intensidade da fonte: Negrito; cor: # 444; font-family: Arial, Tahoma, sem serifa;  .formwrap .shadowfield position: relative; largura: 250px; tamanho da fonte: 17px; font-family: "Helvetica Neue", Arial, sem serifas; font-weight: normal; plano de fundo: # f7f8f8; cor: # 7c7c7c; Altura da linha: 1,4; preenchimento: 6px 12px; esboço: nenhum; transição: todos os 0s com facilidade de 0s; -webkit-transition: todos os 0s com facilidade de 0s; -moz-transition: todos os 0s 0s; borda: 1px sólido # ad9c9c; border-radius: 6px 6px 6px 6px; box-shadow: 0 1px rgba (34, 25, 25, 0.2) inserção, 0 1px #fff;  .formwrap .shadowfield: focus border-color: # 930; fundo: #fff; cor: # 5d5d5d; box-shadow: inserção 0 1 px rgba (34, 25, 25, 0,2), 0 1 px rgba (255, 255, 255, 0,6), 0 0 7 px rgba (235, 82, 82, 0,5); -moz-box-shadow: inserção 0 1 px rgba (34, 25, 25, 0,2), 0 1 px rgba (255, 255, 255, 0,6), 0 0 7 px rgba (235, 82, 82, 0,5); -webkit-box-shadow: inserção 0 1 px rgba (34, 25, 25, 0,2), 0 1 px rgba (255, 255, 255, 0,6), 0 0 7 px rgba (235, 82, 82, 0,5);

Embora os estilos iniciais sejam muito atraentes, sou atraído efeitos de transição à medida que você se concentra em cada campo de entrada. Você pode tabular entre eles e ver a diferença imediata em tantas propriedades. A sombra da caixa incandescente externa é aplicada junto com uma sombra de inserção atualizada. Também o a cor do texto fica mais clara à medida que você se concentra em uma entrada específica e, em seguida, desaparece à medida que você desfoca.

Mesmo a cópia de um desses efeitos melhoraria muito a experiência do usuário de seus campos de formulário. Certifique-se de não ir longe demais ao ponto em que seus formulários são pouco utilizáveis. No entanto, a maioria dos visitantes apreciará os agradáveis efeitos estéticos que também incentivam a interação e o envolvimento adicional com o seu site..

Demonstração

10. Botões de Sombra Elástica

Esses botões de sombra exclusivos são estilizados com uma transição lenta durante o hover e estados ativos. Você pode encontrar exemplos semelhantes na página inicial da Mozilla com seus “Baixe o Firefox” botão. Alguns dos Sombra da caixa propriedades realmente combinam três sombras diferentes juntas em um comando.

.blu-btn exibição: inline-block; -moz-border-radius: .25em; raio de fronteira: 0,25; -webkit-box-shadow: 0 2px 0 0 rgba (0,0,0,0,1), inserção 0 -2px 0 0 rgba (0,0,0,0,2); -moz-box-shadow: 0 2px 0 0 rgba (0,0,0,0,1), inserção 0 -2px 0 0 rgba (0,0,0,0,2); box-shadow: 0 2px 0 0 rgba (0,0,0,0,1), inserção 0 -2px 0 0 rgba (0,0,0,0,2); cor de fundo: # 276195; background-image: -moz-linear-gradient (# 3c88cc, # 276195); background-image: -ms-linear-gradient (# 3c88cc, # 276195); background-image: -webkit-gradient (linear, superior esquerdo, inferior esquerdo, cor-stop (0%, # 3c88cc), cor-stop (100%, # 276195)); background-image: -webkit-linear-gradient (# 3c88cc, # 276195); background-image: -o-linear-gradient (# 3c88cc, # 276195); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 3c88cc', endColorstr = '# 276195', GradientType = 0); -ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 3c88cc', endColorstr =" # 276195 ", GradientType = 0)"; imagem de fundo: gradiente linear (# 3c88cc, # 276195); fronteira: 0; cursor: ponteiro; cor: #fff; text-decoration: nenhum; texto-alinhar: centro; tamanho da fonte: 16px; preenchimento: 0px 20px; altura: 40 px; altura da linha: 40 px; min-width: 100px; text-shadow: 0 1px 0 rgba (0,0,0,0,35); font-family: Arial, Tahoma, sem serifa; -webkit-transition: todos os .2s lineares; -moz-transition: todos lineares .2s; -o-transição: todos os .2s lineares; -ms-transition: todos os .2s lineares; transição: todos os .2s lineares .blu-btn: hover, .blu-btn: foco -webkit-caixa-sombra: 0 2px 0 0 rgba (0,0,0,0,1), inserção 0 -2px 0 0 rgba (0,0,0,0,3), inserção 0 12px 20px 2px # 3089d8; -moz-box-shadow: 0 2px 0 0 rgba (0,0,0,0,1), inserção 0 -2px 0 0 rgba (0,0,0,0,3), inserção 0 12px 20px 2px # 3089d8; box-shadow: 0 2px 0 0 rgba (0,0,0,0,1), inserção 0 -2px 0 0 rgba (0,0,0,0,3), inserção 0 12px 20px 2px # 3089d8;  .blu-btn: ativo -webkit-box-shadow: inserção 0 2px 0 0 rgba (0,0,0,0,2), inserção 0 12px 20px 6px rgba (0,0,0,0,2), inserção 0 0 2px 2px rgba (0,0,0,0,3); -moz-box-shadow: inserção 0 2px 0 0 rgba (0,0,0,0,2), inserção 0 12px 20px 6px rgba (0,0,0,0,2), inserção 0 0 2px 2px rgba (0,0, 0,0,3); box-shadow: inserção 0 2px 0 0 rgba (0,0,0,0,2), inserção 0 12px 20px 6px rgba (0,0,0,0,2), inserção 0 0 2px 2px rgba (0,0,0,0,3 );  .grn-btn exibição: inline-block; -moz-border-radius: .25em; raio de fronteira: 0,25; -webkit-box-shadow: 0 2px 0 0 rgba (0,0,0,0,1), inserção 0 -2px 0 0 rgba (0,0,0,0,2); -moz-box-shadow: 0 2px 0 0 rgba (0,0,0,0,1), inserção 0 -2px 0 0 rgba (0,0,0,0,2); box-shadow: 0 2px 0 0 rgba (0,0,0,0,1), inserção 0 -2px 0 0 rgba (0,0,0,0,2); cor de fundo: # 659324; background-image: -moz-linear-gradient (# 81bc2e, # 659324); background-image: -ms-linear-gradient (# 81bc2e, # 659324); background-image: -webkit-gradient (linear, superior esquerdo, inferior esquerdo, cor-stop (0%, # 81bc2e), cor-stop (100%, # 659324)); background-image: -webkit-linear-gradient (# 81bc2e, # 659324); background-image: -o-linear-gradient (# 81bc2e, # 659324); filtro: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 81bc2e', endColorstr = '# 659324', GradientType = 0); -ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 81bc2e', endColorstr =" # 659324 ", GradientType = 0)"; imagem de fundo: gradiente linear (# 81bc2e, # 659324); fronteira: 0; cursor: ponteiro; cor: #fff; text-decoration: nenhum; texto-alinhar: centro; tamanho da fonte: 16px; preenchimento: 0px 20px; altura: 40 px; altura da linha: 40 px; min-width: 100px; text-shadow: 0 1px 0 rgba (0,0,0,0,35); font-family: Arial, Tahoma, sem serifa; -webkit-transition: todos os .2s lineares; -moz-transition: todos lineares .2s; -o-transição: todos os .2s lineares; -ms-transition: todos os .2s lineares; transição: todos os .2s lineares;  .grn-btn: hover, .grn-btn: foco -webkit-box-shadow: 0 2px 0 0 rgba (0,0,0,0,1), inserção 0 -2px 0 0 rgba (0,0,0 , 0,3), inserção 0 12px 20px 2px # 85ca26; -moz-box-shadow: 0 2px 0 0 rgba (0,0,0,0,1), inserção 0 -2px 0 0 rgba (0,0,0,0,3), inserção 0 12px 20px 2px # 85ca26; box-shadow: 0 2px 0 0 rgba (0,0,0,0,1), inserção 0 -2px 0 0 rgba (0,0,0,0,3), inserção 0 12px 20px 2px # 85ca26;  .grn-btn: ativo -webkit-box-shadow: inserção 0 2px 0 0 rgba (0,0,0,0.2), inserção 0 12px 20px 6px rgba (0,0,0,0.2), inserção 0 0 2px 2px rgba (0,0,0,0,3); -moz-box-shadow: inserção 0 2px 0 0 rgba (0,0,0,0,2), inserção 0 12px 20px 6px rgba (0,0,0,0,2), inserção 0 0 2px 2px rgba (0,0, 0,0,3); box-shadow: inserção 0 2px 0 0 rgba (0,0,0,0,2), inserção 0 12px 20px 6px rgba (0,0,0,0,2), inserção 0 0 2px 2px rgba (0,0,0,0,3 );

Estou usando transições completas por 200 milissegundos nos estados de foco e botão ativo. O que é tão bom nesses estilos é que você pode aplicá-los a praticamente qualquer elemento clicável. Botões, links de ancoragem, elementos de formulário ou qualquer outra coisa que você julgue apropriada - embora esses estilos devam ser usados esparsamente para não sobrecarregar seu design.

Botões como esses geralmente são salvos da mesma maneira que o Mozilla os usa. Anexar esses estilos em seu blog, onde você tem botões para downloads gratuitos ou algo similar. Os usuários adoram interagir com interfaces exclusivas e isso geralmente se traduz em uma porcentagem muito maior para sua classificação de cliques.

Demonstração

Pensamentos finais

Espero que você possa tirar algumas ótimas lições dessa coleção de técnicas de sombra de caixa. Há muitas áreas diferentes nas quais você pode se concentrar, incluindo formulários, caixas de modems, botões, barras de ferramentas e até mesmo layouts de sites completos..

Sinta-se à vontade para implementar qualquer um desses efeitos de sombra em partes do seu próprio site. Há muitas outras técnicas disponíveis, mas essa coleção é perfeita para iniciantes e desenvolvedores avançados. Além disso, se você tiver alguma sugestão ou dúvida sobre o artigo, pode compartilhar conosco na área de discussão de comentários abaixo..