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)

Browsers

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.

shadow6

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

shadow4

FireFox

shadow3

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.

shadow2

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

shadow5

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

shadow1

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;

style.css

Here is the stylesheet from the download.

/*
Theme Name: Twenty Ten Shadow Boxing
Theme URI: http://digitalraindrops.net/
Description: Twenty Ten Child, adding to the power of WordPress.
Author: Digital Raindrops
Author URI: http://digitalraindrops.net/
Template: twentyten
Version: 1.2
<div>License: GNU General Public License v2.0
License URI: http://www.gnu.org/licenses/gpl-2.0.html
This theme, like WordPress, is licensed under the GPL.
*/

/* =Reset default browser CSS. Based on work by Eric Meyer:http://meyerweb.com/eric/tools/css/reset/index.html
-------------------------------------------------------------- */

@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);
}

img.size-auto,
img.size-full,
img.size-large,
img.size-medium,
.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, div.menu {
margin-left: 0;
}

#access .menu-header li,
div.menu 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;
}

Notices

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, www.DigitalRaindrops.net 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 http://DigitalRaindrops.net for learning illustrative purposes only.

These examples have not been thoroughly tested under all conditions. www.DigitalRaindrops.net, 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.

Membership

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

Connections

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

Related Posts

Posted in Tips

colorizer-1_thumb.png

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