15+ Pure CSS Effects and Tips

Most of designers and developers don’t want to use any scripts for effects on their sites or blogs. They want use effects which made using pure CSS styles. In this article you will find some effects of pure CSS and you will see here tips related to CSS.

Create a Lightbox effect only with CSS – no javascript needed

100% CSS, 0% javascript lightbox, this may help you.

Pure Css Data Chart

You can have a graph too.

CSS Graphs

Here is also css bar graphs.

Pure CSS Animated Progress Bar

A simple demonstration of how you can create animated progress bar using pure css.

add a loading icon to your larger images

If you want to let visitors know that the image is loading, That’s nice tips.

How to Create Flick Animations with CSS

Fed up with Flash? Getting annoyed with animated gifs? Well, why not try an alternative, CSS Flick Animation. That’s awsome!

CSS Image Maps

A sample image map that’s built entirely using CSS and XHTML.

Resizing Thumbnails Using Overflow Property

This tutorial is aimed at controlling the size of the thumbnails appearing on your page.

Pure CSS LightBox

Pure CSS LightBox. Now you don’t need javascript.

CSS-Only Accordion Effect: Vertical Accordian

CSS Accordion Effect. Nice trick!

lixlpixel CSS tooltips

You can have a nice tooltip without JaveScript.

CSS-only Drop-down Menus

This Drop down menu is driven completely through CSS rules; there’s no JavaScript involved at all.

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.

CSS sticky footer

This is also a sticky footer sample.

CSS Gradient Text Effect

Here is a simple CSS trick to show you how to create gradient text effect with a PNG image.

Menus – Multi-Level CSS Only

In this site you can find tons of samples! Let’s play CSS.

Vertical scrolling tables

This is a useful sample of Fixed Table Header.