CSS

Efeito Costura com Css

Publicado por antlou em 11/06/2017

Este efeito pode ser bem útil para aplicar num div layout.

Resultado:

efeito de costura numa div

Este efeito poderá trabalhar em qualquer browser actual como por exemplo Internet Explorer, Firefox, Safari, Opera...

efeito_costura.html



<html>
<head>
    <title>Efeito costura</title>
    
    <style type="text/css">
        .effect-costura {
            padding: 5px 15px;
                /*COR DA FONTE*/
            color: #fff;    
            margin: 10px;
                /*COR DO FUNDO*/
            background: gray;
                /*TAMANHO E COR DO TRAÇADO*/
            border: 2px dashed #c9dcc8;     
                /* BORDAS ARREDONDADAS de 5px */
            -moz-border-radius:0px;
            -webkit-border-radius:0px; 
                /* SOMBREADO */
            -moz-box-shadow: 0 0 0 4px gray;
            -webkit-box-shadow: 0 0 0 4px gray;
            box-shadow: 0 0 0 4px gray;
            height:20px;
            width:315px;
            }
    </style>
</head>
<body>
     <div class="effect-costura"> 
    efeito de costura numa div com efeito de costura</div>
    </div>
</body>
</html>

voltar para o topo ↑

Download Código

Espero ter sido útil. Deixe avaliação ao script.

1 votos - 5 pontos - 26 downloads
Média : 5,000

Infoscript - Desenvolvimento de websites, e-commerce e programação

Infoscript tem soluções para desenvolvimento web e programação para aproximar os seus clientes às necessidades atuais do mercado.
O design de produto, a criação de websites e lojas online entre outros, são os principais serviços que temos para lhe oferecer.
Contate-nos através do endereço geral@infoscript.pt
Nós teremos uma solução para si à medida.