Pure CSS Effects and Tips (Does not use JavaScript)

If you don’t want to use any more Script. But you want to have some effects on your blog or site.

Pure CSS effects and tips may be the answer…

In this post you will see some Pure CSS effects and tips (Does not use JavaScript).

You don’t have to use a Script and you will have great effects only-css!

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

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

CSS-only Drop-down Menus

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



Menus – Multi-Level CSS Only

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


Menus - Multi-Level CSS Only

Pure Css Data Chart

You can have a graph too.


Pure Css Data Chart

http://applestooranges.com/blog/post/css-for-bar-graphs/

Here is also css bar graphs.



Vertical scrolling tables

This is a useful sample of Fixed Table Header.


Vertical scrolling tables

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.



Tags: ,

[Slashdot]   [Digg]   [Reddit]   [del.icio.us]   [Facebook]   [Technorati]   [Google]   [StumbleUpon]  

6 Responses to “Pure CSS Effects and Tips (Does not use JavaScript)”

  1. vike Says:

    Thanks for the post
    extremely helpful

    Please correct the link in “How to Create Flick Animations with CSS” (i’m not posting the right one here to avoid disturbing spam filters:) but first link in google is correct one)

  2. admin Says:

    Hi vike!
    Thank you for letting me know that.
    I just crrected the link.

  3. the site company Says:

    nice effects, i love the gradient text effects but i’m confused as to what the sticky footer is supposed t to be

  4. Umair Says:

    Css Tips.We need more tips and tricks about div and css.

  5. Aakash Says:

    Thanks dear,
    Very nice Tricks.
    I m gonna use these.

  6. Kapil Khandelwal Says:

    This is great, it reveals secrets of valid css and enforses its ability to style webpages greately.

Leave a Reply