{Css Soldier}

CSS, HTML, JAVASCRIPT, Trucos, Tutoriales & Plantillas Blogger.

Logo que gira



Hay una gran tendencia últimamente de animar los logos de las paginas, algunos lo hacen con Flash y muchos otros lo hacen mas fácil y simple con Css, en este caso les enseñare a agregar este efecto con solamente css y claro un poco de html simple y facil.

Lo que haremos es hacer que nuestro logo gire 360 grados al pasar el cursor sobre el, también hacer que este tenga un link.

Aca podemos ver un demo.




Coloque el código de tal manera de que no deban modificar nada en su plantilla.

1.- Entran a Diseño y agregan un gadget HTML/JavaScript y ponemos de contenido lo siguiente:

<style type="text/css">
#Soldier-Logo {
   position: absolute; /* Posiciona el logo encima de otros elementos*/
   top: 0; /* Posición arriba */
   left: 0; /* Posicion a la izquierda */
   width: 237px; /* Debe coincidir con las dimensiones de la imagen */
   height: 211px; /* Debe coincidir con las dimensiones de la imagen */
   z-index: 103;
   transform-origin: 50% 50%;
   transition-property: transform;
   transition-duration: 1s;
   transition-timing-function: ease-in-out;
   -o-transform-origin: 50% 50%; /* Opera */
   -o-transition-property: -o-transform;
   -o-transition-duration: 1s;
   -o-transition-timing-function: ease-in-out;
   -moz-transform-origin: 50% 50%; /* Firefox */
   -moz-transition-property: -moz-transform;
   -moz-transition-duration: 1s;
   -moz-transition-timing-function: ease-in-out;
   -webkit-transform-origin: 50% 50%; /* Chrome y Safari */
   -webkit-transition-property: -webkit-transform;
   -webkit-transition-duration: 1s;
   -webkit-transition-timing-function: ease-in-out;
   -ms-transform-origin: 50% 50%; /* IE */
   -ms-transition-property: -ms-transform;
   -ms-transition-duration: 1s;
   -ms-transition-timing-function: ease-in-out;
}
#Soldier-Logo:hover {
   transform: rotate(360deg) scale(1.0);
   -o-transform: rotate(360deg) scale(1.0);
   -webkit-transform: rotate(360deg) scale(1.0);
   -moz-transform: rotate(360deg) scale(1.0);
   -ms-transform: rotate(360deg) scale(1.0);
}
</style>

<a href="#">
<div id="Soldier-Logo">
<img style="display:block;  width: 237px; height: 211px;" src="URL de la imagen" /></div></a>
Lo único que modificaremos es lo que esta en azul "#" lo cambiaremos por el url al que queremos que nos mande la imagen al dar clic sobre ella y en "URL de la imagen" lo cambiaremos por la url (dirección donde se encuentra alojada nuestra imagen).

Lo que esta en verde es el tamaño de nuestra imagen, si queremos cambiar el tamaño de la imagen debemos cambiar igual el tamaño en el css como el el img para que coincidan.


En naranja esta la posición de nuestro logo donde top es hacia arriba y left hacia la izquierda ahí quitaremos los 0 y pondremos a que distancia en pixeles queremos que este. ejemplo:

top: 10px;
left: 50px;

podemos cambiar el left por right si lo queremos a la derecha.

Y en Rojo tenemos position: absolute; que nos hace que nuestro logo este encima de cualquier otro elemento de la pagina.

5 comentarios: