Beautiful pagination with CSS3
Written by Anthony Karassavov on Wed, Apr 28th 2010, 18:50 in CSS and Design
Today I had to do some styling for a web store. One of my tasks was to convert the beautiful pagination numbers, done in Photoshop into HTML & CSS. As I started slicing the graphics, it came to my mind that all of this could be easily done with CSS3. Unfortunately, it looks fancy only if you view the page with a current stable version of FF, Safari or Chrome. Anyway, here's what I accomplished with a few lines of css and a very simple piece of markup:
This is how it looks like in the forementioned browsers. Here is a live example so you can check it out for yourself. I used line gradients, box shadows and rounded corners to get this done. Oh, I almost forgot to show you what it looks like in our favourite "browser-like" monstrosity from Microsoft:
Can you spot the differences?
I checked out the link and I have to admit that it's pretty good as well, even better than mine :) Thanks for sharing
Reply
That's pretty nice. It is hard to believe that all this is accomplished without using any images at all (saves so much traffic :). Here's another very good example, which also utilizes CSS3 properties http://girliemac.com/blog/2009/04/30/css3-gradients-no-image-aqua-button/
Reply
tell me what you think
If you liked the article and want to contribute to it, please feel free to leave your comment. HTML tags are not allowed, but you can use the following BBCode to enhance your message: [url] [quote] [code] [b] [i] [u] [color].
So who is anthony anyway?
i am anthony - an all-around web developer with a degree in business. I like to code functional websites with beautiful interfaces. PHP, javascript and espresso is a powerful combination.
Lately
Your voice
The usual stuff
Thoughts and notes from a web developer