1.Pure CSS Fish Eye Menu
Advanced CSS technique on styling a list of images with caption to make a fish eye menu.
2.Pure CSS Animated Progress Bar
Here’s a simple demonstration of how you can create animated progress bar using pure css.
4.How To Create a Pure CSS Polaroid Photo Gallery
A cool looking stack of Polaroid photos with pure CSS styling.
5.Pure Css Image Resizer
This trick will display larger image on mouse over and give an effect of real resized image.
6.3D Button Effect
This is a simple effect of a button being pushed.
7.Create the Accordion Effect Using CSS3
A stylish accordion effect only with CSS3.
8.Custom radio and checkbox inputs using CSS
10.Pure Css Data Chart
A simple data chart but you can use it effectively in various projects.
11.How to Create a Fancy Image Gallery with CSS3
Another stylish and good example of using pure CSS
12.Pure Css Image Gallery
How to show large images when thumbnails are rolled over.
13.Fancy Image Hover Using CSS3
Create fancy image hover with CSS3.
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.
15.CSS Image Switcher
Roll over a link, watch the image above change.
16.CSS3 Dropdown Menu
Mac-like multi-level dropdown menu
17.Elegant Drop Menu with CSS only
A simplest way to build a same effect by using CSS only.
18.Bubble Effect with CSS
Create a similar menu with bubble effect by using CSS only.
19.Sliding Image Gallery – CSS3 Transition Tutorial
‘Box-reflect “allows a reflection of elements of the value and get its properties.
21.Easily Turn Your Images Into Polaroids with CSS3
22.Create a JQuery Content Slider Using Pure CSS
A slider using only CSS.Another good example of content slider.
A good tutorial on how to create a dropdown blogroll.
24.Sexy Bookmark Like Effect Using Pure Css
Create the famous bookmark plugin only with CSS.
25.CSS Bubble Tooltips
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.
27.CSS3-only Horizontal Drop Line Tab Menu
Create a horizantal drop ine menu with only CSS.
28.Image Map Built entirely Using CSS
Below is a sample image map that’s built entirely using CSS and XHTML.
29.CSS Gradient Text Effect
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.
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.
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.
33.Creating an Animated CSS3 Horizontal Menu
Create a short tutorial about a animated menu just using CSS3
The code is repeating some list items. the popup tooltip, bullets and triangles all written by css.
35.Pure CSS Timeline
A simple and clean looking timeline with some very straight forward markup.
It works in FF, Safari, Chrome, IE6, IE7 and IE8 and this article will explain how
SlickMap CSS is a simple stylesheet for displaying finished site maps directly from HTML unordered list navigation.
38.CSS Vertical Navigation with Teaser
39.Cross Browser Multi-Page Photograph Gallery
40.Add a “Loading” Icon to Your Larger Images
As you understand from the title,create your own preload images.
[…] post: The Power Of CSS:40 Totally Pure CSS Effects With Demos-No … This entry was posted on Tuesday, July 13th, 2010 at 1:35 pm and is filed under Uncategorized. […]
Great list and thank you for including our articles!
Awesome collection Arshad and thx for adding to of my tutorials ;o)
[…] Direct Link […]
Excellent list, thanks for the share.
sir thank for share, excellent list sir
Some great CSS features!
Will experiment with #34, #31 and #28.
Thanks for sharing buddy!
This is a superb list.
Thanks for sharing.