La idea es simple: Tenemos tres elementos anidados. El nivel superior actúa como un contenedor de un tamaño determinado que encaja en el diseño, por ejemplo, el header del sitio. El segundo elemento será rotado X grados en el sentido de las agujas del reloj, y el tercer elemento será rotado -X grados, en el sentido contrario a las agujas del reloj, por lo que quedará en forma horizontal. Es importante resaltar que este efecto sólo será visible en navegadores que actualmente soporten la rotación por CSS
El código, entonces, se vería así:
Lo importante es que le des valor hidden a la propiedad overflow en los tres elementos (aunque no es indispensable en el caso del tercero de ellos) . El primer elemento no está rotado y se mantendrá con su mismo ancho y altura. El segundo elemento está rotado en el sentido del reloj y el tercer elemento a la inversa, rotándose la misma cantidad de grados que el segundo elemento. La ubicación de los elementos es probable que deba ser ajustada utilizando los márgenes de los elementos. Aquí puedes aplicarle el estilo que desees. Este es el CSS restante:
.box{
width:700px;
height:300px;
background:#ccc;
overflow:hidden;
margin:1em 0;
}
.box .inner{
-moz-transform:rotate(20deg);
-webkit-transform:rotate(20deg);
-o-transform:rotate(20deg);
width:300px;
height:450px;
margin-top:-70px;
margin-right:100px;
overflow:hidden;
background:#aaa;
float:right;
border:3px solid #fff;
}
.box .inner .content{
-moz-transform:rotate(-20deg);
-webkit-transform:rotate(-20deg);
-o-transform:rotate(-20deg);
width:500px;
height:320px;
margin-top:60px;
margin-left:-80px;
overflow:hidden;
background:#f1f1f1;
}
Y eso fue todo. ¡Esperamos que te sea de ayuda!
Haz clic en este enlace para ver una demostración del efecto >>
Fuente original del artículo: CSS Globe0 comentarios to "CSS: Máscara con angulación para dar dinamismo a tus imágenes"
Publicar un comentario