untuk download garuda vector klik HERE

untuk download garuda jpg klik HERE

–

Throw in the fact that Adobe Flash is a forbidden fruit in the world of iDevices, CSS and JQuery powered animations are going to rule the next generation of rich internet media. CSS3 allows designers to write light weight animations that can be easily embedded into web pages and best of all they don’t have to bind it with any license like with Flash which is a protected commercial platform.

We have handpicked our top 20 examples of great animations created using CSS3 and JavaScript. Some of these demos contain downloadable source files too so that you may play with them later on.

NOTE: CSS3 animations require a WebKit engine based browser which means you can only view them on Google Chrome or Apple Safari. Although some of them work on Firefox , most don’t.

1.  Image Gallery based on CSS3 Transitions

You won’t believe it but this image gallery has been completely designed using CSS and JQuery calls. CSS3 transitions have been used to create the event listeners. Chrome & Safari are fully supported but it also works fine on Firefox.

2. 3D Object Rotation Using Arrow Keys

Again, there is absolutely no Flash involved here. The coke can rotates as you scroll the bar to the right and the can looks like it’s a 3D object. CSS Displacement maps were used to create the illusion of  3D object movement.

3. 3D Object Rotation Using Arrow Keys

This sample gallery titled “Land of Nomads” is yet another beautiful example of a purely CSS based interactive Image gallery. You can click any image from the pack of jumbled images and it would be enlarged and moved to top left corner of your screen to make it prominent. See the speed of it’s load time since there is no Flash involved here.

4. Three Dimensional Space Simulation

Now this example is simply awesome. It’s not just images or animations, it’s complete space simulated in 3D right in your browser. You can only view it on Chrome and Safari. Probably there are multiple layers of images that give 3D effect when combined and rotated on their own axes. It’s all the play of writing a “spinner” in CSS and then timing it to make it 3D.

5. Rotating Color Band Timer

A perfect example that you can enlarge and make your wall-paper. The 3 color bands that revolve around the Hour, Minute and Seconds ticks are simply amazing. You cannot spot any delay in the movement of the bands as is usually the case with Flash. There is a bit of XHTML involved and you can also download the Clock simulation CSS files from here.

6. Elastic Thumbnail Menu

This will work great for any online product display website or website that has thumbnails spread over their pages. CSS has been used to animate the thumbnails so that when you hover over them, they are enlarged to make them prominent and also give an overall cool look. Definitely recommended for Shopping websites.

7. iTunes Like Slider in CSS

This animated icon tray runs really smooth in both Chrome and Safari and resembles the much acclaimed iTunes Icons Slider. You can move the icons right and left with the slider or with left and right keys. JQuery UI is used to give it the sleek look.

8. Animated DJ Discs

CSS is used in clever combination with JQuery to create this visual DJ that can be controlled with a mouse. You can actually rotate the discs with mouse and the sound pitch changes accordingly. Again, JQuery UI was employed to create the rotation motion effect.

9. Dynamic Index Card Stacks

This looks similar to the Image galleries we have reviewed so far but it’s not. The difference is in the way the cards come to the foreground and do not move around the screen. Previously these animations would have been written using the Adobe Flash platform but now the light weight CSS+JS has taken it’s spot. A cool application for this card stack would be using them in an online book reader. You can read the tutorial on how to make this animated card stack here.

10. Fixed Motion Animated Image Gallery

This is yet another Image Gallery created using pure CSS (not even JS). Images are jumbled up with their captions at the bottom right of the images. The hover over effect has been added so that the images rotate and align themselves when the cursor moves over one of the images.

11. Vertical Button Menus

Usually JS is used in creating dynamic animated button menus for websites but with pure CSS3 that is now possible without any JS at all. The proof is this demo showing vertical menu bars with different number of button ordered vertically and which respond to hover-over event of the mouse. This demo is by Toby Pitman, an acclaimed CSS/web designer.

12. Docking Menu

This menu is designed and written using SVG and CSS3 Transition (a previous review used Transitions to create animated Image gallery). Just like the Stack of Cards example, here the menu items respond to the hover-over event they are enlarged and brought forward when you move your cursor over them. The total programming that goes behind this animated menu is not more then one page and creates this stunning user friendly menu!

13. Movable Sticky Notes

This is simply awesome. You wouldn’t recognize that CSS is used in creating these animated sticky notes. You can create new notes on the browser page, edit them with full text alignment support, move them around and then delete them right from within the browser without any Flash involved. HTML5 Client side Data storage concepts are used to hold the data written on the notes. This is true UI in action!

14. Snowball Effect

You might have seen this snowfall effect before where it was written in JS , but here they’ve used CSS3 Sliders to write the snowfall effect. It may be Summer heat out but this snowfall effect can add a cool feeling to your pages without taking any extra processing as is the case with Flash whose FLV decoder puts a lot of load on the CPU.

15. Cartoon Animation

Now we also have animated cartoons, not just animated images done completely in CSS. This demo by CSSPlay UK definitely shows the potential of creating rich content on the internet using CSS and JS. You have to keep the mouse moving over the frame to keep the animation running. In the Firefox version, you have to keep clicking your mouse to keep the animation running. A smart use of CSS Selectors made this happen.

16. Dynamic Animated Content Gallery

Something that was previously done using the Adobe Flash dynamic-button event handlers is now completed done using JQuery UI with CSS3 and what you have is a complete dynamic content gallery. In this demo, a matrix of thumbnail sized images are on display and each image responds to the hover-over event and a card is created next to the cursor with the information of that image. Everything is handled dynamically with out any delay at all. The images are of presidents of countries around the globe. You will have to click download on the page to proceed to this animated gallery.

17. Tab Slider

This is an impressive example from CSS Ninja where tabs containing a title bar with some content in plain text are arranged in close order. They expand upon clicking them and contract again when another tab is clicked. The content is static but the animations are done in real time. The accordion effect of CSS3 is used here to create this animated tabbed text. You can download the source files for this demo from here.

18. Completely Animated AT-AT Walker

The capability of animating multiple objects in a frame simultaneously in CSS3 has been demonstrated here with the robot AT-AT made up of many components and each one is moving in it’s own defined course at the same time. This gives an illusion of an object moving around in the frame. Even the background is changing according to the movement of AT-AT.

19. JQuery+CSS Sleek Menu

This is by far the best sliding button menu that CSS has to offer. Not only is it animated like the images in the CSS based gallery, but the thumbnail sized buttons change their color while in inactive mode. A button becomes visible with all its colors when you hover over it. A transparent layer is spread over non-active buttons while the cursor is on one of the buttons. The designer claims that Flash will be obsolete when animation this rich can be written using open standards of CSS3 and JQuery.

20. Dynamically Expanding and Movable Image Gallery

Yet another CSS based Image gallery but a lot different from the ones reviewed in the above examples. You can completely move around in the gallery with arrow keys. The gallery slides smoothly when moved and the images also are expanded upon hovering over them. Another proof-of-concept of what CSS3 could achieve.

Download wallpaper :

1900 x 1200 ,
1900 x 1080 ,
1680 x 1050 ,
1600 x 900

Final Image Preview

Lets get started!

Step 1.

Open up the original image in Photoshop, we will start by duplicating this image (Ctrl + J). As I have advised before, always name your layers.

Step 2.

Go to your Photoshop tools palette, and select the Pen Tool. If you are not familiar with how to use this tool, here is a good tutorial to get your started. (If you are new to using this tool, it can be a bit rough to get used to how it works, but after you get it down, it’s very useful).

Let’s trace around the entire vehicle without the background or shadow.

*Tip: When you are using the pen tool to trace around objects, turn the Fill property to 0% (Located at the top right corner of your layers palette). When tracing, zoom in so you can catch the details. Holding the space bar while scrolling up and down on your mouse allows you to zoom in and out of an object. Holding the space bar can also allow you to move your canvas around easier similar to the ‘hand tool’.

Step 3.

Once you have the shape of the vehicle completed, let’s make a selection of this shape. To make a selection from a shape, hold the Ctrl key on your keyboard and with your mouse, click on the vector mask thumbnail. If you did this correct, you will have dotted lines around your shape, from here, we will select the ‘Base’ layer and duplicate that selection area (Ctrl + J). Let’s name this new layer as ‘Vehicle’

Step. 4

