Cómo hacer efecto de costura usando CSS3


El efecto de costura está siendo cada vez más popular porque le añade un efecto más personal y quizás hasta un poco más informal al diseño de las páginas web. En esta ocasión, mostraré el código HTML necesario y su correspondiente CSS3 para lograr la siguiente imagen (Cabe destacar que es un cuadrado de 400px x 400px):

Efecto de CosturaHTML

<div class=”efecto-costura”>

</div>

CSS3

.efecto-costura {

padding: 5px 10px;

margin: 10px;

background: #ff0030;

border: 2px dashed #fff;

/* bordes redondeados de 5px */

-moz-border-radius:5px;  /*en firefox */

-webkit-border-radius:5px; /* en chrome y otros navegadores */

border-radius:5px; /* en otros navegadores que soporten CSS3 */

/* la sombra */

-moz-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5); /* en firefox */

-webkit-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5); /* en chrome y otros navegadores */

box-shadow: 0 0 0 4px #ff0030, 2px 1px 6px 4px rgba(10,10,0,.5); /* en otros navegadores que soporten CSS3 */

height:400px;

width:400px;

}

Cuál es el truco?

El añadir la sombra de la siguiente manera:

-moz-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5);

Al colocar el: 0 0 0 4px #ff0030, le da al cuadrado una sombra sólida alrededor del mismo color del cuadrado, que lo hace parecer parte del mismo y el borde de tipo “dash” es lo que logra el efecto costura.

Fuente: DesignZZZ

You may also like...

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

'
Comparte