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...

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...

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 : #cst { position:relative; height:281px; width:450px; } #cst img { position:absolute; left:0; -webkit-transition: opacity 1s ease-in-out; ...

CSS3 Spin On Hover Image Effect On Blogger

.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); ...

CSS3 Spinning Image Effect On Blogger

@-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:...