Olá amigos, hoje venho ensinar como fazer um efeito que pode ficar super interessante se você souber usar.. Trata-se de usar a propriedade box-shadow do CSS para fazer várias bordas em um elemento, se você usar uma boa combinação de cores pode conseguir um efeito incrivelmente bonito e sem o uso de imagens..
Vamos lá..
Primeiro vamos criar o elemento em que vamos trabalhar, no meu caso vou usar uma DIV
Agora vamos ao CSS, vamos chamar o elemento no CSS
Então vamos estilizar..
A única parte que nos importa é essa
Vamos analisar a primeira parte que vem antes da primeira virgula
Nela definimos uma cor para a borda (#243b49) o próximo valor é o quanto essa sombra se moverá para a direita no caso eu defini o valor 0, o outro é para baixo no caso defini 3 e o ultimo é a expansão dessa sombra, no caso defini 0 para que ele se pareça com uma borda...
(Espero que essa parte não tenha ficado muito confusa kk)
Depois da virgula é a mesma coisa, só adicionei um outro atributo que no caso é o inset que faz com que essa sombra fique para dentro do elemento ao invés de ficar do lado de fora. E repetimos isso depois da ultima virgula..
Não ficou muito bonito pois não consegui pensar em uma boa combinação de cores, mas tudo fica a seu critério.
http://jsbin.com/IHuyInE/1
Espero que seja útil (:
Vamos lá..
Primeiro vamos criar o elemento em que vamos trabalhar, no meu caso vou usar uma DIV
- Código:
<div class="teste">Apenas um texto</div>
Agora vamos ao CSS, vamos chamar o elemento no CSS
- Código:
.teste{
}
Então vamos estilizar..
- Código:
.teste{
background: #415c63;
text-align: center;
font: 13px 'Trebuchet MS', Arial, sans-serif;
padding: 4px 0 0 0;
cursor: default;
color: #9db7b8;
height: 20px;
border-bottom: 2px solid #9db7b8;
box-shadow: #243b49 0 3px 0, inset #fff 0 -1px 0, inset #9db7b8 0 3px 0;
}
A única parte que nos importa é essa
- Código:
box-shadow: #243b49 0 3px 0, inset #fff 0 -1px 0, inset #9db7b8 0 3px 0;
Vamos analisar a primeira parte que vem antes da primeira virgula
- Código:
#243b49 0 3px 0
Nela definimos uma cor para a borda (#243b49) o próximo valor é o quanto essa sombra se moverá para a direita no caso eu defini o valor 0, o outro é para baixo no caso defini 3 e o ultimo é a expansão dessa sombra, no caso defini 0 para que ele se pareça com uma borda...
(Espero que essa parte não tenha ficado muito confusa kk)
Depois da virgula é a mesma coisa, só adicionei um outro atributo que no caso é o inset que faz com que essa sombra fique para dentro do elemento ao invés de ficar do lado de fora. E repetimos isso depois da ultima virgula..
Não ficou muito bonito pois não consegui pensar em uma boa combinação de cores, mas tudo fica a seu critério.
http://jsbin.com/IHuyInE/1
Espero que seja útil (: