Chop Slider :: CSS3 animation

This awesome slider with a chopping effect was last updated on June 20, 2011. The ChopSlider uses full power of CSS3 animation, has own CSS3 support detection and even old or Internet Explorer support it, a little bit different but still awesome. It will be free under the MIT license, once released. The creator still runing some tests.

View DemoDownload

How to Make All Browsers Render HTML5 Mark-up Correctly – Even IE6

HTML 5 provides some great new features for web designers who want to code readable, semantically-meaningful layouts. However, support for HTML 5 is still evolving, and Internet Explorer is the last to add support. In this tutorial, we’ll create a common layout using some of HTML 5′s new semantic elements, then use JavaScript and CSS to make our design backwards-compatible with Internet Explorer. Yes, even IE 6.

View DemoDownload

Wonderful photo effects Photoshop tutorials

Collapsing Site Navigation with jQuery

A collapsing menu that contains vertical navigation bars and a slide out content area. When hovering over a menu item, an image slides down from the top and a submenu slides up from the bottom. Clicking on one of the submenu items will make the whole menu collapse like a card deck and the respective content area will slide out.

View Demo Download

Embed fonts into CSS using Google Web Fonts API

 

Google Web Fonts lets you browse all the fonts available via the Google Web Fonts API. All fonts in the directory are available for use on your website under an open source license and are served by Google servers.

Google Web Fonts lets you browse all the fonts available via the Google Web Fonts API. All fonts in the directory are available for use on your website under an open source license and are served by Google servers.

Google Web Fonts are a great way to get started using new typefaces on the web without paying for a service like Typekit.

Google Web Fonts is the best way to add amazing new free fonts to your site. Google web fonts are web safe fonts, which can be added to any site by adding a few simple lines of code to your html.

Enthused by the new font technology and with the intention to improve our web design fonts,  we tested out the Google web fonts. And it was much easier than I thought and was compatible with most web browsers.

Try Google web fonts, as there are some really amazing web fonts out there and amaze your readers. You can add as many free web fonts as you like. Which is your favorite Google web font?

View Demo

Sliding Panel Photo Wall Gallery with jQuery

 

The idea is to have a whole page full of thumbs with a nice light effect when we hover. When an image is clicked, a panel slides up from the bottom revealing the full picture. When clicking on the full image, the thumbs panel slide back from the bottom. This effect will give the impression that we are stacking the panels on top of each other every time we change the mode. In the full picture view we add some nice transition effect when we browse through the photos.

In addition, we will use a function for resizing the full image, adapting it to the size of the screen. So, when the screen get’s resized, our image will adapt automatically!

View Demo
Download

css3 JQuery Animated Tabs

Tabs is used for utilizing space and keep some stylish effects on website. jQuery tabs are very popular and it created some fancy look on web pages. I created a simple in use but a fancy looking jquery and css based tabs to give you and example. I used css to make it in some rounded style. Its doesnt work for IE but its fine in Firefox and Chrome.

View Demo Download