Fun 3d CSS3 Effect for wp-Pagenavi Plugin

Alright, this won’t be much of a tutorial per se. I’ve just been messing around a fair bit with a sh’load of code lately. I’m trying to overhaul my blog. Thing is, I’m not good at this stuff. I guess I’m not a designer. I can figure out how to code what I want… I just don’t know what I want. This is gonna take months. I figured I’d share some fun stuff as I make it up! So here is something for the popular wp-pagenavi plugin!

I took this idea from somewhere, and added some other stuff to it!! lol. Seriously it’s a mishmash of things I saw and ideas in my head. What I’m trying to do with the theme is keep it light and lean. But, have a couple of fun features. Here’s an image of the navigation style I came up with full of 3D and CSS3 goodness.

It’s got nice hover tile effects, etc. I thought it was pretty fun looking, thought maybe someone could grab it and run with it! Anyway, here’s what it took to get that going:

/*--------------------------------------
	PAGENAVI
--------------------------------------*/
.wp-pagenavi {
	position: relative;
	width: 90%;
  	-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
	-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
	background: #8b8b8b; /* for non-css3 browsers */
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#a9a9a9', endColorstr='#7a7a7a'); /* for IE */
	background: -webkit-gradient(linear, left top, left bottom, from(#a9a9a9), to(#7a7a7a)); /* for webkit browsers */
	background: -moz-linear-gradient(top,  #a9a9a9,  #7a7a7a); /* for firefox 3.6+ */
	-moz-border-radius: 8px;
	border-radius: 8px;
	padding: 0.5em 1.5em;
	color: rgba(0,0,0, .8);
	text-shadow: 0 1px 0 #fff;
	line-height: 1.5;
	margin: 10px auto;
	}

.wp-pagenavi:before, .wp-pagenavi:after {
	z-index: -1;
	position: absolute;
	content: "";
	bottom: 15px;
	left: 10px;
	width: 50%;
	top: 60%;
	max-width:300px;
	background: rgba(0, 0, 0, 0.7);
	-webkit-box-shadow: 0 15px 10px rgba(0,0,0, 0.7);
	-moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
	box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
	-webkit-transform: rotate(-3deg);
	-moz-transform: rotate(-3deg);
	-o-transform: rotate(-3deg);
	-ms-transform: rotate(-3deg);
	transform: rotate(-3deg);
	}

.wp-pagenavi:after {
	-webkit-transform: rotate(3deg);
	-moz-transform: rotate(3deg);
	-o-transform: rotate(3deg);
	-ms-transform: rotate(3deg);
	transform: rotate(3deg);
	right: 10px;
	left: auto;
	}
.wp-pagenavi a, .wp-pagenavi a:link, .wp-pagenavi:visited {
	font-size: 20px;
	font-weight: bold;
	text-decoration: none;
	color: #0066cc;
	font-weight: bold;
	color: #fff;
	padding: 10px 20px;
	border-style: none;
	background-color: rgba(0,0,0,0);
	text-shadow: #000 0 2px 2px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
	display: inline-block;
	}
.wp-pagenavi a:visited {
	}
.wp-pagenavi a:hover {
	-moz-box-shadow: rgba(255,255,255,.28) 0px 1px 1px, inset rgba(0,0,0,.5) 0 1px 4px;
	-webkit-box-shadow: rgba(255,255,255,.28) 0px 1px 1px, inset rgba(0,0,0,.5) 0 1px 4px;
	box-shadow: rgba(255,255,255,.28) 0px 1px 1px, inset rgba(0,0,0,.5) 0 1px 4px;
	background-image: -moz-linear-gradient(top, rgba(0,0,0,.1) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,.2) 100%);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.1)), color-stop(30%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,.2)));
	background-image: -webkit-linear-gradient(top, rgba(0,0,0,.1) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,.2) 100%);
	background-image: -o-linear-gradient(top, rgba(0,0,0,.1) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,.2) 100%);
	background-image: linear-gradient(top, rgba(0,0,0,.1) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,.2) 100%);
	-moz-background-clip: padding-box;
	-webkit-background-clip: padding-box;
	background-clip: padding-box;
	}
.wp-pagenavi a:active {
	background: rgba(0,0,0,.3);
	-moz-box-shadow: rgba(255,255,255,.28) 0px 1px 1px, inset rgba(0,0,0,.5) 0 1px 6px;
	-webkit-box-shadow: rgba(255,255,255,.28) 0px 1px 1px, inset rgba(0,0,0,.5) 0 1px 6px;
	box-shadow: rgba(255,255,255,.28) 0px 1px 1px, inset rgba(0,0,0,.5) 0 1px 6px;
	}
.wp-pagenavi span.pages {
	font-size: 20px;
	font-weight: bold;
	text-decoration: none;
	color: #0066cc;
	font-weight: bold;
	color: #fff;
	padding: 10px 20px 10px 0px;
	border-style: none;
	background-color: rgba(0,0,0,0);
	text-shadow: #000 0 2px 2px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
	display: inline-block;
	}
.wp-pagenavi span.current {
	font-size: 20px;
	font-weight: bold;
	text-decoration: none;
	color: #0066cc;
	font-weight: bold;
	color: #fff;
	padding: 10px 20px;
	border-style: none;
	background: rgba(0,0,0,.3);
	-moz-box-shadow: rgba(255,255,255,.28) 0px 1px 1px, inset rgba(0,0,0,.5) 0 1px 6px;
	-webkit-box-shadow: rgba(255,255,255,.28) 0px 1px 1px, inset rgba(0,0,0,.5) 0 1px 6px;
	box-shadow: rgba(255,255,255,.28) 0px 1px 1px, inset rgba(0,0,0,.5) 0 1px 6px;
	text-shadow: #000 0 2px 2px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
	display: inline-block;
	}
.wp-pagenavi span.extend {
	}

Hey, I said it looked cool…. I definitely didn’t say it was easy to type up! Lucky for you copy and paste is a lot easier! I recommend ensuring wp-pagenavi’s default styling is off. I always drop this in functions.php to make sure no styling interferes with mine:

add_action( 'wp_print_styles', 'voodoo_navi_style', 100 );
function voodoo_navi_style() {
	wp_deregister_style( 'wp-pagenavi' );
}

Grab that and do some stuff to it! I”d love to see how you adapt it to fit your site. Or if you have any other cool pagenavi styles, I’d love to see those too!

17 Replies to “Fun 3d CSS3 Effect for wp-Pagenavi Plugin”

    1. Code Canyon always has nifty stuff! I saw their pagenavi styles when I was hunting around. Nothing over there suited my fancy, so I had to come up with what I did above. With a little playing around, a lot of cool stuff can be done to style up the page numbers!

Leave a Reply