15+ Pure CSS Effects and Tips

By -
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.
Create a Lightbox effect only with CSS - no javascript needed

Pure Css Data Chart

You can have a graph too.
Pure Css Data Chart

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.
Pure CSS Animated Progress Bar

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!
How to Create Flick Animations with CSS

CSS Image Maps

A sample image map that's built entirely using CSS and XHTML.
CSS Image Maps

Resizing Thumbnails Using Overflow Property

This tutorial is aimed at controlling the size of the thumbnails appearing on your page.
Resizing Thumbnails Using Overflow Property

Pure CSS LightBox

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

CSS-Only Accordion Effect: Vertical Accordian

CSS Accordion Effect. Nice trick!

lixlpixel CSS tooltips

You can have a nice tooltip without JaveScript.
lixlpixel CSS tooltips

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.
footerStickAlt

CSS sticky footer

This is also a sticky footer sample.
CSS sticky footer

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.
Menus - Multi-Level CSS Only

Vertical scrolling tables

This is a useful sample of Fixed Table Header.
Vertical scrolling tables

DesignDazzling is sharing interesting and useful content which is coming from skilled and relating to the topics like Blogging, creative designs, developer tools, free tutorials, useful web resources, CSS, Fonts, WordPress, Tutorials, Web Designing, HTML, Inspiration, Free Templates, online Freebies for web designers and web developers.

2 Comments to 15+ Pure CSS Effects and Tips

Leave a Reply

Your email address will not be published. Required fields are marked *

Best Bootstrap Tutorials