20 de dezembro de 2014

Efeito costura com CSS


Bom, muitas pessoas gostam desse efeito, mais os usam com imagens. O efeito em CSS é mais recomendado pois irá fazer com que sua pagina carregue mais rápido.


Ele ficará igual a imagem acima. 

Vamos ao código. Insira o código abaixo entre <style> e </style> - CSS.

/**** efeito costura por mundodepaixoes.com.br ***/
.effect-costura {
 padding: 5px 10px;
 color: #fff;/*COR DA FONTE*/
 margin: 10px;
 background: #e14d6f; /*COR DO FUNDO*/
 border: 1px dashed #c9dcc8; /*TAMANHO E COR DO TRAÇADO*/
 /* rounded borders of 5px in firefox */
 -moz-border-radius:0px;  
 /* rounded borders of 5px in chrome and other browsers */
 -webkit-border-radius:0px; 
 /* shadows for different browsers - É A PARTE DE FORA DO TRAÇADO. MUDE APENAS A COR QUE TEM QUE SER IGUAL AO DO FUNDO */
 -moz-box-shadow: 0 0 0 4px #e14d6f;
 -webkit-box-shadow: 0 0 0 4px #e14d6f;
 box-shadow: 0 0 0 4px #e14d6f;
 height:200px;
 width:350px;
 }

Aplique a div no caixa que deseja por o efeito que deve ser entre <body> e </body>, assim:

<div class="effect-costura"> efeito de costura na div dos titulos e afin</div>

Pronto, seu efeito será aplicado.

0 comentários :

Postar um comentário