Create An Exploding Logo With CSS3 And MooTools

Seriously guys this is best script i have ever seen in my life and for it's not a jquery script. It's a MooTools script and this tutorial was so big and complicated so i compiled four different scripts into one to make it look easy and small. All we need is MooTools, CSS3 and an image. I found this tutorial at David Walsh. Let's get started:

First we have to add basic html in your document:

<a href="/" id="homeLogo">David Walsh Blog</a>

Now after this we'll add CSS3 which will contain our image. The original element should be styled to size (width and height) with the background image that we'll use as the exploding image:

a#homeLogo  {
  width:300px;
  height:233px;
  text-indent:-3000px;
  background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicT4uc_ZVJiEJz50hcmmrzMVqVSG4uh7WTUb3mRmKnEa_YEBgjG-nNGPfL4-ZC7eGpJAU1GNoTtGQRwGyVOEWqZggOvtqY0NmKusvtZrHcEazio3iDAFl8uwjKsnuoLSF2YvrtQesZEvw/s1600/Logo.png) 0 0 no-repeat;
  display:block;
  z-index:2;
}
a#homeLogo span {
  float:left;
  display:block;
  background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicT4uc_ZVJiEJz50hcmmrzMVqVSG4uh7WTUb3mRmKnEa_YEBgjG-nNGPfL4-ZC7eGpJAU1GNoTtGQRwGyVOEWqZggOvtqY0NmKusvtZrHcEazio3iDAFl8uwjKsnuoLSF2YvrtQesZEvw/s1600/Logo.png);
  background-repeat:no-repeat;
}
.clear { clear:both; }

Now finally we'll add our magic script:

<script src="http://widcraft.googlecode.com/svn/ExplodingMooTools.js"></script>

Our full document will look something like this:

<a href="/" id="homeLogo">David Walsh Blog</a>
<style>
a#homeLogo  {
  width:300px;
  height:233px;
  text-indent:-3000px;
  background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicT4uc_ZVJiEJz50hcmmrzMVqVSG4uh7WTUb3mRmKnEa_YEBgjG-nNGPfL4-ZC7eGpJAU1GNoTtGQRwGyVOEWqZggOvtqY0NmKusvtZrHcEazio3iDAFl8uwjKsnuoLSF2YvrtQesZEvw/s1600/Logo.png) 0 0 no-repeat;
  display:block;
  z-index:2;
}
a#homeLogo span {
  float:left;
  display:block;
  background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicT4uc_ZVJiEJz50hcmmrzMVqVSG4uh7WTUb3mRmKnEa_YEBgjG-nNGPfL4-ZC7eGpJAU1GNoTtGQRwGyVOEWqZggOvtqY0NmKusvtZrHcEazio3iDAFl8uwjKsnuoLSF2YvrtQesZEvw/s1600/Logo.png);
  background-repeat:no-repeat;
}
.clear { clear:both; }
</style>
<script src="http://widcraft.googlecode.com/svn/ExplodingMooTools.js"></script>

Creating A jQuery Elastic Menu For Blogger

Second article of day in which i'am going to teach you how to create a jquery elastic menu for blogger and all html docs. Feeling damn sleepy because of not sleeping all night from over 8-9 months and doing blogging and crappy things over the internet all night so i'am going to finish this so quick.

• Go To Blogger > Template > Edit HTML > Search for ]]></b:skin> :

• Just above ]]></b:skin> paste following CSS :

/* The container which the menu is "locked" to the bottom of */
#menuwrapper{ position:relative; height:210px; }
/* Fixes the whole menu to the bottom of the parent div */
#menu{position:absolute; bottom:0;}
/* Each individual menu item fixed to the bottom with display:inline-block to create elasticity */
.menuitem{ position:fixed relative; bottom:0px; display:inline-block; }

• Now search for </head> and just above it paste following script :

<script type="text/javascript" src="http://widcraft.googlecode.com/svn/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $('.menuitem img').animate({width: 100}, 0); //Set all menu items to smaller size
 $('.menuitem').mouseover(function(){ //When mouse over menu item
  gridimage = $(this).find('img'); //Define target as a variable
  gridimage.stop().animate({width: 200}, 150); //Animate image expanding to original size
 }).mouseout(function(){ //When mouse no longer over menu item
  gridimage.stop().animate({width: 100}, 150); //Animate image back to smaller size
 });
});
</script>

• Now Go To Layout > Add A Gadget > HTML/JavaScript > Paste following HTML :

<div id="menuwrapper">
 <div id="menu">
  <a href="#" class="menuitem"><img src="Image1"></a><!--Template for each menu item-->
  <a href="#" class="menuitem"><img src="Image2"></a>
  <a href="#" class="menuitem"><img src="Image3"></a>
  <a href="#" class="menuitem"><img src="Image4"></a>
  <a href="#" class="menuitem"><img src="Image5"></a>
 </div>
</div>

Now replace # with you links and Image 1/2/3/4/5 with your image url and just like this you can add as many images as you want....if this widget is not working then check if there is any other CSS in your template with same class and delete it. 

3 Amazing CSS3 Image Transitions

So guys in this post i'am gonna teach you 3 amazing CSS image transitions as you can read on post title and image above.....they all will work when you'll hover one image will transform to another so here we go + some examples :

Effect #1 :

Example :

HTML :

<div id="cst" class="hover">
 <img class="bottom" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXvuZ3J1PM7K0LLUojXi2BAILUKfr66tzZE-lvm7AJJ7A8nzPSE6yaXBhiqVrweNKCgqxJrlr1uaAK4RQmmvnuQYiY3cC62mxgYZYWXYqSvt4u1NXJ573wTRMMkveOvRfRtj8M1HYVwRE/s1600/Sites+Like+Google+Adsense.jpg">
 <img class="top" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxar6lVDuAu23qIScn7VVmKxao4WTVJN06z5rTtOPmXrT5DFuDpef5C2qaFNch3AgBPuBIgBAR2NNBQk_MeU9pLWSjvxT-TyOiNHdpZv-Ooy5YNXCf6LhQkBMPextlpAbHNQnCtk25osk/s1600/3+Amazing+CSS3+Transitions.jpg">
</div>

CSS :

#cst {
 position:relative;
 height:281px;
 width:450px;
}
#cst img {
 position:absolute;
 left:0;
 -webkit-transition: opacity 1s ease-in-out;
 -moz-transition: opacity 1s ease-in-out;
 -o-transition: opacity 1s ease-in-out;
 transition: opacity 1s ease-in-out;
}
#cst img.top:hover {
 opacity:0;
}

Effect #2 :

Example :

HTML :

<div id="cst2" class="hover">
 <img class="bottom shadow" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXvuZ3J1PM7K0LLUojXi2BAILUKfr66tzZE-lvm7AJJ7A8nzPSE6yaXBhiqVrweNKCgqxJrlr1uaAK4RQmmvnuQYiY3cC62mxgYZYWXYqSvt4u1NXJ573wTRMMkveOvRfRtj8M1HYVwRE/s1600/Sites+Like+Google+Adsense.jpg">
 <img class="top shadow" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxar6lVDuAu23qIScn7VVmKxao4WTVJN06z5rTtOPmXrT5DFuDpef5C2qaFNch3AgBPuBIgBAR2NNBQk_MeU9pLWSjvxT-TyOiNHdpZv-Ooy5YNXCf6LhQkBMPextlpAbHNQnCtk25osk/s1600/3+Amazing+CSS3+Transitions.jpg">
</div>

CSS :

#cst2 {
  position:relative;
  height:281px;
  width:450px;
 }
 #cst2 img {
  position:absolute;
  left:0;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
 }
 #cst2 img.top {
  -webkit-transform:scale(1,0);
  -moz-transform:scale(1,0);
  -o-transform:scale(1,0);
  transform:scale(1,0);
  filter: alpha(opacity=0);
  opacity:0;
 }
 #cst2:hover img.top, #cst2.hover_effect img.top {
  opacity:1;
  -webkit-transform:scale(1,1);
  -moz-transform:scale(1,1);
  -o-transform:scale(1,1);
  transform:scale(1,1);
 }
 #cst2:hover img.bottom, #cst2.hover_effect img.bottom {
  filter: alpha(opacity=0);
  -webkit-transform:rotate(360deg) scale(0,0);
  -moz-transform:rotate(360deg) scale(0,0);
  -o-transform:rotate(360deg) scale(0,0);
  transform:rotate(360deg) scale(0,0);
 }

Effect #3 :

Example :

HTML :

<div id="cst3" class="hover">
 <img class="bottom shadow" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXvuZ3J1PM7K0LLUojXi2BAILUKfr66tzZE-lvm7AJJ7A8nzPSE6yaXBhiqVrweNKCgqxJrlr1uaAK4RQmmvnuQYiY3cC62mxgYZYWXYqSvt4u1NXJ573wTRMMkveOvRfRtj8M1HYVwRE/s1600/Sites+Like+Google+Adsense.jpg">
 <img class="top shadow" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxar6lVDuAu23qIScn7VVmKxao4WTVJN06z5rTtOPmXrT5DFuDpef5C2qaFNch3AgBPuBIgBAR2NNBQk_MeU9pLWSjvxT-TyOiNHdpZv-Ooy5YNXCf6LhQkBMPextlpAbHNQnCtk25osk/s1600/3+Amazing+CSS3+Transitions.jpg">
