JMiur [E]

La idea que muestran en CSS Tricks es interesante pero, sólo funcionará en Chrome o Safari así que poco nos puede interesar al 95% de los los usuarios que no usamos esos navegadores; sin embargo, basándose en eso, podríamos intentar algo menos espectacular pero que funcione más o menos bien en todos.

Nos olvidamos de algunas cosas y vamos a crear un header "torcido" que se mueva un poco cuando ponemos el cursor encima.

El HTML es simple, en un rectángulo, agregamos dos títulos:
<div id="demoBG">
  <h1><span>header</span></h1>
  <h2><span>dando vueltas y vueltas</span></h2>
</div>
Y ahora, el CSS:
<style>
#demoBG { /* el rectángulo */
  margin: 20px auto;
  width: 600px;
}
#demoBG h1, #demoBG h2 { /* los títulos */
  border-bottom: 10px solid rgba(0, 0, 0, 0.1);
  border-top: 10px solid rgba(0, 0, 0, 0.1);
  position: relative;
}
#demoBG h1 span, #demoBG h2 span { /* los textos */
  display: block;
  position: relative;
}

#demoBG h1 { /* el título superior */
  background: #FFF;
  margin: 0;
  position: relative;
  text-align: center;
  z-index: 200;
  /* lo rotamos en los diferentes navegadores */
  -moz-transform: rotate(-4deg);
  -webkit-transform: rotate(-4deg);
  -o-transform: rotate(-4deg);
  filter:  progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.9975640502598242, M12=0.0697564737441253, M21=-0.0697564737441253, M22=0.9975640502598242);
}
#demoBG h1 span { /* el texto en si mismo */
  color: CornflowerBlue;
  font-family: Garamond;
  font-size: 100px;
  line-height: 100px;
  text-transform: uppercase;
}

#demoBG h2 { /* el título inferior */
  background: DarkRed;
  margin: 0;
  z-index: 100;
  /* lo rotamos en los diferentes navegadores */
  -moz-transform: rotate(2deg);
  -webkit-transform: rotate(2deg);
  -o-transform: rotate(2deg);
  filter:  progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.9993908270190958, M12=-0.03489949670250097, M21=0.03489949670250097, M22=0.9993908270190958); 
}
#demoBG h2 span { /* el texto en si mismo */
  color: Tomato;
  font-family: Comic Sans MS;
  font-size: 50px;
  line-height: 90px;
  text-align: center;
}

#demoBG:hover > h1 { /* efecto hover sobre el título superior */
  -moz-transform: rotate(4deg);
  filter:  progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.9975640502598242, M12=-0.0697564737441253, M21=0.0697564737441253, M22=0.9975640502598242); 
}
#demoBG:hover > h2 { /* efecto hover sobre el título inferior */
  -moz-transform: rotate(-2deg);
  filter:  progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.9993908270190958, M12=0.03489949670250097, M21=-0.03489949670250097, M22=0.9993908270190958); 
}
</style>

header

dando vueltas y vueltas

22 comentarios:

Graciela  

Guau bueníchimo! hago uso de la che :P

Genial, ahora lo aplico, no en el header, sino en otro lado (sigo con la idea de no develar datos ;) )

Responder
Nadie  

Gracias, miraré en el escaparate, sino creo que trasteando un poquito podré hacer lo que quiero. Me encanta este efecto. Jajajaj

Responder
Raúl  

Llevo desde que empeze con una duda,¿Que es el CSS y donde se coloca?
creo que nunca lo e ulilizado :S

Responder
La hormiguita  

Me encanta pero que código!!!!!!:( Hoy no... renuncio!!!! pero otro día más descansada pruebo.:O
Ni pienso preguntarle nada a Graciela, ya me da pánico donde lo piensa usar.:X
Usted en los códigos nada como pececito... que lindo!!!:D

Responder
Graciela  

@La hormiguita Ña Hormi, una tiene secretos :)

Responder
JMiur  

Graciela: Adelante. Sus secretos son nuestra perdición :-)

Raúl: Eso no es algo que podría responderse en un comentario. Fíjate acá y acá para empezar.

La hormiguita: Mucho blablabla pero es sencillo, lo hace engorroso el tener que usar propeidades diferentes para cada navegador.

Responder
Karla  

Hola JMiur

Busco un hack para lograr el sombreado grabado (inset) en cajas en IE :P

Hay, sabes?

:) Gracias...regreso!

Responder
JMiur  

Lo desconozco. Tal vez haya alguna clase de filtro pero, selen ser bastante complejos.

Responder
Karla  

Bueno, lo dejo así, si vez algo me dices...

Gracias maestro ;)

Responder
Graciela  

Jorge, si uno quisiera aplicar el efecto sobre imágenes, es posible eso?

Responder
JMiur  

Si. Funcionaría igual aunque para IE es probable que habría que poner alguna propiedad extra como display:block o position:relative.

Funciona sobre cualquier etiqueta.

Responder
Graciela  

Lo hice, sucede que la imágen rota a revés: como si leyeras 'redaeh'...también me di cuenta que debo tener en cuenta el tamaño de la misma ohhh sorpresa!

Responder
JMiur  

Si rota al revés, cambiá el valor; si es positivo, ponelo negativo o visceversa.

Claro, al rotar, ocupa más espacio; depende de dónde que coloque o qué se quiere mostrar, hay que dejar algún espacio extra.

Responder
Graciela  

Lo hice, decía -4 puse +4 sigue igual.

Responder
JMiur  

No coloques el signo +:

-moz-transform: rotate(-4deg);
o
-moz-transform: rotate(4deg);

Responder
Graciela  

Se vé igual, lo dejo para cuando tenga tiempo e investigar :D

Responder
JMiur  

Decime donde se puede ver y se soluciona fácil, debe ser un pequeño error.

Responder
Graciela  

Jmiur ya te envié la tarjetita de invitación, en la entrada http://anotacionespalomas.blogspot.com/2010/12/entrada-para-probar-border2.html

Gracias, me parece que hay varios errores :o

Responder
JMiur  

Está bastante bien. Hay un error pero es fácil de arregla.

Lo que colocas es una imagen en un DIV con la clase border2; ese es el que está definido como "rotado". Ahora bien, el efecto hover, no lo hacés sobre el DIV sino sobre la imagen:

.border2 img:hover {
-moz-transform: rotate(3deg);
background: #FFFFFF;
}

Y ese es el error ya que lo que debe hacerse, es aplicarlo sobre el DIV y de esa manera, girará para el otro lado:

.border2:hover {
-moz-transform: rotate(3deg);
background: #FFFFFF;
}

Responder
Graciela  

Okey :P muchas gracias Jorge, ahora voy a corregir! gracias mil!!!

Responder
JMiur  

No es nada, pruebe y vemos :D

Responder
LuzdeLuna  

Gracias JMiur!! me quedó rebonito!!!! :D

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR