Alternativa para reproducir videos de YouTube

Hay varios reproductores que permiten reproducir videos de YouTube sin utilizar el que provee el servicio. Aunque suelen ser archivos o scripts pequeños, para quien no quiera molestarse en alojar alguno de ellos en su propio servidor, siempre queda la alternativa de usar el JWplayer que puede ser configurado y personalizado, ayudándose con los datos que brinda su página de opciones.

La URL del reprooductor es http://player.longtailvideo.com/player.swf y el código a utilizar es similar al de cualquier otro archivo de Flash:

<object width="425" height="350" type="application/x-shockwave-flash" data="http://player.longtailvideo.com/player.swf?file=http://www.youtube.com/watch?v=XXXXXXXXXXX">
<param name="movie" value="http://player.longtailvideo.com/player.swf?file=http://www.youtube.com/watch?v=XXXXXXXXXXX" />
<param name="wmode" value="transparent" />
<param name="allowfullscreen" value="true"/>
<param name="allowScriptAccess" value="always" />
</object>

donde XXXXXXXXXXX son los once caraceteres que identifican a cada video y a l ocual, le podemos adosar otros parámetros tales como colores:

http://player.longtailvideo.com/player.swf?file=http://www.youtube.com/watch?v=XXXXXXXXXXX&screencolor=000000&backcolor=000000&frontcolor=FFFFFF&lightcolor=CCCCCC

Una variante de ese código, nos permite no tener que duplicar esos datos por comodidad, colocándolos en el parámetro flashvars:

<object width="425" height="350" type="application/x-shockwave-flash" data="http://player.longtailvideo.com/player.swf">
<param name="movie" value="http://player.longtailvideo.com/player.swf" />
<param name="flashvars" value="file=http://www.youtube.com/watch?v=XXXXXXXXXXX">
<param name="wmode" value="transparent" />
<param name="allowfullscreen" value="true"/>
<param name="allowScriptAccess" value="always" />
</object>

Lo interesante de este reproductor, es que permite agregar otro tipo de archivos de video como FLV o MP4, utilizando la misma sintaxis:

<param name='flashvars' value='file=URL_archivo.FLV'>

"Entintar" una imagen, tiñéndola con un color es una idea de Impressive Webs y en su artículo, muestran varios métodos pero de tos ellos, me han gustado los dos que sólo requieren de CSS.

Opacidad, sombras, contraste, brillo. Muchos de esos efectos que podemos aplicar a las imágenes en cualquier software, también son propiedades que el CSS3 nos permite usar con cualquier elemento HTML de modo muy sencillo y en cualquier navegador de escritorio o dispositivo móvil.

leer artículo actualizado

El reciente anuncio de Google respecto a la eliminación de varios de sus servicios como Google Wave, Knol, Google Gears y otros, se suma a todos los que vienen dando de baja a lo largo del año. Si uno mira la lista, son muchos: Code Search, Google Buzz, Jaiku, Aardvark, Desktop, Google Pack, Google Web Security, Sidewiki; las listas se acumulan y hay de todo, productos conocidos y otros de los que seguramente nunca oímos hablar (más información 1 | 2 | 3)

Si esto sólo es el resultado de la indigestión del gigante que pretendió abarcar más de lo que podía o no, poco importa. Lo cierto es que entre los servicios que se eliminarán está Google Friend Connect y esto ha causado alguna preocupación entre los usuarios de Blogger ya que este sistema está integrado con el que se usa para los llamados Seguidores.

Friend Connect tiene previsto cerrar sus puerta en marzo del año 2012 pero, eso sólo será aplicado a todos los sitios excepto Blogger por lo tanto, estos blogs podrán seguir utilizando el gadget de Seguidores sin inconvenientes aunque ellos sugieren (obviamente), cambiar el perfil por el de Google+ y relacionar los blogs con su nueva red social, crear una page en Google+ y agregar el badge correspondiente.

En principio, que se elimine Google Friend Connect del gadget de Seguidores, debería aliviar sustancialmente la carga de este ya que es "pesado" y proclive a tener errores constantes. Se supone que si ellos eliminan toda esa parte, el código deberá ser más simple y por lo tanto, más estable ... en teoría, claro.

Así como hay gradientes lineales, también las hay de tipo radial donde el degradado se genera de modo circular.

Si nos limitamos a lo simple, la sintaxis de ambas no difiere demasiado, por ejemplo:

