Messing about with CSS3
Am branching out more into CSS3, basically further than simple box-shadow, text-shadow and border-radius attributes. The most recent find is using background-size and multiple text-shadow attributes.
Size matters
It’s bugged me for a while that I couldn’t control how large background images displayed on some website without resorting to crude implementations with hacked img elements or tables for structure (shudder). However the latest ALA article: Supersize that Background Please! by Bobby van der Sluis gives me a really simple and workable solution that I was hitherto unaware of.
The gist of it is that by using the much ignored background-size attribute you can make any background image set within your CSS re-size relatively to your browser viewport. So a super sized image will be super sized on a big screen, but scale down nicely on a smaller resolution. The real magic is that the aspect ratio is kept, so you don’t get any strange image squashing you might otherwise get.
So in short the (truncated) CSS code looks like this:
body { -moz-background-size: cover; background-size: cover;}
So far I’ve implemented it on News for Gloucestershire and plan to do the same on a couple of other sites I have in the kitbag. I’ve only tested it in Firefox and Chrome, but it does degrade nicely in IE8 simply by giving you the background image as if the CSS code was ignored. Not great, but acceptable. What I couldn’t get to work was the @media declaration, which resulted in all things contained above the declaration in my stylesheet rendering fine, but everything else going screwy. That’s one for another day though as I need and want to get my head around media queries.
Flaming towers of Godzilla
As seen on Chris Coyer’s tutorial, originally inspired by David Desandro’s site, I’ve taken the same kind of concept but applied it to header and footer text to help lift (literally) off the page on a recent client project: Your Health Club UK. The code is relatively easy to understand once you realise you can stack the text-shadow property:
h1, h2 , h3{ text-shadow: #DE6422 1px 1px 0px, #DE6422 2px 2px 0px, #DE6422 3px 3px 0px; }
So far so good. Now to tackle @media declarations!
Trackbacks