Várias bordas em elemento (box-shadow)
2 participantes
Página 1 de 1
Várias bordas em elemento (box-shadow)
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 (:
Re: Várias bordas em elemento (box-shadow)
Olá!
Agora foi que eu vi este tópico... Um efeito bem interessante amigo, obrigado por compartilhar conosco!
Js
Agora foi que eu vi este tópico... Um efeito bem interessante amigo, obrigado por compartilhar conosco!
Js
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos
|
|