The title is a bit funny! Making JavaScript angry! but truthfully we’re not going to make JavaScript angry. We just would like to introduce you some effects or solutions which you may think are made using Javascript (or his friends) but after reading this post, you would be proud of CSS! All of them are made using Pure CSS.
P.S. Some of the featured articles below are suitable for learning purposes and there are better solutions out there using jQuery or Javascript.
1. CSS Hover Effect
Learn how to use CSS to make hover effects for your content boxes.
2. CSS Gradient Text Effect
Here is a simple CSS trick to show you how to create gradient text effect with a PNG image (pure CSS, no Javascript or Flash).
3. Blurry Background Effect
Utilizing two images and CSS background-attachment property you can make a great CSS effect easily.
4. The CSS letterpress effect
This effect is getting so popular in today web design. With the help of the text-shadow CSS property you can easily implement this effect in your website/blog.
5. 3-state Button using CSS
Learn how to create a 3-state button using pure CSS image sprites.
6. Pure CSS Polaroid Photo Gallery
Make the beautiful photo gallery above just using CSS properties.
7. Pure CSS Animated Progress Bar
Here’s a simple demonstration of how you can create animated progress bar using pure css.
8. CSS Text Gradient
Improve your site appearance by using this technique by CSSG which uses a transparent PNG and some lines of pure CSS!
9. 4 Uber Cool CSS Techniques For Links
Including Pure CSS Tooltip, Pure CSS Image Gallery, Pure CSS Image Resizer, and 3d Button Effect.
10. Bubble Effect with CSS
In this tutorial you will learn how to make bubble effect with CSS something like apple dock.
11. Create Resizing Thumbnails Using CSS
“This tutorial is aimed at controlling the size of the thumbnails appearing on your page. Sometimes we don’t have enough space to spare to fit in large thumbnails and yet we would like to avoid small and barely recognizable images. Using this trick we limit the default dimensions of the thumb, and show it in full size when user mouse-overs it.â€
12. Pure Css Line Graph
Learn how to make line graphs with CSS and definition list elements (DL).
13. Pure CSS Data Chart
Data visualization is mostly achieved with flash applications or with help of some programming languages. But this tutorial will teach you create one by pure CSS.
14. CSS for Bar Graphs
In this tutorial, you will use CSS & XHTML to make beautiful bar graphs both vertical and horizontal. Another CSS Graph.
15. CSS Image Maps
Above is a sample image map that’s built entirely using CSS and XHTML
16. Pure CSS Lightbox
Yes, it’s a CSS-only lightbox effect right click on the demo page and view it’s source.
17. Change Text Selection Color With CSS
Learn how to override the default text selection color using CSS.
18. CSS Bubble Tooltips
Avoid cross-browser javascript when you can use css to make tooltips with less code. More Pure CSS Tooltips: 1 , 2 , 3
19. CSS Hover Effect
Multi-level drop-down menu that’s built entirely with CSS (without any JS).
More:
- Drop-Down Menus, Horizontal Style
- Elegant Drop Menu with CSS only
- GRC’s Script-Free Pure-CSS Menuing System
- Tutorial: CSS Multilevel Dropdown Menu
20. How to Create CSS Menu using Image Sprites
The number 19 was for multi-level CSS Menu, here you will learn how to create on-level image-based CSS menu with hover effect.
21. CSS Tabs
DOM tabs which will still work for javascript-disabled browsers
22. The CSS-Only Accordion Effect
Most JavaScript frameworks make such an effect fairly easy to pull off – heck, MooTools even built their reputation on it in the early days. So what makes this accordion effect special? It doesn’t require a single line of JavaScript.
23. Cross-browser drop shadows using pure CSS
This tutorial tries to provide a solution to make a cross-browser drop shadows using CSS. There are some advantages and disadvantages using the technique.
Written by Mohsen
Mohsen is a Web/Wordpress designer and a blogger. He currently designs WordPress themes, writes for Webanthology, and studying computer. Follow him on twitter
32,149 total views, 1 views today
(10 votes, average: 4.20 out of 5)
Loading...
What's your idea?