.gradiente-lineal {
  background: -moz-linear-gradient(#FFF, #000);
  background: -webkit-linear-gradient(#FFF, #000);
  background: -o-linear-gradient(#FFF, #000);
  background: -ms-linear-gradient(#FFF, #000);
}

.gradiente-radial {
  background: -moz-radial-gradient(#FFF, #000);
  background: -webkit-radial-gradient(#FFF, #000);
  background: -o-radial-gradient(#FFF, #000);
  background: -ms-radial-gradient(#FFF, #000);
}

Aunque en todos los casos debemos usar el prefijo necesario para que los distintos navegadores reconozcan la propiedad, en un esquema elemental, basta cambiar linear-gradient por radial-gradient indicando los colores inicial (comenzará el el centro ) y final.

Si queremos personalizarlas aún más, la sintaxis tampoco varía:

radial-gradient( posición, color-inicial, color-final )

donde la posición indica dónde comenzará la gradiente (top, right, bottom, left, center):

radial-gradient(center top, #FFF, #000); o radial-gradient(top, #FFF, #000);
radial-gradient(center bottom, #FFF, #000); o radial-gradient(bottom, #FFF, #000);
radial-gradient(left center, #FFF, #000); o radial-gradient(left , #FFF, #000);
radial-gradient(right center, #FFF, #000); o radial-gradient(right, #FFF, #000);

Claro que esto se complica un poco más ya que este tipo de gradientes posee otro parámetro opcional que podemos utilizar y que consta de dos palabras:

radial-gradient( posicion, shape size, color-inicial, color-final )

shape es "la forma" que adoptará y puede ser circle o ellipse
size indica la forma en que se expandirá y terminará y puede ser closest-side (o contain), closest-corner, farthest-side, farthest-corner (o cover)

radial-gradient(circle closest-side, #FFF, #000)

y todo puede combinarse:

radial-gradient(left top,circle closest-side, #FFF, #000)

Al igual que la lineales, si queremos usar varios colores, los vamos agregando uno tras otro, separados por comas:

radial-gradient(#FFF, #FF0, #000)
radial-gradient(#FFF, #F00, #FF0, #000)
radial-gradient(#FFF, #F00, #FF0, #0F0, #000)

Establecer el fondo de una etiqueta cualquiera es algo bastante común y no debería causar problemas si conocemos a forma en que funciona esta propiedad que, genéricamente, se define con background, con ella, podemos definir un color o una imagen como fondo de cualquier elemento.

leer artículo actualizado

Crear gradientes con CSS es uno de los métodos más sencillos para generar fondos que pueden ser aplicados a casi cualquier etiqueta HTML y si bien es algo que no está implementado en las versiones viejas de Internet Explorer, llegado el caso, podemos simularlas mediante filtros o ignorar ese navegador y establecer reglas de estilo diferenciadas.

Por ahora, los navegadores que aceptan esta propiedad, requieren que se utilicen prefijos distintos para cada uno de ellos así que deberemos usarlos todos para lograr el máximo de compatibilidad:

-moz-linear-gradient( parámetros ) /* en Firefox */
-webkit-linear-gradient( parámetros ); /* en Chrome/Safari */
-o-linear-gradient( parámetros ); /* en Opera 11 o superior */
-ms-linear-gradient( parámetros ); /* en Internet Explorer 10 */

Lo básico es entender que una gradiente no es otra cosa que un degradado de colores que se aplica a un fondo así que, lo más simple es crear una de dos colores y eso lo indicamos colocando como parámetros, esos dos colores, en formato hexadecimal, rgb(), rgba() o hsl():

.ejemplo {
  background: -moz-linear-gradient(#FFF, #000);
  background: -ms-linear-gradient(#FFF, #000);
  background: -o-linear-gradient(#FFF, #000);
  background: -webkit-linear-gradient(#FFF, #000);
}

Así, sin más datos, creamos una gradiente que va del blanco al negro y que llenará el espacio al que lo aplicamos, de modo proporcional:

Tal como está, el degradado será vertical pero la dirección es algo que podemos definir: en general, sería así:

linear-gradient( posicion, color-inicial, color-final )

La posición, indica dónde comenzará la gradiente y requiere de dos palabras o valores al igual que la propiedad background-position (top, right, bottom, left, center); si sólo ponemos una, se asume que la otra es center así que:

linear-gradient(center top, #FFF, #000); o linear-gradient(top, #FFF, #000);
linear-gradient(center bottom, #FFF, #000); o linear-gradient(bottom, #FFF, #000);
linear-gradient(left center, #FFF, #000); o linear-gradient(left , #FFF, #000);
linear-gradient(right center, #FFF, #000); o linear-gradient(right, #FFF, #000);

si queremos que los colores inviertan su orden reemplazamos top por bottom; si queremos que sea horizontal (de izquierda a derecha) usamos left y si usamos right:

Admite otros valores que no sean palabras, también pueden usarse pixeles, porcentajes o ángulos, tanto positivos como negativos y combinarse de cualquier forma pero esto, en Chrome/Safari, se complica bastante ya que, como siempre, los navegadores hacen lo que se les da la gana (más información) así que esto n oserá válido en Chrome:

linear-gradient(10px 90%, #FFF, #000);
linear-gradient(20px -45deg, #FFF, #000);

aunque podemos usar ángulos en cualquiera de ellos:

linear-gradient(45deg, #FFF, #000);

Bastaría seguir agregando colores separados por comas para que la gradiente se hiciera cada vez más complicada:

linear-gradient(#FFF, #FF0, #000)
linear-gradient(#FFF, #F00, #FF0, #000)
linear-gradient(#FFF, #F00, #FF0, #0F0, #000)

Los colores se muestran ordenados y se distribuyen proporcionalmente pero, basta agregarles un valor separado por un espacio para indicar la posición de cada uno de ellos:

linear-gradient(#FFF, #FF0 20%, #000)

Hasta acá, la gradiente la aplicamos a la propiedad background pero podríamos colocarla en al propiedad background-image y, de ese modo agregar colores de fondo, algo que tiene sentido si se utilizan golores en forma rgba() que nos dan al posibilidad de crear fondos con determinada opacidad:

background-color; red;
background-image: -XXX-linear-gradient(#000, rgba(200,150,200,.5), #000);

Templarian
	Contiene 265 íconos de 48x48, en formato PNG. descargar

Cuando navegamos por la web, es usual que abramos una página y esta se quede cargando indefinidamente; en Blogger pasa seguido y no parece que haya muchas explicaciones al respecto ya que es muy complicado saber qué está ocurriendo, si se trata de un error real que deberíamos corregir o sólo es algo temporal.

No es nada fuera de lo común y no es frecuente que cause algo más que una molestia que se soluciona haciendo click en el botón detener que posee todo navegador o usando la tecla ESC pero, también es cierto que hay veces que esa carga indefinida impide que se ejecuten determinados scripts, por ejemplo, todos aquellos que requieren que la página esté cargada por completo para inicial izarse.

Sea por un motivo o por otro, KillSpinners viene en ayuda de todos los que usan Firefox porque es una extensión pensada para eso, simplemente, detiene la ejecución de manera automática pasado cierto tiempo.

Por defecto, ese tiempo está establecido en 30 segundos pero, ese dato podemos modificarlo en las opciones de la misma extensión y cuando se ejecute, nos mostrará una ventana de notificación, indicando el problema.

REFERENCIAS:shooanswers.com

Mostar el favicon de una página web para "adornar" los enlaces es fácil si ese sitio coloca la etiqueta adecuada, si la imagen es "normal" y si está alojada correctamente.

En principio, hay dos formas de hacerlo, la obvia es usar la dirección URL del sitio seguida del nombre del archivo que en este caso, debería ser favicon.ico y luego, colocar esa dirección en una etiqueta IMG al igual que hacemos con cualquier otra imagen; por ejemplo:

<img src="http://www.facebook.com/favicon.ico"/>

Claro que, esto no funcionará siempre; hay sitios que los bloquean así que no podemos acceder a esas imágenes o usan otros formatos o están en otro directorio interno, etc.

Un segundo método es usar un servicio de Google que nos permite postrar el favicon de cualquier sitio, en formato PNG; para eso, debemos usar una dirección URL como esta:

http://www.google.com/s2/favicons?domain=DOMINIO

e igual que en el caso anterior, la ponemos en una etiqueta IMG:

<img src="http://www.google.com/s2/favicons?domain=facebook.com" />

Cualquiera de ambos métodos podríamos aplicarlos a la lista de enlaces de Blogger y automatizar la tarea, para eso, bastaría modificar un poco el código del gadget pero, el primero de ellos es el más sencillo de implementar, sobre todo, ahora que Blogger nos permite agregar un favicon a las plantillas.

Así que, si la expandimos y buscamos el widget que deberá llamarse LinkList, veremos algo así:

<ul>
  <b:loop values='data:links' var='link'>
    <li><a expr:href='data:link.target'><data:link.name/></a></li>
  </b:loop>
</ul>

Es un bucle, que crea una lista donde la dirección URL es data:link.target y el texto visible es data:link.name así que podríamos re-armarlo agregándole otro dato:

<li>
  <a expr:href='data:link.target'>
    <img expr:src='data:link.target + &quot;favicon.ico&quot;' />
    <data:link.name/>
  </a>
</li>

Claro que que no todos serán accesibles y si son blogs de Blogger, muchos de ellos no habrán establecido el favicon así que se mostrará el que se usa por defecto.

• Aeromodelismo a full
• Blogtecnia
• Conectablog
• Gem@ Blog
• Himsomnio
• Palomas de papel
• SpamLoco
• Templates Novo Blogger
• Zona Firefox

Y un poco de CSS nos permitirá organizar ese gadget como se nos ocurra:

<style>
  #LinkList1 li {
    background-color: #303941;
    border-top: 2px solid #303941;
    border-bottom: 2px solid #303941;
    cursor: pointer;
    margin: 2px 0;
    padding: 3px 10px;
  }
  #LinkList1 li a {
    color: #FFF !important;
    font-weight: normal !important;
  }
  #LinkList1 li img {
    background: #FFF url(IMAGENxDEFECTO) no-repeat 0 0;
    display: inline-block;
    height: 16px;
    margin-right: 5px;
    vertical-align: top;
    width: 16px;
  }
  #LinkList1 li:hover {
    background-color: #101921;
    border-color: #606971;
  }
</style>

Las pseudo-clases :first-xxxx seleccionan el primer elemento que cumple cierta condición; por el contrario, las pseudo-clases :last-xxxx hacen lo mismo pero contando de atrás hacia adelante.

leer artículo actualizado

Establecer el fondo de una etiqueta cualquiera es algo bastante común y no debería causar problemas si conocemos a forma en que funciona esta propiedad que, genéricamente, se define con background, con ella, podemos definir un color o una imagen como fondo de cualquier elemento.

leer artículo actualizado

• Font-Face Kit Generator Permite que subamos nuestros archivos de fuentes y genera un pack optimizado con los distintos formatos necesarios para incrustarlos en un sitio web. El resultado final podemos descargarlo e incluye un demo y el CSS necesario.
• CSS Menu Generator Nos ayuda a generar menús de distinto tipo basándonos en una serie de diseños básicos. El resultado, lo descargamos en formato HTML.
• pForm Permite crear formularios utilizando diseños predefinidos que vamos personalizando mediante un editor visual y que luego podemos descargar en formato HTML.
• Pure CSS Menu Es un sitio que permite crear menús desplegables utilizando sólo CSS.

purecssmenu.com

purecssmenu.com

<object width='425' height='350' id='movie' type='application/x-shockwave-flash' data='http://www.youtube.com/v/Z2WR59gF7qo'><param name='movie' value='http://www.youtube.com/v/Z2WR59gF7qo' /><param name='wmode' value='transparent' /><param name='allowfullscreen' value='true'/></object>Copiar el código para insertar el video

Algunos sitios donde se puede entrar a buscar inspiración cuando se trata de generar fondos para nuestros sitios.

• Background maker
• Background patterns
• Tartan maker
• Stripe generator
• Stripemania
• Gradient image maker
• Free background textures library
• Seamless background patterns
• Backgrounds and patterns
• Royalty free clip art

Paginar es separar las entradas del blog en grupos que tienen una determinada cantidad de ellas de tal forma que podemos verlas "saltando" de unas a otras sin necesidad de hacerlo secuencialmente tal como ocurre con el típico sistema de Blogger donde avanzamos o retrocedemos pero, siempre en orden cronológico.

Hay muchos scripts que hacen eso pero todos ellos tienen una limitación fundamental; en Blogger siempre debemos usar los feeds para casi cualquier cosa y los feeds no son infinitos, tienen un tamaño máximo; por lo tanto, jamás podremos leer el 100% de las entradas si la cantidad publicada supera dicho límite. Ese número máximo es 500.

De allí; que algunas personas pregunten ¿qué pasa? cuando utilizan Json para mostrar algo y eso que queremos ver, es incompleto.

La cantidad de entradas a leer se establece con el parámetro max-results; por ejemplo:

/feeds/posts/default?alt=json-in-script&max-results=VALOR&alt=json-in-script&callback=FUNCION

¿Qué debemos tener en cuenta con ese tipo de scripts? Dos cosas: si el valor es muy alto, el tiempo de carga aumentará pero, aún más, cuando hacemos este tipo de cosas, los datos del feed se cargan y se procesan, es decir, hay un código que los lee, los ordena, busca, cambia y muestra algo de alguna manera y todo eso, se ejecuta una cantidad de veces. Obviamente, si los datos a procesar son muchos, el tiempo que lleva ejecutar esas instrucciones aumenta y puede llegar a aumentar tanto que el navegador nos muestre una ventanita diciendo que un script de la página está demorando mucho y nos dará la opción de continuar o detener la operación.

Por lo tanto, la cantidad que usemos en max-results, debe ser un valor "lógico" aunque es imposible definir cuál es ese número exacto ya que dependerá de la longitud de las entradas. Se pueden cargar muchas si son cortas pero conviene cargar pocas si son largas.

El segundo punto importante es acordarse que hay un máximo de 500 entradas que pueden ser leídas de una sola vez, por más que coloquemos un valor mucho mayor, nada ocurrirá, no habrá errores pero se leerán 500 así que poner esto:

/feeds/posts/default?alt=json-in-script&max-results=9999&alt=json-in-script&callback=FUNCION

es lo mismo que poner esto:

/feeds/posts/default?alt=json-in-script&max-results=500&alt=json-in-script&callback=FUNCION

Es fácil de comprobar. En este ejemplo se pueden cargar los feeds de este blog y procesarlos; allí se verá cuantas entradas hay publicadas, cuantas entradas son leídas y el título de la entrada más vieja a la que puede accederse; noten el tiempo que se tarda en leer y mostrar el resultado, pese a que en realidad, el script no hace nada:

20 | 100 | 500 | 1000

En estos tiempos en que están común el uso de plantillas de tipo magazine donde se muestra un home con un resumen de cierta cantidad de entradas, esto, que es una buena forma de "ahorrar" espacio y no recargar visualmente una página web, trae sus conflictos y provoca ciertas dudas, algunas de las cuales pueden ser respondidas y otras ... quien sabe.

¿Es mejor usar este tipo de plantillas en lugar de las tradicionales? Eso no puede responderse, es totalmente subjetivo.

¿Es una forma de aliviar la carga del sitio, de hacerlo más rápido? Depende ¿De que depende? De la forma en que haga ese resumen.

Probablemente, este sea el punto clave de todo el asunto ya que no es cierto que usar estos resúmenes implique que el sitio sea más "liviano" ya que muchos scripts que hacen este tipo de cosas, simplemente cargan el 100% de las entradas, extraen luego los datos necesarios, crean los resúmenes y luego los muestran de una manera diferente. Si usamos este tipo de scripts, nuestro home no será más liviano, tendrá el mismo volumen que tendría si mostráramos las entradas completas ... y un poco más.

Esto, suele ser un problema cuando la diagramación de un sitio depende de que siempre se muestre una cantidad exacta de entradas ya que, muchas veces, Blogger muestra menos que las que nosotros definimos en la Configuración. Decidimos que se muestren diez y se ven nueve; navegamos hacia atrás y se ven ocho o cualquier otro número. Si, para colmo, tenemos agregado algún tipo de script de paginación, al avanzar o retroceder, se saltean entradas ¿Por que ocurre esto?

El motivo principal es algo comentado hace tiempo, Blogger había comenzado a utilizar lo que ellos llaman Autopaginación, evaluando los tiempos de carga de los blogs y limitando su extensión a cierta cantidad no definida explícitamente. El resultado de eso es que, si a entender del servicio, la página generada es demasiado grande porque las entradas son largas, no tiene en cuenta el valor establecido por nosotros, muestra menos y esto no tiene ninguna posibilidad de ser modificado.

Por lo tanto, si el script que usamos carga las entradas completas y luego hace un resumen, en realidad, no se reduce el total y es fácil de comprobar, basta ver el código fuente generado por el navegador y allí encontraremos el HTML que permanece oculto.

Hay que recordar una y mil veces que ocultar algo con CSS o JavaScript no es lo mismo que condicionarlo con alguno de los códigos que posee Blogger. Cuando algo se oculta, sigue existiendo, cuando algo se condiciona, no existe y por lo tanto no forma parte de la página que muestra el navegador. Esto último, es lo que hace el botón MORE o LEER MÁS del editor de entradas; usando ese sistema, las entradas no se cargan por completo y eso reduce el tiempo de carga total.

Si bien la mayoría de los scripts usan los feeds para resumir las entradas, una posición intermedia es tratar de crear ese resumen sin cargar la entrada, leyendo el dato y manipulándolo en la memoria. Este otro sistema, probablemente mejore el rendimiento y permita que se vea una cantidad de entradas fijas sin que Blogger interfiera pero, tiene una contra, al hacerse sólo con JavaScript, esas entradas serán invisibles para los buscadores y por lo tanto, el blog no será tan sencillo de indexar.

A decir verdad, no existe un método perfecto, todos tienen pros y contras y por lo tanto, cuál debe usarse es una decisión personal.

Crear animaciones con CSS es interesante pero engorroso; además, para que funcionen, hay que agregar los prefijos de cada navegador lo que hace que el código a escribir sea largo. De todos modos, aunque sea experimental, es algo para probar y ver qué pasa. Para más información: Mozilla | Chrome/Safari | w3.org.

En este caso, se trata de un ejemplo creado por David Walsh, un grupo de imagenes superpuestas que se expanden cuando ponemos el puntero del ratón encima de ellas.

El HTML es muy simple:

<a href="javascript:void(0);" class="album">
  <img src="URLIMAGEN_1" class="photo1" />
  <img src="URLIMAGEN_2" class="photo2" />
  <img src="URLIMAGEN_3" class="photo3" />
</a>

Las reglas de estilo básicas también:

<style>
  .album {
    display:block;
    position: relative;
    vertical-align: top;
    width: 250px;
    z-index: 5;
  }
  .album img {
    border: 10px solid #ABC;
    display: block;
    height: 250px;
    left: 0;
    position: absolute;
    top: 0;
    width: 250px;
  }
  /* un agregado para que las imágenes se ponga en primer plano */
  .album img:hover {
    z-index: 1000;
  }
</style>

Y por último, la animación en si misma:

<style>
  @-moz-keyframes image1 {
    0% {-moz-transform: rotate(0deg) translate(0, 0) scale(1.0);}
    100% {-moz-transform: rotate(-6deg) translate(-130px, -3px) scale(1.1);}
  }
  @-webkit-keyframes image1 {
    0% {-webkit-transform: rotate(0deg) translate(0, 0) scale(1.0);}
    100% {-webkit-transform: rotate(-6deg) translate(-130px, -3px) scale(1.1);}
  }

  @-moz-keyframes image2 {
    0% {-moz-transform: rotate(0deg) translate(0, 0) scale(1.0);}
    100% {-moz-transform: rotate(0deg) translate(0, -3px) scale(1.1);}
  }
  @-webkit-keyframes image2 {
    0% {-webkit-transform: rotate(0deg) translate(0, 0) scale(1.0);}
    100% {-webkit-transform: rotate(0deg) translate(0, -3px) scale(1.1);}
  }

  @-moz-keyframes image3 {
    0% {-moz-transform: rotate(0deg) translate(0, 0) scale(1.0);}
    100% {-moz-transform: rotate(6deg) translate(130px, -3px) scale(1.1);}
  }
  @-webkit-keyframes image3 {
    0% {-webkit-transform: rotate(0deg) translate(0, 0) scale(1.0);}
    100% {-webkit-transform: rotate(6deg) translate(130px, -3px) scale(1.1);}
  }

  .album:hover .photo1, .album:focus .photo1 {
    -moz-animation-name: image1;
    -moz-animation-duration: .2s;
    -moz-transform: rotate(-6deg) translate(-130px, -3px) scale(1.1);
    -webkit-animation-name: image1;
    -webkit-animation-duration: .2s;
    -webkit-transform: rotate(-6deg) translate(-130px, -3px) scale(1.1);
  }
  .album:hover .photo2, .album:focus .photo2 {
    -moz-animation-name: image2;
    -moz-animation-duration: .2s;
    -moz-transform: rotate(0deg) translate(0, -3px) scale(1.1);
    -webkit-animation-name: image2;
    -webkit-animation-duration: .2s;
    -webkit-transform: rotate(0deg) translate(0, -3px) scale(1.1);
  }
  .album:hover .photo3, .album:focus .photo3 {
    -moz-animation-name: image3;
    -moz-animation-duration: .2s;
   -moz-transform: rotate(6deg) translate(130px, -3px) scale(1.1);
    -webkit-animation-name: image3;
    -webkit-animation-duration: .2s;
    -webkit-transform: rotate(6deg) translate(130px, -3px) scale(1.1);
  }
</style>