The Power Of CSS: Pure CSS Effects With Demos-No Javascript

When you see below examples,you will understand the power of pure CSS and learn how to provide interactivity to your site We know that Javascript with jQuery is being used in web sites and blogs so much in the last few years and okey, it gives great interactivity. But this is not the only way. There is always an alternative and i think CSS is one of them.

1.Pure CSS Fish Eye Menu

Advanced CSS technique on styling a list of images with caption to make a fish eye menu.

DEMO

2.Pure CSS Animated Progress Bar

Here’s a simple demonstration of how you can create animated progress bar using pure css.

DEMO

3.Pure CSS LightBox, no Javascript

A lightbox that doesn’t require Javascript.

DEMO

4.How To Create a Pure CSS Polaroid Photo Gallery

A cool looking stack of Polaroid photos with pure CSS styling.

DEMO

5.Pure Css Image Resizer

This trick will display larger image on mouse over and give an effect of real resized image.

DEMO

6.3D Button Effect

This is a simple effect of a button being pushed.

DEMO

7.Create the Accordion Effect Using CSS3

A stylish accordion effect only with CSS3.

DEMO

8.Custom radio and checkbox inputs using CSS

Way of using CSS to create custom radio and checkbox inputs without JavaScript, that are accessible andkeyboard controlled.

DEMO

9.Futurebox,Lightbox without the Javascript and Target pseudo-class

A light box effect without Javascript

DEMO

10.Pure Css Data Chart

A simple data chart but you can use it effectively in various projects.

DEMO

11.How to Create a Fancy Image Gallery with CSS3

Another stylish and good example of using pure CSS

DEMO

12.Pure Css Image Gallery

How to show large images when thumbnails are rolled over.

DEMO

13.Fancy Image Hover Using CSS3

Create fancy image hover with CSS3.

DEMO

14.Animated Navigation Menu with CSS3

Create animated navigation menu with CSS3..Works in Safari and Chrome Only.If you want to see working example you can also find the jQuery coded version.

DEMO

15.CSS Image Switcher

Roll over a link, watch the image above change.

DEMO

16.CSS3 Dropdown Menu

Mac-like multi-level dropdown menu

DEMO

17.Elegant Drop Menu with CSS only

A simplest way to build a same effect by using CSS only.

DEMO

18.Bubble Effect with CSS

Create a similar menu with bubble effect by using CSS only.

DEMO

19.Sliding Image Gallery – CSS3 Transition Tutorial

DEMO

20.CSS Box-Reflect – reflection without JavaScript, and Photoshop

‘Box-reflect “allows a reflection of elements of the value and get its properties.

DEMO

21.Easily Turn Your Images Into Polaroids with CSS3

Polaroid style images with just CSS(no javascript).Demo works best in Safari 4.x and Chrome 5. In Firefox you won’t see the enlarging transition.

DEMO

22.Create a JQuery Content Slider Using Pure CSS

A slider using only CSS.Another good example of content slider.

DEMO

23.How to Create a Beautiful Dropdown Blogroll Without JavaScript

A good tutorial on how to create a dropdown blogroll.

DEMO

24.Sexy Bookmark Like Effect Using Pure Css

Create the famous bookmark plugin only with CSS.

DEMO

25.CSS Bubble Tooltips

Avoid cross-browser javascript when you can use css to make tooltips with less code.

DEMO

26.Create a fancy Web Form with Field Hints Using Only CSS3

A good example about field hints.When you click on the form field you will see a hint box.

DEMO

27.CSS3-only Horizontal Drop Line Tab Menu

Create a horizantal drop ine menu with only CSS.

DEMO

28.Image Map Built entirely Using CSS

Below is a sample image map that’s built entirely using CSS and XHTML.

DEMO

29.CSS Gradient Text Effect

Here is a simple CSS trick to show you how to create gradient text effect with a PNG image (pure CSS, no Javascript or Flash).

DEMO

30.CSS Image Maps: A Beginner’s Guide

How to create a CSS image map and add hover states to image map using a CSS background image sprite, as well as a “tooltip” like popup.

DEMO

31.How to Create a Cool Slide Out Panel with CSS3 only

A tutorial on how to build an animated slide out panel using only CSS3.

DEMO

32.Creating a Bubble Coda Style with CSS3

Create a tooltip using the famous coda style, which allows for an animated pop-up window that makes for a great effect.

DEMO

33.Creating an Animated CSS3 Horizontal Menu

Create a short tutorial about a animated menu just using CSS3

DEMO

34.CSS Navigation: No JavaScript, jQuery or Image Required

The code is repeating some list items. the popup tooltip, bullets and triangles all written by css.

DEMO

35.Pure CSS Timeline

A simple and clean looking timeline with some very straight forward markup.

DEMO

36.How to Create a Valid Non-Javascript Lightbox

It works in FF, Safari, Chrome, IE6, IE7 and IE8 and this article will explain how

DEMO

37.SlickMap CSS

SlickMap CSS is a simple stylesheet for displaying finished site maps directly from HTML unordered list navigation.

DEMO

38.CSS Vertical Navigation with Teaser

DEMO

39.Cross Browser Multi-Page Photograph Gallery

No javascript.Just CSS.Based on the look of Suckerfish HoverLightbox, this one uses my multi-page layout system but includes images instead of text.

DEMO

40.Add a “Loading” Icon to Your Larger Images

As you understand from the title,create your own preload images.

DEMO