Superponiendo y rotando casi cualquier cosa

Esta entrada no es una entrada, tampoco una prueba, es el resultado de jugar con propiedades y de quedarse embobado utilizando CSS.

El culpable autor de este juego es JMiur porque lo que vemos aquí es lo más parecido a un cóctel de sus últimas entradas sobre Transformaciones y Superponer cosas. Un cóctel que contiene otros ingredientes como Rotaciones  y Gradient.

No sé si voy a saber explicarlo pero lo voy a intentar porque es una de esas cosas que van surgiendo sobre la marcha por eso recomiendo leer los enlaces a las explicaciones de JMiur  porque es muy interesante aprovechar esas propiedades a nuestro alcance y comprobar que podemos mostrar las imágenes de forma divertida.

Menaje Hogar

Lo primero que añadí fue el bloque contenedor de las imágenes, este ejemplo lo hice en una entrada, si deseamos añadirlo en un gadget de HTML podemos copiar el código desde la pestaña Edición de HTML y luego pegarlo en el gadget.

El bloque lo añadimos de la siguiente forma:

<div style="background: #CCC1A6 url (URL DE NUESTRA IMAGEN DE FONDO) no-repeat left top; height: 270px; padding: 60px 33px; text-align: center; width: 530px;border: 1px solid #867B5C;">

CONTENIDO DEL BLOQUE

</div>

CONTENIDO DEL BLOQUE

Al contenedor le añadimos también el valor relative para ubicar el contenido en cualquier sitio.

<div style="background: #CCC1A6 url(URL DE NUESTRA IMAGEN DE FONDO) no-repeat left top; height: 270px; padding: 60px 33px; text-align: center; width: 530px;border: 2px solid #867B5C;">

<div style="position: relative;">

CONTENIDO DEL BLOQUE

</div></div>

El contenido lo añadimos de la siguiente forma:

Imagen grande

<div style="left: 30px; position: absolute; top: -50px; z-index: 1;">

<div class="image-rotate ">

<img src="URL IMAGEN GRANDE" />

</div></div>

Bloque de texto

<div style="top: -65px; position: absolute; right:5px;z-index:3;">

<div id="superponer">

<h5><span>M</span>enaje <span>H</span>ogar </h5>

</div></div>

Menaje Hogar

Imagen pequeña

<div style="bottom: -230px; position: absolute; right: 30px; z-index: 2;">

<div class="image-rotate2 ">

<img src="URL DE NUESTRA IMAGEN PEQUEÑA" />

</div></div>

Menaje Hogar

Las imágenes podemos subirlas a Blogger y utilizar el tamaño s320 para la grande y s200 para la pequeña.

Utilizamos la propiedad z-index para posicionar la imagen, la numeración nos indica que lugar adopta la imagen, a menor numeración la imagen se posiciona la primera y conforme aumentamos la imagen se va posicionando sobre las anteriores.

Como resultado obtendríamos un código así:

<div style="background: #CCC1A6 url (URL DE NUESTRA IMAGEN DE FONDO) no-repeat left top; height: 270px; padding: 60px 33px; text-align: center; width: 530px;border: 2px solid #867B5C;">

<div style="position: relative;">

<div style="left: 30px; position: absolute; top: -50px; z-index: 1;">

<div class="image-rotate ">

<img src="URL IMAGEN GRANDE" />

</div></div>

<div style="top: -65px; position: absolute; right:5px;z-index:3;">

<div id="superponer">

<h5><span>M</span>enaje <span>H</span>ogar </h5>

</div></div>

<div style="bottom: -230px; position: absolute; right: 30px; z-index: 2;">

<div class="image-rotate2 ">

<img src="URL  IMAGEN PEQUEÑA" />

</div></div>

</div></div>

Falta algo muy importante, son los estilos que añadiremos justo después del bloque, en el interior de la entrada si es un ejemplo que mostraremos una vez, lo hacemos así para no recargar la plantilla de código que no usamos normalmente.

<style>
.image-rotate { /* imagen grande */
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

.image-rotate2 { /* imagen pequeña*/
-webkit-transform: rotate(15deg);
-moz-transform: rotate(15deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

#superponer { /* bloque de texto*/
position: relative;
text-align: center;
border: 2px solid #CCC1A7;
padding: 42px 9px 5px 8px;
width: 230px; 
height:100px;
opacity: .8;

background: -moz-linear-gradient(left, #C1B39A, #473F1C); /* gradient del bloque*/
background: -webkit-gradient(linear, left top, right top, from(#C1B39A), to(#473F1C));
background: -o-linear-gradient(left, #C1B39A, #473F1C);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#C1B39A', endColorstr='#473F1C');

-moz-box-shadow:inset 0px 0px 9px #000000; /* sombra del bloque*/
-webkit-box-shadow:inset 0px 0px 9px #000000;
box-shadow:inset 0px 0px 9px #000000;

-moz-transform: skew(-10deg); /* girar el bloque */
-o-transform: skew(-10deg);
-webkit-transform: skew(-10deg);

border-radius:13px; /* redondear esquinas del bloque */
-moz-border-radius:13px;
-webkit-border-radius:13px;
}

#superponer h5 { /* texto*/
  color:#CCC1A7;
  font-family: Georgia;
  text-shadow:1px 1px 1px #2D2500;
  font-size: 40px;
  letter-spacing: 2px;
  margin: 0;
  padding: 0;
}

#superponer h5 span { /* letra resaltada */
  color:#2D2500;
  padding:  5px;
  font-family: Times New Roman;
  font-size: 100px;
  font-style: italic;
  text-shadow: 3px 3px 1px #8F8366;
}
</style>