Pure CSS Effects and Tips

CSS is an easy way to create effects on web sites. It is very difficult to write scripts and get required effects. This round up will give you not only specific effect rather CSS tips as well


Create a Lightbox effect only with CSS – no javascript needed

First one is 100% CSS, 0% javascript lightbox
pure css08 Pure CSS Effects and Tips

Pure Css Data Chart

We can develop a graph too
pure css11 Pure CSS Effects and Tips

CSS Graphs

CSS bar graph.
pure css12 Pure CSS Effects and Tips

Pure CSS Animated Progress Bar

Animated progress bar using pure css.
pure css01 Pure CSS Effects and Tips

add a loading icon to your larger images

To give an information to users that image is loading.
pure css02 Pure CSS Effects and Tips

How to Create Flick Animations with CSS

Want to get rid of Flash? animated gifs are making boar?

Well, why not try an alternative, CSS Flick animation That’s awsome!
pure css17 Pure CSS Effects and Tips

CSS Image Maps

A sample image map that’s built entirely using CSS and XHTML.
pure css03 Pure CSS Effects and Tips

Resizing Thumbnails Using Overflow Property

This tutorial is aimed at controlling the size of the thumbnails appearing on your page.
pure css04 Pure CSS Effects and Tips

Pure CSS LightBox

Pure CSS LightBox. Now you don’t need javascript.
pure css05 Pure CSS Effects and Tips

CSS-Only Accordion Effect: Vertical Accordian

CSS Accordion Effect. Nice trick!
pure css06 Pure CSS Effects and Tips

lixlpixel CSS tooltips

You can have a nice tooltip without JaveScript.
pure css07 Pure CSS Effects and Tips

CSS-only Drop-down Menus

This Drop down menu is driven completely through CSS rules; there’s no JavaScript involved at all.
pure css09 Pure CSS Effects and Tips

footerStickAlt

That allows for the footer of a Web page to appear either at the
bottom of the browser window or the bottom of the Web page content.
pure css14 Pure CSS Effects and Tips

CSS sticky footer

This is also a sticky footer sample.
pure css15 Pure CSS Effects and Tips

CSS Gradient Text Effect

A simple CSS trick to create gradient text effect with a PNG image.
pure css16 Pure CSS Effects and Tips

Menus – Multi-Level CSS Only

In this site you can find tons of samples! Let’s play CSS.
pure css10 Pure CSS Effects and Tips

Vertical scrolling tables

Very nice example of Fixed Table Header.
pure css13 Pure CSS Effects and Tips

3 Responses to “Pure CSS Effects and Tips”

  1. medical Technologist Reply 14. Dec, 2010 at 4:08 am

    Pretty nice post. I just stumbled upon your blog and wanted to say that I have really enjoyed browsing your blog posts. In any case I’ll be subscribing to your feed and I hope you write again soon!

  2. I do enjoy the manner in which you have framed this specific difficulty plus it does indeed provide me personally some fodder for consideration. Nonetheless, coming from what I have experienced, I basically wish when the comments pack on that men and women keep on point and not embark upon a soap box of some other news du jour. Still, thank you for this superb point and while I can not necessarily agree with the idea in totality, I regard the perspective.

Get Adobe Flash player