A netbook friendly CWD

I’ve just pushed some new code into the upcoming 2.3 (Dallas Dhu) release that is going to make the CWD a lot friendly on netbooks and other devices with smaller screens.

Currently if you’re running a browser that supports the border-image CSS3 property then you will get the sexy shadow around the main content container however on smaller screens this produced a nasty horizontal scroll bar. Now only browsers that support the border-image property and CSS media queries (Firefox 3.1+, Safari 3+, Opera 10.5+, IE9+) will get the shadow.

To have a play with the new code go here http://lost.lincoln.ac.uk/cwd/2.3/examples/23.html and try resizing your browser.

For the CSS wizards amongst you, the magic piece of code that does this is:

@media screen and (min-width: 1050px) {
.borderimage body {
background:url("http://lost.lincoln.ac.uk/cwd/2.3/img/bodybg.jpg") repeat-x #FFFFFF;
}
.borderimage .shadow{
-moz-border-image:url(http://lost.lincoln.ac.uk/cwd/2.3/img/shadow.png) 0 30 30 30 stretch stretch;
-webkit-border-image:url(http://lost.lincoln.ac.uk/cwd/2.3/img/shadow.png) 0 30 30 30 stretch stretch;
border-image:url(http://lost.lincoln.ac.uk/cwd/2.3/img/shadow.png) 0 30 30 30 stretch stretch;
border:30px solid #e7e7e7;border-top:none
}
}

Leave a Reply

Your email address will not be published.