</div>

CSS :

#cst3 {
  position:relative;
  height:281px;
  width:450px;
 
 }
 #cst3 img {
  position:absolute;
  left:0;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
 }
 #cst3 img.top {
  -webkit-transform:scale(0,0);
  -moz-transform:scale(0,0);
  -o-transform:scale(0,0);
  transform:scale(0,0);
  opacity:0;
 }
 #cst3:hover img.top, #cst3.hover_effect img.top {
  opacity:1;
  -webkit-transform:scale(1,1);
  -webkit-transform-origin: top right;
  -moz-transform:scale(1,1);
  -moz-transform-origin: top right;
  -o-transform:scale(1,1);
  -o-transform-origin: top right;
  transform:scale(1,1);
  transform-origin: top right;
 }
 #cst3:hover img.bottom, #cst3.hover_effect img.bottom {
  -webkit-transform:scale(0,0);
  -webkit-transform-origin: bottom left;
  -moz-transform:scale(0,0);
  -moz-transform-origin: bottom left;
  -o-transform:scale(0,0);
  -o-transform-origin: bottom left;
  transform:scale(0,0);
  transform-origin: bottom left;
 }

CSS3 Spin On Hover Image Effect On Blogger

Spin image on hover effect is cool and it's also easy to do..........so this time i'll show you how to give spin on hover CSS3 effect to your pics in blogger.....

• Go To Blogger > Template > Edit HTML

• Just Above ]]></b:skin> post the script given below

.rotate{
 -webkit-transition-duration: 1s;
 -moz-transition-duration: 1s;
 -o-transition-duration: 1s;
 transition-duration: 1s;
 -webkit-transition-property: -webkit-transform;
 -moz-transition-property: -moz-transform;
 -o-transition-property: -o-transform;
 transition-property: transform;
 overflow:hidden;
 }
.rotate:hover
{
 -webkit-transform:rotate(360deg);
 -moz-transform:rotate(360deg);
 -o-transform:rotate(360deg);
}

• Now save your template.

• Now on pics you want to spin add class="rotate" tag

Like this : -

<img class="rotate" src="Image URL" />

• You can also add this only in one post by adding code given below on your post

<style>
.rotate{
 -webkit-transition-duration: 1s;
 -moz-transition-duration: 1s;
 -o-transition-duration: 1s;
 transition-duration: 1s;
 -webkit-transition-property: -webkit-transform;
 -moz-transition-property: -moz-transform;
 -o-transition-property: -o-transform;
 transition-property: transform;
 overflow:hidden;
}
.rotate:hover
{
 -webkit-transform:rotate(360deg);
 -moz-transform:rotate(360deg);
 -o-transform:rotate(360deg);
}
</style>

That's It.....Enjoy!!

CSS3 Spinning Image Effect On Blogger

Spinning image effect is cool and it's also easy to do..........so this time i'll show you how to give spinning CSS3 effect to your pics in blogger.....

• Go To Blogger > Template > Edit HTML

• Just Above ]]></b:skin> post the script given below

@-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
@-moz-keyframes rotate {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
@-ms-keyframes rotate {
from {
-ms-transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
}
}
#spin {
-webkit-animation-name: rotate;
-webkit-animation-duration: 5s; /* 5 seconds */
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: rotate;
-moz-animation-duration: 5s; /* 5 seconds */
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: rotate;
-ms-animation-duration: 5s; /* 5 seconds */
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
/* opera */
-o-transition: rotate(3600deg); /* working */
}

• Now save your template.

• Now on pics you want to spin add id="spin" tag

Like this : -

<img id="spin" src="Image URL" />

• You can also add this only in one post by adding code given below on your post

<style>
@-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
@-moz-keyframes rotate {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
@-ms-keyframes rotate {
from {
-ms-transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
}
}
#spin {
-webkit-animation-name: rotate;
-webkit-animation-duration: 5s; /* 5 seconds */
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: rotate;
-moz-animation-duration: 5s; /* 5 seconds */
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: rotate;
-ms-animation-duration: 5s; /* 5 seconds */
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
/* opera */
-o-transition: rotate(3600deg); /* working */
}
}
</style>

That's It.....Enjoy!!