Thursday, May 26, 2011

Easy Image Zoom with jQuery

Posted by Unknown On Thursday, May 26, 2011 No comments

image by: cssglobe.comView Demo DownloadThe task was to create a script that will allow users to see large details of the product while moving cursor over medium sized image.This plugin is customizable with several options and simple CSS definitions. In terms of CSS all you need to do is define the newly created image zoom element's size, position and appearance.This all the code.<html><head><script [...]

CSS Circle Button

Posted by Unknown On Thursday, May 26, 2011 No comments

image by: superdit.comSee Demo at the bottom of the page.With the new features that CSS3 have creating a variety of button. In this example, radius of the border, padding the button, the height and width modified, it can look like a circle. And added the rotateX property that currently only supported in web kit browser, to make it look like from different angle.This all the simple code.<!DOCTYPE [...]

Friday, May 20, 2011

Background Animations Using MooTools

Posted by Unknown On Friday, May 20, 2011 No comments

One of the sweet effects made easy by JavaScript frameworks like MooTools and jQuery is animation. Here's a quick MooTools code snippet that shows how you can add animating a background image to any element on a page. The CSS #animate-area { background-image:url(clouds.png); background-position:0px 0px; background-repeat:repeat-x; } The first step is assigning the image as a background image for [...]

Sunday, May 8, 2011

Cursor Following Menu for Blogger

Posted by Unknown On Sunday, May 08, 2011 No comments

image by manos.malihu.grThe idea behind the script was to create a floating navigation that follows the moving cursor throughout the page. The goal was to make the menu itself as minimal as possible with “discreet” float animation to avoid obtrusiveness and help usability. The end result features simple markup, two levels navigation and styling via css. An extra feature included in the plugin is the [...]

Tuesday, May 3, 2011

Rotating Image Slider with jQuery

Posted by Unknown On Tuesday, May 03, 2011 No comments

image by tympanus.netView Demo DownloadIn the following tutorial we will create an asymmetrical image slider with a little twist: when sliding the pictures we will slightly rotate them and delay the sliding of each element. The unusual shape of the slider is created by some elements placement and the use of thick borders. We will also add an autoplay option and the mousewheel functionality.We’ll [...]

Pages 71234 »