Let’s now carry over the natural shadow that the vehicle had. Go back to the ‘Base’ layer and on your Photoshop tools palette, select the Lasso Tool. With the lasso tool, let’s draw a circle around the reflection and shadow of the vehicle. After the selection is made (be sure you are on the ‘Base’ layer), on your top menu, go to Select -> Feather (Ctrl + Alt + D) and make the feather radius to 50px. Let’s now duplicate this selection (Ctrl + J). Name this layer ‘Shadow’.

Step. 5

From this point, let’s turn off the visibility of the ‘Base’ layer. Create a new layer (Ctrl + Shift + N), and name this layer ‘Green Screen’. Fill it with red for now (this is just so you can see the background differences).

Step 6.

Its now time to blend our ‘shadow’ layer with the ‘green screen’ layer. Select the shadow layer, and on top of your layers palette, use the blending mode drop down and select ‘Linear Burn’.

Finally, we need to make the windows more realistic by making them see through. This is a tricky step so read carefully.

We will first start by tracing around the windows using the pen tool. You will end up with 3 layers in my example. To combine them all into one layer, highlight all 3 layers, and we will now merge them (Ctrl + E).

Let’s select our merged layer by holding Ctrl and with your mouse, clicking on the layer. Next, we will select the inverse selection (Ctrl + Shift + I).

Then while the inverse selection is selected, we will mask the ‘Vehicle’ layer.

After the vehicle layer has been masked, we will select the shape of the mask we just added by holding the Ctrl key and with your mouse clicking on the ‘Layer Mask Thumbnail’

Now, we need to select the inverse selection again (Ctrl + Shift + I). At this point you should be back with the selection (dotted lines) just around where the windows are.

With the window area still selected, go to your Photoshop tools palette and select the brush tool. Go to the Brush Pre Set Picker at the top left corner (by the top menu), and choose the Soft Round 100px Brush and also tone the brush opacity down to 50%.
At this time, you should now check on the bottom of your Photoshop palette to be sure that you have the foreground color set to white. Now brush the outer areas of the window lightly.

Your finally done! Now you can add some back drops in there for the final touch-ups.

Final Image Preview

Have any comments or questions? Feel free to let me know.

WordPress as the most popular blog service and CMS platform is one of the foremost software to have such plugins implemented. It is currently inconceivable to imagine any modern WordPress blog without such excellent jQuery plugins as accordions, slide and toggle stuff, various jQuery image viewers, tabs and menus that you might be already familiar with. Apart from the all that, jQuery plugins are highly essential for the embedding of social networks, contact forms, moreover it allows the moderating and validating of comments for submit and also offers the access to heaps of web resources.

With jQuery plugins it has virtually become possible to provide the top blog functionality as well as spectacular media content presentation, which are in fact the main objectives for each self-respecting blogger. Right now we’ll list down the best jQuery plugins found out there. They will guide you to obtain the results that you have always wanted online!

1. Showtime

While talking about presentating your content in a spectacular way we must never forget about good old slideshows. This is not new but still an effective method of representing your images using this simple plugin. Showtime offers several useful options that will make your gallery more user- and media-friendly.

2. Easing Slider

Display your media content easily with comfortable jQuery plugin for more user-friendly navigation.

3. Coin Slider

This is an excellent light-weight plugin with cool transition effects, flexible configuration and auto slide. Don’t forget that you can customize this plugin with the help of CSS.

4. 3D Carousel Menu FX

Impressive plugin that will add some spice to your website. 3D Carousel Menu FX has all possible rotations behaviors & speeds, roll over effects, tooltip and many more superb features.

5. Accordion FX

This is another classic jQuery plugin that creates beatiful accordion menu. Among its noble features we must mark out customizable width & height, advanced text effects, zoom image effects.

6. Accordion Image Menu

Our next light-weight plugin allows you to choose between horizontal and vertical position for the menus.Also you may like a new title background option.

7. Fancy Box

With installing Fancy Box to your blog you can change such options as border, margin width and color, zoom speed, animation type, close button position, overlay color and opacity.

8. Lightbox 2

Lightbox is a simple jQuery plugin that overlays images on the current page. It is very easy to setup and supports all modern browsers.

9. Multimedia jQuery Plugin

Add music, podcasts, videos and slideshow to your blog withour any problems due to excellent functionality provided by Multimedia jQuery Plugin.

10. Slider WordPress Plugin

Save your precious time with Slider plugin from SlideDeck. The plugin works really simple and allows you to post a slider live in minutes.

11. Flipping Book

Present your blog gallery via Flipping Book WordPress jQuery plugin that allows you to create original gallery with page flip effect directly from the administrator panel.

12. Pagebar

jQuery-Pagebar replaces next and prev links with original and modern pagebar. So it’s easy to navigate through many pages.

13. Colorbox

jQuery Colorbox is a superb plugin that offers you ten different design themes for your images and galleries.

14. Tweet Blender

Tweet Blender is a twitter widget which can be added to any WordPress blog. It supports multiple sources as inputs, advanced filtering and it has a unique caching system that works around Twitter’s API connection limits.

15. Polaroid Gallery

Overlay images as polaroid pictures on the current page or post with the help of Polaroid Gallery WordPress jQuery plugin.

16. Transitions WordPress Plugin

Transition Effects are extremely popular nowadays and this plugin will add them to your blog. It is very easy to use and install, also this script is compatible with the most of major browsers.

17. Insights

Writing posts has never been this much easy – with Insights plugin you can search your blog for posts, edit them or insert links, insert Flickr Images, Youtube videos, search Google, insert a Google Map and so on.

18. Comment Preview

This script allows the live comment preview without page reboot. It is really useful and light-weight plugin.

19. Simple Modal Contact Form

This is an Ajax-powered contact form plugin for WordPress.

20. Infinite Scroll

We are sure that you’ve heard about autopagerizers – frankly speaking this is plugin that creates one endless scroll page neglecting usage the next and prev buttons.

We’ve tried our best to fuel the growing appetite of our readers for more advanced articles, but recently we’ve been receiving more requests for carefully selected, useful round-ups. We are not big fans of lists either, but the format is useful and — if the resources are relevant — can be extremely helpful. Therefore, we’ve decided to add a couple of round-ups per month as a bonus to our regular articles. Instead of replacing the main articles, we will add round-ups on top of our regular schedule. If you don’t like round-ups or find them inappropriate, please feel free to skip them. How does this work for you?

In this post, we present 40 useful but obscure jQuery plug-ins that will hopefully help you improve the user experience on your websites. We look forward to your ideas and suggestions in the comments to this post.

Tips, Hints, Navigation

TipTip jQuery Plugin

TipTip detects the edges of the browser window and will make sure the tooltip stays within the current window size. As a result the tooltip will adjust itself to be displayed above, below, to the left or to the right of the element with TipTip applied to it, depending on what is necessary to stay within the browser window. TipTip is a very lightweight and intelligent custom tooltip jQuery plugin. It uses ZERO images and is completely customizable via CSS.

Contextual Slideout Tips With jQuery & CSS3

A set of contextual slideout tips with jQuery & CSS3, which are ideal for product pages and online tours.

jQuery Slider plugin (Safari style)

jQuery Slider is easy to use and multifunctional jQuery plugin.

jSquares

jSquares is a jQuery plugin that pops up an image and a description in an overlay on hover. It is basically identical to the image grid found on www.ted.com. Works like a charm in IE6+, FF 3+, Safari 3+ and Opera 10.

Nav-o-Matic

Single sprite navigation is great, but we all know it can get a little bit tedious. All that measuring of pixel perfect photoshop slices, careful coding of your CSS and subsequent calculator bashing is enough to drive anyone to start microwaving fluffy kittens. Wouldn’t it be great to have a fancy online tool to take care of all the boring stuff for you in a few simple clicks? Well wish no more…

Jquery Two Sided Multi Selector

This Plugin converts a multi select list into a two-sided multi-select list. This means you display a list of options in the left hand box and items you select are moved into the right hand box.

jQuery MegaMenu Plugin

jQuery Keyboard Navigation Plugin

The jQuery Keyboard Navigation Plugin provides the capability for elements on a page to be navigated and activated via the keyboard’s up, down, right and left arrow keys.

FullCalendar – Full-sized Calendar jQuery Plugin

FullCalendar is a jQuery plugin that provides a full-sized, drag & drop calendar like the one below. It uses AJAX to fetch events on-the-fly for each month and is easily configured to use your own feed format (an extension is provided for Google Calendar). It is visually customizable and exposes hooks for user-triggered events (like clicking or dragging an event).

Forms

iPhone Style Radio and Checkbox Switches using JQuery and CSS

A simple technique for creating radio button and checkbox switches with jQuery.

jQuery UI Selectmenu: An ARIA-Accessible Plugin for Styling a Custom HTML Select Element

Our latest contribution to labs is the selectmenu plugin, which is designed to duplicate and extend the functionality of a native HTML select element, and lets you customize the look and feel, add icons, and create hierarchy within the options. Best of all, it’s built with progressive enhancement and accessibility in mind, has all the native mouse and keyboard controls, and is ThemeRoller-ready.

A Better jQuery In-Field Label Plugin

This is a pretty nice effect, and it can really help to save space on forms. There are a billion different ways to implement this, and I don’t suggest you use the example from above because that was just a quick way to show the effect. So let’s walk through a couple of different implementation approaches and figure out the best way to implement this feature.

Sliding Labels

Tim Wright came up with a jQuery technique that presents labels in input fields by default but then slides them to the left (or up) rather than removing them on click. If JavaScript is turned off, the labels are displayed above the input fields. The small jQuery snippet works in all major browsers and can be used for input and textarea elements.

Login or Signup with jQuery

Some users doesn’t like to filling the registration form. So that I had implemented login and singup fields in same block just controlling with jquery and PHP. It’s is very simple javascript and basic PHP code.

Uniform – Sexy forms with jQuery

Have you ever wished you could style checkboxes, drop down menus, radio buttons, and file upload inputs? Ever wished you could control the look and feel of your form elements between all browsers? If so, Uniform is your new best friend. Uniform masks your standard form controls with custom themed controls. It works in sync with your real form elements to ensure accessibility and compatibility.

Slideshows and Galleries

jQuery Quicksand plugin

Reorder and filter items with a nice shuffling animation.

Nivo Slider: Slideshow jQuery Script

Nivo Slider is a simple and powerful jQuery image slider plug-in that fits the bill. The tool has nine unique transition effects built in, as well as plenty of options to fiddle with: for instance, you can define functions to be applied before and after the image has changed, set the animation speed and activate pause on hover.

#grid

#grid is a little tool that inserts a grid onto the Web page. You can hold the grid in place and toggle it between the foreground and background. To display the grid, just press a hot key on your keyboard, and you can set your own short keys to switch views. #grid comes set up with a 980 pixel-wide container, with 20-pixel gutters, and assumes one lead of 20 pixels. You can download the source code (JavaScript and CSS) and use classes for multiple grids.

Improving The Content

Dynamic Footnotes With CSS and jQuery

Lukas Mathis has come up with an elegant solution to improve user experience with footnotes: his jQuery script shows the content of footnotes as soon as the user indicates that they are interested in it – i.e. when they move the cursor over the footnote symbol.

jQuery Captify Plugin v1.1.3

Captify is a plugin for jQuery written by Brian Reavis to display simple, pretty image captions that appear on rollover. It has been tested on Firefox, Chrome, Safari, and the wretched Internet Explorer. Captify was inspired by ImageCaptions, another jQuery plugin for displaying captions like these. The goal of Captify is to be easy to use, small/simple, and completely ready for use in production environments (unlike ImageCaptions at the moment).

Copy to Clipboard with ZeroClipboard, Flash 10 and jQuery

With today’s post I will show you a contrived example to get you started. I eventually hope to add this to the contextMenu.js jQuery plugin that I use, but for now this should be pretty straight forward. I do want to note that in the demo and download I am loading the latest version of the jQuery library (1.3.1) from Google’s CDN for the first time in any of my posts. For more information on how to do this see the instructions from Google.

Layouts

Columnizer jQuery Plugin

This jQuery plugin will help you create a multi-column layout without complex CSS hacks. Works across all major browsers.

jQuery Grid Plugin

Charts and Graphs

Dygraphs: Create interactive graphs from open source Javascript library

Dygraphs is an open source JavaScript library that produces an interactive, zoom-able charts of the present time series. It is mainly designed to display the dense data sets and enable the users to explore and interpret them. It is a JavaScript Visualization Library.

gMap – Google Maps Plugin For jQuery

gMap is a lightweight jQuery plugin that helps you embed Google Maps into your website. With only 2 KB in size it is very flexible and highly customizable.

10 jQuery Plugins for Easier Google Map Installation

