Home arrow Style Sheets arrow Page 2 - More CSS Pagination Link Templates
STYLE SHEETS

More CSS Pagination Link Templates


If you want to extend the functionality of your website with a neat pagination mechanism, but aren't sure of how to give the page links an appealing look, then keep reading this tutorial. In a step-by-step fashion, youíll learn how to create several ready-to-use pagination templates with only a few straightforward CSS properties. This is the conclusion to a two-part article.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 2
December 14, 2011
TABLE OF CONTENTS:
  1. · More CSS Pagination Link Templates
  2. · Adding Borders and Background Colors

print this article
SEARCH DEVARTICLES

More CSS Pagination Link Templates - Adding Borders and Background Colors
(Page 2 of 2 )

Unquestionably, one of the most appealing aspects of CSS is that it makes it possible to generate engaging user interfacing elements with only some basic, straightforward properties, such as background colors and borders. If youíre doubtful of the veracity of my claim, take a look at the following code sample. It uses the aforementioned properties to polish the pagination links created previously: 

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Creating pagination links with CSS</title>
<style type="text/css">
body {
    padding: 0;
    margin: 0;
    background: #FFF;
    font: 0.8em Arial, Helvetica, sans-serif;
    color: #585858;
}
h1 {
    font-size: 3.9em;
    font-weight: bold;
    color: #B16110;
}
h2 {
    font-size: 2em;
    font-weight: bold;
    color: #B16110;
}
#wrapper {
    width: 660px;
    margin: 0 auto;
}
ul#pagelinks {
    list-style: none;
    height: 30px;
    padding: 15px 0 5px 78px;
    margin: 40px 0 20px 0;
    background: #FFC488;
}
ul#pagelinks li {
    display: inline;
    padding: 0 2px 0;
}
ul#pagelinks a {
    padding: 5px 9px;
    background: #FF8042;
    font-size: 1.3em;
    text-decoration: none;
    color: #FFF;
    border: 1px solid #FFF;
    box-shadow: 1px -1px 2px #FF915B;
}
ul#pagelinks a:hover {
    background: #B16110;
}
ul#pagelinks a.current {
    color: #FFF;
    background: none;
    border: none;
    font-weight: bold;
    box-shadow: none;
}
ul#pagelinks a.previous:hover, ul#pagelinks a.next:hover{
    color: #FFF;
}
ul#pagelinks a.previous-off, ul#pagelinks a.next-off {
   color: #FF915B;
   background: none;
   border: none;
   box-shadow: none;
}
</style>
</head>
<body>
<div id="wrapper">
    <header>   
        <h1>Creating pagination links with CSS</h1>
        <h2>Header section</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </header>
    <section>
        <h2>Content section</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet. Quisque rhoncus sodales sapien ac blandit. Nam lacus urna, commodo eget tincidunt vitae, ullamcorper at nulla. Vivamus ac iaculis justo.</p>
    </section>   
    <footer>
        <h2>Footer section</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet. Quisque rhoncus sodales sapien ac blandit. Nam lacus urna, commodo eget tincidunt vitae, ullamcorper at nulla. Vivamus ac iaculis justo.</p>
        <ul id="pagelinks">
            <li><a href="#" class="previous">&laquo; Previous</a></li>
            <li><a href="#">1</a></li>
            <li><a href="#" class="current">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li><a href="#">6</a></li>
            <li><a href="#">7</a></li>
            <li><a href="#">8</a></li>
            <li><a href="#">9</a></li>
            <li><a href="#" class="next">Next &raquo;</a></li>
        </ul>
    </footer>
</div>
</body>
</html>

As I just said, the styles assigned to the earlier pagination links are pretty common. They include a solid background color, a thin border of 1px and a subtle shadow. While somewhat basic, this approach allows you to create an eye-catching pagination template, which looks like this when rendered on the browser:

There you have it. I'm not saying that the image above depicts the most mind blowing template that youíll ever see in your life, but it presents a pretty sleek appearance, considering that its implementation only required the employment of a few simple CSS properties and nothing more.

While this is all well and good, surely youíre wondering if itís possible to create a pagination template which takes advantage of some facilities provided by CSS3, as the standard has plenty of them. Well, not surprisingly the answer is an absolute "yes!" In the next section Iíll be creating a final pagination template which will make use of a background image, some rounded corners and native shadows to decorate the target links.

CSS Rounded Corners, Shadows and Background Images

Unquestionably, building a set of pagination templates without creating one that exploits the goodies offered by CSS3 would be a cardinal sin. Since I donít want that on my conscience, below I created an entirely new template, which utilizes a few shadows and rounder corners to make the corresponding links look like rounded buttons. Have a look at it:

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Creating pagination links with CSS</title>
<style type="text/css">
body {
    padding: 0;
    margin: 0;
    background: #FFF;
    font: 0.8em Arial, Helvetica, sans-serif;
    color: #585858;
}
h1 {
    font-size: 3.9em;
    font-weight: bold;
    color: #8D3C88;
}
h2 {
    font-size: 2em;
    font-weight: bold;
    color: #8D3C88;
}
#wrapper {
    width: 660px;
    margin: 0 auto;
}
ul#pagelinks {
    list-style: none;
    padding: 15px 0 5px 72px;
    margin: 40px 0 20px 0;
}
ul#pagelinks li {
    display: inline;
    padding: 0 2px 0;
}
ul#pagelinks a {
    padding: 5px 9px;
    background: #E6A1E7 url("bg.png") left repeat-x;
    font-size: 1.3em;
    text-decoration: none;
    font-weight: bold;
    color: #602A5D;
    border: 1px solid #8D3C88;
    text-shadow: 0 1px 0 #E2AbE4;
    box-shadow: 0 0 2px #863B82;
    border-radius: 20px;
}
ul#pagelinks a:hover {
    background: #BC53B6;
    color: #602A5D;
}
ul#pagelinks a.current {
    color: #602A5D;
    background: none;
    border: none;
    text-shadow: none;
    box-shadow: none;
}
ul#pagelinks a.previous:hover, ul#pagelinks a.next:hover{
    color: #602A5D;
}
ul#pagelinks a.previous-off, ul#pagelinks a.next-off {
   color: #E796E8;
   background: none;
   border: none;
   text-shadow: none;
   box-shadow: none;
}
</style>
</head>
<body>
<div id="wrapper">
    <header>   
        <h1>Creating pagination links with CSS</h1>
        <h2>Header section</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </header>
    <section>
        <h2>Content section</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet. Quisque rhoncus sodales sapien ac blandit. Nam lacus urna, commodo eget tincidunt vitae, ullamcorper at nulla. Vivamus ac iaculis justo.</p>
    </section>   
    <footer>
        <h2>Footer section</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet. Quisque rhoncus sodales sapien ac blandit. Nam lacus urna, commodo eget tincidunt vitae, ullamcorper at nulla. Vivamus ac iaculis justo.</p>
        <ul id="pagelinks">
            <li><a href="#" class="previous">&laquo; Previous</a></li>
            <li><a href="#">1</a></li>
            <li><a href="#" class="current">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li><a href="#">6</a></li>
            <li><a href="#">7</a></li>
            <li><a href="#">8</a></li>
            <li><a href="#">9</a></li>
            <li><a href="#" class="next">Next &raquo;</a></li>
        </ul>
    </footer>
</div>
</body>
</html>

Effectively, in this case each link in the template has been assigned some rounded corners along with a soft shadow. In addition, the template uses a single background image to generate a gradient effect that can be rendered correctly by Internet Explorer as well (remember that itís possible to create all sorts of gradients with CSS3, but Microsoftís browser is only capable of achieving this with a proprietary filter, which will throw your standard CSS code straight into the trash can).

Finally, if youíre wondering what the background image looks like, here it is:

And last but not least, this is how the pagination template will be rendered when using a browser that supports CSS shadows and rounded corners:

Not too bad at all, right? As this image shows, itís quite simple to generate stylish pagination templates by using something as trivial as background colors, borders and shadows. Thus, now that you know how easy it is to make your page links look appealing to the human eye, kindle your spark of creativity and start creating your own templates!

Closing Remarks

Itís hard to believe, but weíve come to the end of this tutorial. Nevertheless, the trip has hopefully been instructive, since you learned how to create a decent number of CSS pagination templates, which are a breeze to set up and customize.

With such versatility within your reach, itís possible that you're tempted to make the templates a bit more dynamic by adding a pinch of JavaScript. Please keep in mind that your web page contents should always remain accessible to users, regardless of whether or not scripting has been enabled in the client. To sum up: if youíre planning to swim in the waters of JavaScript, do it responsibly. 

See you in the next web design tutorial!


DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

blog comments powered by Disqus
STYLE SHEETS ARTICLES

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials