JMiur [E]

En un foro, alguien comentaba burlonamente: "Esto funcionaba en IE5.5, hace 10 años. Pasó mucho tiempo hasta que se incorporó a navegadores como Safari y recién ahora es posible aplicarlo en Firefox 3.5 ... bueno ... pero, aún le falta implementar la parte de 3D .. tal vez, en algunos años ..."

¿De que hablaba? De una propiedad CSS llamada genéricamente Transform y que permite eso que dice su nombre, transformar el contenido de un elemento.

Tenía razón. Lentamente, los navegadores están incorporando algunos de estos filtros que ya existían aunque les ponen otros nombres y nos obligan a escribir muchas más cosas (¿cómo era ese cuento chino del respeto a los estándares?) ... en fin, no importa, lo importante es que podemos usarlos aunque debamos escribir de más:
Un tweet de DanielUlczyk me lleva a snook.ca antes de leerlo en los feeds y allí nos muestran un ejemplo aplicado a las fechas estilo calendario. No explican nada pero bueno ... sería algo así:

31July2009


<style type="text/css">
.example-date {
background-color: #123;
border: 1px solid #345;
padding: 45px 5px 0;
position:relative;
width: 60px;
}
.example-date .example-day {
font-size: 45px;
left: 5px;
line-height: 45px;
position: absolute;
top: 0;
}
.example-date .example-month {
font-size: 25px;
text-transform: uppercase;
}
.example-date .example-year {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
display: block;
position: absolute;
right: -5px;
top: 15px;
}
</style>

<div class="example-date">
<span class="example-day">31</span>
<span class="example-month">July</span>
<span class="example-year">2009</span>
</div>

Aplicándolo así, directamente, es poco flexible, el resultado dependerá del tipo de fuente y sobre todo, de la longitud de los textos:

28jul2009
28ago2009
1dic2009

Así que lo mejor es usar unidades relativas como em. Este es un un ejemplo basado en la fecha de los posts:

31jul2009
31jul2009
28ago2009
1dic2009


<style type="text/css">
.fechademo {
display: block;
font-family: Verdana,Arial;
font-size: 41px;
font-weight: normal;
height: 1em;
line-height: 18px;
padding: 10px 0 0;
position: relative;
width: 1.8em;
}
.diademo {
color: #789;
display: block;
font-family: Times New Roman;
letter-spacing: -2px;
line-height: .7em;
text-align: center;
width: 1.8em;
}
.mesdemo {
color: #DCDCDC;
display: block;
font-size: 0.4em;
text-align: center;
}
.aniodemo {
color: #D93;
display: block;
font-size: 0.35em;
position: absolute;
right: -0.6em;
top: 16px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
</style>

<div class="fechademo">
<span class="diademo">28</span>
<span class="mesdemo">ago</span>
<span class="aniodemo">2009</span>
</div>

La rotación está definida en grados tanto valores positivos como negativos aunque en IE se define con un código numérico:
-webkit-transform: rotate(VALORdeg);
-moz-transform: rotate(VALORdeg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=VALOR);
donde:
0 es no rotar
1 rota 90 grados
2 rota 180 grados
3 rota 270 grados (-90 grados)


En resumen, hay diferencias y detalles que deberán tenerse en cuenta pero:

Rotar no es el único efecto posible, hay muchos más y vale la pena mirar, tanto para Internet Explorer como para Firefox

33 comentarios:

Quitz  

Muy buen post, JMiur. Pero ¿por qué hay una propiedad para cada navegador? de todas formas el post me ha sido útil, por un momento pensé que estabas usando imágenes para mostrar las fechas :P

Responder
Ariane  

não vejo o efeito :(

Responder
JMiur  

¿Por qué una para cada navegador? Eso habría que preguntárselo a los que desarrollan navegadores :D

Responder
JMiur  

Ariane: Eso es raro. Lo prové en FF3.5, en IE7, en IE8 y en Chrome :( Me extraña mucho :(

Responder
Graciela  

a la repipeta!!!...esto es complicadísimo :)

Responder
Ariane  

JMiur, pelo que entendi, deveria ver o ano na vertical, é isso? Mas olha o que eu vejo.. Eu uso o FF 3.0

Responder
HaCk CrAcK  

Perfecto! esto lo venia buscando hace mucho...gracias por la info.

Responder
Solidaridad  

Bueno Maestro le escribo solo para agradecerle toda su ayuda y enseñanzas. por hoy no tengo pregunta solo darles las gracias.

Responder
[ Michel ]  

hola, muy buen post pero nose si es lo que estaba buscando, quiero saber como puedo poner una imagen o calendario al publicar cada post.... osea que al principio de cada titulo de mis post aparesca la imagen de un calendario mostrando la fecha y el mes...nose si me dejo entender.

ojala puedas ayudarme gracias

Responder
JMiur  

Graciela: No, no es nada difícil; es similar a lo que usamos con las opacidades.

Ariane: Eso debe ser. Aparentemente, es algo que recién se integra en Firefox 3.5, En Chrome ya funcionaba, lo mismo que en Internet Explorer y Safari.

HaCk CrAcK: Me alegro que sirviera :D

Solidaridad: ¿Va mejorando? Me alegro mucho :)

Responder
[ Michel ]  

hola, muy buen post pero nose si es lo que estaba buscando, quiero saber como puedo poner una imagen o calendario al publicar cada post.... osea que al principio de cada titulo de mis post aparesca la imagen de un calendario mostrando la fecha y el mes...nose si me dejo entender.

ojala puedas ayudarme gracias

Responder
egoloco  

JMiur, buen efecto! :O No se si deba poner esta consulta en este post pero... en egoblogo.blogspot.com quisiera mover el post-footer y que se ubique al final del post asi como se muestra en tu blog. Revise mi planilla y encuentro dos <div class='post-footer> alguna sugerencia??

Responder
JMiur  

Michel: Fíjate en esta entrada a ver si te resulta útil.

Egoloco: El que debes mover es el que dice esto:
<div class="post-footer-line post-footer-line-1">
.....
</div>
que es el que contiene al ator y el enlace a los comentarios.

Responder
Anahí  

Sí, yo también tengo FF 3012 y lo tuve que ver con IE8 (que por cierto ya lo pude instalar!) y está muy bueno.
¿JMiur, usté usa FF 35? ¿alguna diferencia remarcable? Porque a mí últimamente el 30 se me rebela muy seguido...
Saludos.

Responder
JMiur  

Mi recomendación es siempre actualizar los navegadores a la versión más nueva y más estable que haya en ese momento y el FF3.5 es la actual. Tiene cambios internos importantes como el motor de JavaScript que es mucho más rápido y cosas como estas de las que hablamos acá, una serie de propeidades que antes no se interpretaban.

Conel IE8 has hecho bien. Se resuleven muchos problemas.

En caso de actualizar Firefox, como se trata de un cambio de versión importante y aprovechando que el que usas tiene problemas, conviene hacer una instalación limpia, desinstalarlo, borrar todo e instalar el nuevo. Aquí hay una serie de consejos a seguir.

Para no perder los datos importantes, guardas previamente los marcadores, etc.

Responder
[ Michel ]  

holaaaa...espeor me puedas ayudar pork nose donde mas buscarrr!!

quiero hacer que al final de cada post....me apresca una valoracion en casillas.... osea k los lecotres marken las casillas k yo eh puesto si esk les gusta o no:

Valoracion: Bueno(0) | Malo(0)| regular(0)|

Responder
JMiur  

Eso l oagregas directamente editando el Elemento Entradas en Diseño.

Responder
Soletuti  

:O

Excelente, gracias por compartir!

Responder
Anahí  

JMiur, a ver si me puede ayudar un poquito con el FF35: siguiendo las instrucciones de esa pag hice backup de perfiles, desinstalé la versión anterior, instalé la nueva, cambié el contenido de perfiles por el anterior, ¿es así?, porque me anda mal... se supone que es más rápido, pero me va más lento que una tortuga, y no encuentro nada en las especificacines de mozilla. :((
Saludos y gracias.

Responder
JMiur  

Todo lo que hiciste es correcto excepto una cosa. El perfil "viejo" se guarda como respaldo para recuperar los datos si es que necesitamos volver atrás o bien si hay algo que nos olvidamos "backupear" pero, la lógica, es comenzar con el perfil nuevo y vacio.

Es que el perfil contiene todas las extensiones, opciones, etc. Todo eso que corresponde al navegador anterior y como siempre se va "deteriorando" o llenamdo de basura, cuando hacemos una instalación limpia, lo mejor es usar uno nuevo sin datos.

Es posible que eso sea lo que está complicando las cosas porque, como mínimo, debería funcionar igual que antes.

Responder
kikop  

Hola una pregunta en que parte del codigo de la plantilla agregamos este codigo? Gracias!

Responder
JMiur  

El CSS (el style) puede ir en un post, en un elemento HTML o en la plantilla misma. El HTML lo colocas donde quieras que se vea.

Si es algo que quieres usar en un post, puede ponerse todo junto allí mismo.

Responder
kikop  

Lo que quiero es ponerla para modificar mi style de fecha, el problema que cuando la pongo donde pienso que podría ir me falla todo. Saludos.

Responder
JMiur  

Pués, debería ver que tipo de códigos o propiedades estás usando para saber dónde está el error; y debería saber cuál es el resultado que quieres conseguir.

Responder
Graciela  

Jorge sigo con la historia de la rotación, no me gusta cómo queda...bien se puede lograr que la imágen quede derechita, cuando pasas el cursor por encima, se mueva rotando el borde?

Responder
JMiur  

Si, lo que deberías hacer es colocar el borde en la misma imagen o girar todo el DIV contenedor. No me acuerdo cuñal era el ejemplo concreto :-$

Responder
Graciela  

Algo así como en ésta página, punto 5

Estoy perdiendo la memoria, el calor me achicharra las neuronas :((

Responder
JMiur  

Yo creo recordar que usabas una imagen; un ejemplo:

<img class="rotar" src="http://4.bp.blogspot.com/_2jIweJlMqPI/S7nvFLcASzI/AAAAAAAAGZA/BhhZ3ngMF5g/S45/YOP.jpg" />

el estilo:

img.rotar {
background-color: blue;
border: 5px solid red;
padding: 5px;
-moz-transform: rotate(5deg);
}
img.rotar:hover {
-moz-transform: rotate(0deg);
}

al poner el cursor encima, rotará el borde, el color de fondo y la imagen.

Responder
Graciela  

Muchas gracias Jorge, hoy lo pruebo y te cuento!

Responder
jonathan gutierrez villamarin  

super vacano men

Responder
jonathan gutierrez villamarin  

super vacano parcero la saco del estadio

Responder
fgutiro  

tengo un problema y es que la propiedad trasnform no la tiene dream weaver cs6 y por consiguente no se como hacerlo, como hacer para obtenerla.

JMiur  

Las propeidades CSS no las tienen los programas, son parte de loa navegadores.

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