Morton 31 de diciembre de 2010 a las 05.10
   Imprimir artículo
elWebmaster.com

CSS: Máscara con angulación para dar dinamismo a tus imágenes


anglemaskwideEn este artículo veremos como crear una máscara con angulación y aplicarla sobre las imágenes de tu sitio. Para ello, utilizaremos la propiedad transform de CSS. En tan sólo unos pocos pasos, habremos logrado este efecto.

Fuente original del artículo: CSS Globe
Traducción realizada por
elWebmaster.com

Haz clic en este enlace para ver una demostración del efecto >>

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

anglemask

El código, entonces, se vería así:

[HTML]

my bike

[/HTML]

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:

[CSS]
.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;
}
[/CSS]

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 Globe
Traducción realizada por
elWebmaster.com


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (2)

  1. José Bonavista dice:

    Creo que, se debería indicar, en que navegadores se ve correctamente el efecto tal y como está el código de ejemplo, estos son:
    *Firefox
    *Opera
    *Chrome y Safari

    Si vemos la página de ejemplo con Internet Explorer, obtendremos un “out of memory”. A través de la propiedad “filter” para Internet Explorer, se podrá lograr un buen resultado.

    Por lo demás, gran tuto.

    Un saludo

  2. links for 2011-01-11 | Tombola! dice:

    […] CSS: Máscara con angulación para dar dinamismo a tus imágenes – elWebmaster.com (tags: css) […]

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder