Sometimes you want to add something extra to your web design, maybe to highlight a new or important feature. These 10 CSS-only web design tricks will certainly help you get inspired to achieve the look you want.
CSS-Only Web Designs
Image Source: Flickr
CSS3 Hover Animation – CSS-only web design
This is one of my favorite pen’s so far, it’s simple yet useful, and don’t forget functional. Instead of having two buttons, you can have one like this.
Animicons: Sprite Animation Using Icon Fonts
These don’t seem to work in Firefox, try Chrome. It simply animates icons to move – like a gif. The idea is great, however too many of these on a page might give the user a headache.
3D Text in Sass – CSS-only web design
This is a fantastic idea and it really looks like a real 3D rendering. I might even be using it for my website in the near future.
CSS Image Slider: With next/prev buttons – CSS-only web design
There are a bunch of these around the web, I do however like this one the best. It’s responsive and shows exactly where the next/prev click-area is located.
Menu Slider – CSS-only web design
You might have seen this feature on a few websites, I really like it, but you have to consider following your themes current flow.
Text Resizer: while typing
Very smart idea, if you have little to write/search for, you have the big text. If you have more, the text changes font-size and you can see the whole search term, unless you write a lot.
CSS Stacked Paper Effect – CSS-only web design
I really like this effect, it adds depth to a page and it looks great.
Set of Icons – CSS-only web design
Some very nice looking icons to use if you only want to use CSS.
Moving Blobs – CSS-only web design
These don’t seem to work in Firefox, try Chrome. It looks crazy, but it will definitely gain your users attention.
Page Flip modal dialog
A pretty clever feature, when you click a button the page flips and shows a message. If I had a function for it, I’d use it.