The plugins below offer not only an easier method to install a map, they also offer the option to add extra functionality, should you choose to need them. They also all come with a varied degree of docs, some are extensive and some non-existent, so choose your plugin wisely.

Images and Visual Effects

jQuery imageless buttons a la Google

This jQuery plugin is an attempt to recreate Google’s imageless buttons and prove that it doesn’t take a whole team of engineers and an endless cycle of code revision and quality control (their own words) to pull this off. I don’t know how Google did it, but my buttons automatically adapt to paddings and other styling you wish to use. They allow for a lot of stylistic customisatoin via a few lines of css while keeping all the display critical css rules hidden deep inside the plugin.

jQuery Presentation Plugin

jQuery Presentation Plugin: Say NO to Keynote!

jQuery pageSlide

This plugin allows any developer to recreate a similar interaction on their own website using a few simple lines of Javascript. By attaching the method to an anchor tag, pageSlide wraps the original body content into a wrapper and creates an additional block for the secondary content load. The slide is animated whenever the click event is invoked.

jqFancyTransitions: jQuery Image Rotator Plugin

jqFancyTransitions is easy-to-use jQuery plugin for displaying your photos as slideshow with fancy transition effects.

A demo of AD Gallery

A highly customizable gallery/showcase plugin for jQuery.

Pines Notify jQuery Plugin

Pines Notify’s features include: timed hiding with visual effects, sticky (no automatic hiding) notices, optional hide button, supports dynamically updating text, title, icon, type, stacks allow notice sets to stack independently, control stack direction and push to top or bottom.

Animate Panning Slideshow with jQuery

In today’s tutorial we’ll take the makings of a classic slideshow, but use a different kind of transition to animate between slides. It may not fit every project, but diversity is always welcome in the world of web design.

Sponsor Flip Wall With jQuery & CSS

Designing and coding a sponsors page is part of the developer’s life (at least the lucky developer’s life, if it is about a personal site of theirs). It, however, follows different rules than those for the other pages of the site. You have to find a way to fit a lot of information and organize it clearly, so that the emphasis is put on your sponsors, and not on other elements of your design.

Last Click

CofeeScript

CoffeeScript is a little programming language that compiles JavaScript while simplifying the code that developers actually have to deal with. It works with current JavaScript libraries and compiles clean code, leaving even comments intact. Once developers familiarize themselves with how CoffeeScript works, they could potentially save themselves a lot of time and headaches with the simplified code.

Brosho ‘Design in the Browser’ jQuery Plugin

With this Plugin you can style your markup right in your browser with a build-in element selector and CSS editor. Generate the CSS code of altered elements with one click and use it in your own stylesheet.

gameQuery – a javascript game engine with jQuery

gameQuery is a jQuery plug-in to help make javascript game development easier by adding some simple game-related classes. It’s still in an early stage of development and may change a lot in future versions. The project has a Google Code page where the SVN repository of the project is hosted and a twitter page where you can follow the daily progress of the development.

Mind-blowing JavaScript Experiments

The following JavaScript experiments demonstrates the amazing capabilities of the modern browsers such as Chrome and Safari. In this post I will showcase to you an array of experiments that will surely blows your mind off.

source : http://www.smashingmagazine.com/

Css cheat sheets always helpful for newbie designers as this make their job easy when they are learning new things in their starting of the career. This post have all type of CSS cheat sheet such as shorthand cheat sheet, css-specified cheat sheet,css shorthand cheat sheet.

We always try to provide very useful resources for designers. So, a few time before, we had provided top 10 free online css editor for web designers. And this time we are providing 12 valuable css cheat sheet for web designers.

I hope this will be useful for you and if you know any other which you feel suits in this list. Please be kind and feel free to share with out readers in the comments section below.

1) Blueprint CSS

2) CSS 3 Cheat Sheet

3) CSS Cheat Sheet

4) CSS Cheat Sheet V2

5) Practical CSS Cheat Sheet

6) CSS Shorthand Cheat Sheet

7) CSS Properties And Values

8 ) idea3 Cheat Sheet

9) CSS Style Sheet Quick Reference

10) CSS Specificity- Cheat Sheet

11) CSS Shorthand Cheat Sheet

12) CSS Cheat Sheets

source : http://resources.savedelete.com