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