Twenty Ten Shadow Boxing

We are creating a new look for our website, which will be completed early June while looking at what we wanted we decided to use some shadows and rounded corners, the way we would do this is by creating graphics but we want a website with as few graphics as possible.

We are going to use CSS3 boxes and shadows while still having an alternate for non compatible browsers, we have tested this with a twenty ten child theme.

You can download the child theme here: Twenty Ten Boxes (729)


If we look at our website visitor browsers with Google Analytics we can see that a lot of older versions are still in use, we have to think of all visitors and make sure the visitor experience is good for all, many new browsers will not have the same legacy browsers as Internet Explorer and Fire Fox.

We test with  FireFox, Google Chrome and Internet Explorer, which covers about 86% of the visitors to our website.


Lets look at what percentage of older browsers are still in use, home users will likely upgrade to the latest where business users will have to look at things like the company intranet before choosing to upgrade a browser.

Internet Explorer




Twenty Ten

We are looking at just three areas of the twenty ten theme, the menu items, the main content wrapper and the images, we are adding shadows and round corners to the menu and just shadows to the wrapper and images.

This is how our changes look in a compatible browser using CSS3 borders and shadows.


Internet Explorer 9 has a compatibility feature so we can see how it will look in an older browsers


As you can see we have re-styled the menu and menu sub items.


Borders and Boxes

We are not going to get into the detail about these, we think it is better to be hands on and test different setups in a test environment, if you want more information then Google is a good friend and there are also CSS3 style generators that will produce the compatible variations.

This is how one of the box shadows looks in our download stylesheet file, have a look for a css3 generator and play is the best way to discover more about box shadows, moz and webkit are different browser support.

box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 5px 18px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);

And here is a rounded corners style block used for our menu items, the standard sequence of left (8px), bottom (0), top (8px) and right (0)

border-radius: 8px 0 8px 0;
-moz-border-radius:8px 0 8px 0;
-webkit-border-radius:8px 0 8px 0;


Here is the stylesheet from the download.

Theme Name: Twenty Ten Shadow Boxing
Theme URI:
Description: Twenty Ten Child, adding to the power of WordPress.
Author: Digital Raindrops
Author URI:
Template: twentyten
Version: 1.2
<div>License: GNU General Public License v2.0
License URI:
This theme, like WordPress, is licensed under the GPL.

/* =Reset default browser CSS. Based on work by Eric Meyer:
-------------------------------------------------------------- */

@import url('../twentyten/style.css');

#wrapper {
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 5px 18px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);

.attachment img,
.gallery img {
box-shadow: 1px 3px 5px rgba(0,0,0,0.2);
-moz-box-shadow: 1px 3px 5px rgba(0,0,0,0.2);
-webkit-box-shadow: 1px 3px 5px rgba(0,0,0,0.2);

#access {
padding-top: 5px;
background: #fff;

#access .menu-header, {
margin-left: 0;

#access .menu-header li, li {
color: #ccc;
border: solid 1px #f1f1f1;
margin-right: 5px;

#access a {
color: #444;
border-radius:8px 0px 8px 0px;
-moz-border-radius:8px 0px 8px 0px;
-webkit-border-radius:8px 0px 8px 0px;
box-shadow: 2px 3px 3px rgba(0,0,0,0.2);
-moz-box-shadow: 2px 3px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: 2px 3px 3px rgba(0,0,0,0.2);

#access li:hover > a,
#access ul ul :hover > a {
background: #888;
color: #fff;

#access ul ul a {
color: #fff;

#access ul li.current_page_item > a,
#access ul li.current-menu-ancestor > a,
#access ul li.current-menu-item > a,
#access ul li.current-menu-parent > a {
color: #fff;
background: #666;

* html #access ul li.current_page_item a,
* html #access ul li.current-menu-ancestor a,
* html #access ul li.current-menu-item a,
* html #access ul li.current-menu-parent a,
* html #access ul li a:hover {
color: #fff;
background: #666;


We do require your feedback to improve our themes and tutorials, please leave your comments good or bad.

Code disclaimer information

If this document contains programming examples, grants you a nonexclusive copyright license to use all programming code from which you can generate similar functions tailored to your own specific needs.

All sample code is provided by for learning illustrative purposes only.

These examples have not been thoroughly tested under all conditions., therefore, cannot guarantee or imply reliability, serviceability, or function of these examples.

All programs contained herein are provided to you “AS IS” without any warranties of any kind. The implied warranties of non-infringement, merchantability and fitness for a particular purpose are expressly disclaimed.


Registration and Membership is no longer required for downloading files or interacting with Digital Raindrops, posting a comment or topic in the forum does use Captcha to reduce spammers.

This website is a tool to support and promote WordPress and Artisteer theme development, please support, share and give credit for any benefits you gain from the tutorials on this website.

Leave a Reply


Connect with Us
Follow Digital Raindrops on Twitter Join Digital Raindrops on Facebook

Related Posts

Posted in Tips


We thought we would use the WordPress Twenty Eleven theme and the the Farbtastic color picker to colorize our theme from the website front page instead of the admin area. We have been looking at the $_SESSION variable, so we thought … Continue reading

Read More