Transformaciones con CSS

Las transformaciones de un elemento utilizando sólo CSS son uno de los proyectos de la versión 3 que aún se discute y que algunos navegadores ya imprementan con ciertas variantes. En teoría, será tan simple como escribir cualquier otra propiedad:

transform: funcion(parámetros);

En los navegadores se usan de este modo:

-moz-transform: funcion(parámetros); // en Mozilla
-webkit-transform: funcion(parámetros); // en Safari y Chrome
-o-transform: funcion(parámetros); // en Opera

No tienen equivalencias en Internet Explorer aunque allí hay un filtro llamado Matrix que permitiría simularlas.

En principio, hay varias funciones:

scale(x,y)
Aumenta o disminuye el tamaño del elemento; su valor normal es 1. Valores superiores aumentan su tamaño e inferiores lo disminuyen así, 1.5 hará que se vea un 50% más grande y 0.5 un 50% más chico; si sólo se coloca un valor, este se aplica a ambas direcciones, caso contrario, el primero indica el ancho y el segundo el alto.

scaleX(x) y scaleY(y) son lo mismo pero sólo afectan al ancho (X) o al alto (Y).

por ejemplo:

-moz-transform:scale(2); -webkit-transform:scale(2); -o-transform:scale(2);

colocar el cursor encima para ver el efecto

En IE es posible utilizarla con bastante facilidad cuando se trata de cosas simples porque el resultado no va a ser el mismo, para eso, es necesario que el elemento sea un layout y lo conseguimos adicionándole la propiedad zoom: 1; que es la misma que usaremos para luego cambiarle la escala:

zoom: 1; el elemento no cambia
zoom: 1.5; aumentar su tamaño
zoom: 0.5; disminuye su tamaño

colocar el cursor encima para ver el efecto

rotate(a)
Gira un elemento. El valor se expresa en grados, si es positivo gira en el sentido de las agujas del rejo, si es negativo, en el sentido contrario.

-moz-transform:rotate(10deg); -webkit-transform:rotate(10deg); -o-transform:rotate(10deg);

En IE puede usarse algún filtro que calculamos usando esta herramienta; por ejemplo:

-moz-transform:rotate(5deg);
-webkit-transform:rotate(5deg);
-o-transform:rotate(5deg);
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455);
zoom: 1;

un ejemplo

un ejemplo

un EjEmplo

skew(a, b)
Skew significa sesgar o sea, inclinar y eso hace esta propiedad que también utiliza ángulos como valor, el primero afecta al eje X (horizontal) y el segundo al eje Y (vertical).

skewX(a) y skewY(a) hacen lo mismo pero sólo sobre uno de los ejes.

-moz-transform:skew(5deg); -webkit-transform:skew(5deg); -o-transform:skew(5deg);

translate(x, y)
Desplaza el elemento, el primer valor lo hace en el eje horizontal y el segunod en el eje vertical.

translateX(x) y translateY(x) hacen lo mismo pero sólo sobre uno de los ejes.

-moz-transform:translate(20px); -webkit-transform:translate(20px); -o-transform:translate(20px);

un ejemplo

un ejemplo

un ejemplo

matrix(a, c, b, d, x, y)
Es una combinación de todos ellos, por ejemplo:

matrix (1, 0, 0, 1, x, y) equivale a translate x e y
matrix (x, 0, 0, y, 0, 0) equivale a scale x e y
matrix (1, y, x, 1, 0, 0) equivale a skew x e y

Por defecto, un elemento sin deformaciones tendría esta propiedad: matrix(1, 0, 0, 1, 0px, 0px) así que en este ejemplo:

matrix(1.5, 0.1, 0.8, 1.2, -10px, 0px):

1.5 es la escala X
0.1 es la inclinacion sobre el eje X
0.8 es la inclinacion sobre el eje Y
1.2 es la escala Y
-10px es el desplazamiento horizontal
0px es el desplazamiento vertical

Y eso generaría una cosa rara:

último ejemplo

REFERENCIAS:googlediscovery.com/

GooReader es un programa con el cual podemos buscar y leer libros y revistas que se hallen en Google Books.

El programa es gratuito aunque si queremos descargar los contenidos, debemos optar por la versión paga.

Funciona muy bien, es pequeño y la estética esta muy cuidada; las páginas se dan vuelta on el mosue, tenemos un zoom y otras herramientas que permiten navegar los textos con mucha facilidad. Vale la pena mirarlo.

Modificando un poco la idea de cssglobe.com podemos intentar darle un toque diferente a la lista de etiquetas que se muestra debajo de las entradas o, en realidad, a cualquier otro tipo de lista y todo, sin necesidad de utilizar imágenes, empleando algunas de las nuevas alternativas del CSS con lo que en algunos navegadores, el resultado será distinto (IE7) pero más que aceptable.

En el caso de Blogger, esas etiquetas se muestran con un código similar a este:

<span class='post-labels'>
  <b:if cond='data:post.labels'>
    <data:postLabelsLabel/>
    <b:loop values='data:post.labels' var='label'>
      <a expr:href='data:label.url' rel='tag'><data:label.name/></a>
      <b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
    </b:loop>
  </b:if>
</span>

Allí, esta línea es la que agrega una coma o un caracter separador entre los textos de esa lista y, la eliminamos porque es innecesaria:

<b:if cond='data:label.isLast != "true"'>,</b:if>

Si deseamos, lo mismo podemos hacer con esta otra que por defecto,escribe el texto "Etiquetas:"

<data:postLabelsLabel/>

Todo lo demás puede quedar igual ya que normalmente, esas etiquetas no tienen definiciones de estilo especiales así que, se las agregamos, colocando esto antes de </b:skin>:

.post-labels {
  margin: 0;
  padding: 0;
}
.post-labels a {
  float: left;
  position: relative;
  background-color: #0089E0; /* el color de fondo que se nos ocurra */
  /* la altura */
  height: 24px;
  line-height: 24px;
  /* el ancho lo resolvemos con paddings horizontales */
  padding:0 10px 0 12px;
  /* la separación entre etiquetas */
  margin-left:20px;
  /* definiciones del texto */
  color: #FFF;
  font-size:11px;
  font-family: Arial;
  text-decoration: none;
  /* una curva suave a laderecha */
  -moz-border-radius-bottomright: 4px;
  -webkit-border-bottom-right-radius: 4px; 
  border-bottom-right-radius: 4px;
  -moz-border-radius-topright: 4px;
  -webkit-border-top-right-radius: 4px; 
  border-top-right-radius: 4px;
}
/* esto creará el triángulo de la izquierda */
.post-labels a:before {
  border-color: transparent #0089E0 transparent transparent;
  border-style: solid;
  /* el borde es igual a la mitad de la altura definida anteriormente */
  /* de ese modo será un triángulo equilátero */
  border-width: 12px 12px 12px 0;  
  content: "";
  float: left;
  left:-12px; /* lo movemos tanto como el valor dado al borde */
  height: 0;
  position: absolute;
  top: 0;
  width: 0;
}
/* esto, creará el circulito que precede a los textos */
.post-labels a:after {
  background-color: #FFF; /* el color */
  content: "";
  float: left;
  left: 0;
  position: absolute;
  top: 10px; /* lo ubicamos centrado en al mitad de la altura */
  /* el ancho y la altura son iguales para que sea un círculo */
  height: 4px;
  width: 4px; 
  /* el radio de la curva es la mitad de su tamaño */
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
}
/* efectos hover */
.post-labels a:hover{
  background-color: #555;
}
.post-labels a:hover:before {
  border-color: transparent #555 transparent transparent;
}

BloggerCSSplantillas

jScrollPane es un plugin de jQuery que nos permite darle un aspecto gráfico a las barras de desplazamiento de cualquier elemento, algo que en Internet Explorer es muy simple porque basta usar CSS pero que el resto de los navegadores jamás se ha implementado; cosa rara y absurda pero, hay de todo en este mundo.

Para usarlo, obviamente necesitamos jQuery que podemos cargar desde las librerías de Google así que antes de </head> ponemos:

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js' />

A continuación un script optativo que nos permitirá usar la rueda del ratón:

<script type='text/javascript' src='URL_mousewheel.js' />

y por último el plugin en si mismo, ya sea en su versión normal o minimizada:

<script type='text/javascript' src='URL_jscrollpane.min.js' />

Si no queremos usar archivos externos, estos dos últimos pueden agregarse directametne en la plantilla:

<script type='text/javascript'>
//<![CDATA[
  // acá pegamos el contenido del archivo mousewheel.js
  // acá pegamos el contenido del archivo jscrollpane.min.js
//]]>
</script>

Como todo, requiere sus reglas de estilo así que debajo agregamos esto que es lo mínimo necesario aunque hay más definiciones si queremos utilizar algunas de las opciones:

<style>
  .jspContainer {
    overflow: hidden;
    position: relative;
  }
  .jspPane {position: absolute;}
  .jspVerticalBar {
    background-color: #000;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    width: 16px; /* define el ancho de la barra vertical */
  }
  .jspHorizontalBar {
    background-color: #000;
    bottom: 0;
    height: 16px;  /* define el alto de la barra horizontal */
    left: 0;
    position: absolute;
    width: 100%;
  }
  .jspVerticalBar *, .jspHorizontalBar * {margin: 0; padding: 0;}
  /* estas son las reglas que permiten configurar el plugin */ 
  .jspTrack { /* es el rectángulo donde se desplaza del slider */
    background-color: #000;
    position: relative;
  }
  .jspDrag { /* es el slider en si mismo */
    background-color: #888;
    cursor: pointer;
    left: 0;
    position: relative;
    top: 0;
  }
  .jspHorizontalBar .jspTrack, .jspHorizontalBar .jspDrag {
    float: left;
    height: 100%;
  }
</style>

Con eso ya está todo listo para que podamos utilizarlo en cualquier parte. Para eso, basta que definamos una o varias clases; por ejemplo:

</style>
  .scroll-pane {height: 200px; overflow: auto; width: 100%;}
  .horizontal {height: auto; max-height: 200px;}
</style>

<div style="width: 500px;">
  <div class="scroll-pane">
    <p> ....... el contenido a mostrar ... </p> 
  </div>
</div>

<div style="width: 500px;">
  <div class="scroll-pane horizontal">
    <p style="width: 1000px;"> ....... el contenido a mostrar ... </p> 
  </div>
</div>

Y llamamos a la función usando la clase que hemos definido:

<script type="text/javascript">
  $(function() { $('.scroll-pane').jScrollPane(); });
</script>

Las posibilidades son múltiple, en la página del desarrollador hay varios demos explicativos donde se combinan las barra, se agregan botones, etc.

Email Me! es un sitio que nos provee de un botón con el que podemos agregar un formulario de contacto sin necesidad de registros ni configuraciones. Basta entrar al sitio y hacer click en Get Your Button.

Allí colocamos nuestro nombre y la dirección de correo a la que deseamos que se dirijan los mensajes y nos darán el código que podemos agregar en cualquier parte, por ejemplo, en un elemento HTML de Blogger:

<!-- emailme Button BEGIN -->
<div id="emailme_div1"></div>
<script>var emailme_id=XXXX;
<script type="text/javascript" src="http://emailmebutton.com/emailme.js"></script>
<!-- emailme Button END -->

No tiene demasiadas opciones extras ya que, en realidad, sólo se trata de un enlace con una imagen y si se desea darle propiedades con CSS, es poco lo que puede hacerse pero, al clase que lo controla se llama:

.emailme_link { ....... }

El resultado final es algo así:

Y claro ... este no funciona porque no tengo ganas de borrar pruebas que es una manía que tienen algunos pero, al hacer click en él, se abriría algo como esto:

REFERENCIAS:wwwhatsnew.com

La gente de Blogger es distraida, a veces pierde alguna cosa y nadie la encuentra por varios dias o desaparece para siempre aunque tal vez la tienen frente a las narices. En un tiempo perdieron el lapicito de edición, ahora, parece que en algunos casos se han perdido los botones para compartir.

Como lo que dice Victor no es la primera vez que lo escucho sino la tercera ... esta entrada es para ver si esta solución permite resolver el problema.

Sí esos botones no se ven y no ha habido cambio alguno en la plantilla, en principio, bastaría con agregar esto antes de ]]></b:skin> para que volvieran a aparecer:

.share-button {display: inline-block;}

Eso sí, que nadie pregunte el motivo de la desaparición porque lo desconozco ya que en las plantillas que he visto todo parece normal así que, es uno de esos misterios que hacen que nuestra estadía en Blogger sea tan entretenida.