This is a repost promoting content originally published elsewhere. See more things Dan's reposted.
I am increasingly of the opinion that the general software engineering adage “Don’t Repeat Yourself” does not always apply to web development. Also, I found that web development classes in CS academia are not very realistic. These two problems turn out to have the same root cause: a lack of appreciation of what browsers do…
As I indicated in my last blog post, my new blog theme has a “pop up” Dan in the upper-left corner. Assuming that you’re not using Internet Explorer, then when you move your mouse cursor over it, my head will “duck” back behind the bar below it.
This is all done without any Javascript whatsoever: it’s pure CSS. Here’s how it’s done:
<div class="sixteen columns">
<div id="dans-creepy-head"></div>
<h1 id="site-title" class="graphic">
<a href="/" title="Scatmania">Scatmania</a>
</h1>
<span class="site-desc graphic">
The adventures and thoughts of "Scatman" Dan Q
</span>
</div>
The HTML for the header itself is pretty simple: there’s a container (the big blue bar) which contains, among other things, a <div> with the id "dans-creepy-head". That’s what we’ll be working with. Here’s the main CSS:
#dans-creepy-head {
position: absolute;
top: -24px;
left: 15px;
width: 123px;
height: 133px;
background: url(/dans-creepy-head.png) top left no-repeat;
transition: all 800ms;
-o-transition: all 800ms;
-webkit-transition: all 800ms;
-moz-transition: all 800ms;
}
#dans-creepy-head:hover {
top: 100px;
height: 60px;
}
The CSS sets a size, position, and background image to the <div>, in what is probably a familiar way. A :hover selector changes the style to increase the distance from the top of the container (from -24px to 100px) and to decrease the height, cropping the image (from 133px to 60px – this was necessary in this case to prevent the bottom of the image from escaping out from underneath the masking bar that it’s supposed to be “hiding behind”). With just that code, you’d have a perfectly workable “duck”, but with a jerky, one-step animation.
The transition directive (and browser-specific prefix versions -o-transition, -webkit-transition, and -moz-transition, for compatability) are what makes the magic happen. This element specifies that any ("all") style is changed on this element (whether via CSS directives, as in this case, or by a change of class or properties by a Javascript function), that a transition effect will be applied to those changes. My use of "all" is a lazy catch-all – I could have specified the individual properties ( top and height) that I was interested in changing, and even put different periods on each, but I’ll leave it to you to learn about CSS3 transition options for yourself. The 800ms is the duration of the transition: in my case, 0.8 seconds.
html.ie #dans-creepy-head:hover {
top: -24px;
height: 133px;
}
@media (max-width: 780px) {
#dans-creepy-head {
display: none;
}
}
I apply some CSS to prevent the :hover effect from taking place in Internet Explorer, which doesn’t support transitions. The "ie" class is applied to the <html> tag using Paul Irish’s technique, so it’s easy to detect and handle IE users without loading separate stylesheet files for them. And finally, in order to fit with my newly-responsive design, I make the pop-up head disappear when the window is under 780px wide (at which point there’d be a risk of it colliding with the title).
That’s all there is to it! A few lines of CSS, and you’ve got an animation that degrades gracefully. You could equally-well apply transformations to links (how about making them fade in or out, or change the position of their background image?) or, with a little Javascript, to your tabstrips and drop-down menus.
Well, it’s been over a year since I last updated the look-and-feel of my blog, so it felt like it was time for a redesign. The last theme was made during a period that I was just recovering from a gloomy patch, and that was reflected the design: full of heavy, dark reds, blacks, and greys, and it’s well-overdue a new look!
I was also keen to update the site to in line with the ideas and technologies that are becoming more commonplace in web design, nowadays… as well as using it as a playground for some of the more-interesting CSS3 features!
Key features of the new look include:
[spb_message color=”alert-warning” width=”1/1″ el_position=”first last”]Note that some of these features will only work in modern browsers, so Internet Explorer users might be out of luck![/spb_message]
As always, I’m keen to hear your feedback (yes, even from those of you who subscribe by RSS). So let me know what you think!
When ancient Roman typesetters or web designers were showcasing a design, and didn’t want the content of the (dummy) text on their mock-ups to distract the client… what did they use for their lorem ipsum text?
These are the kinds of things that bother me most when I’m doing typographic layout. That, and Internet Explorer’s consistently fucked-up interpretation of CSS.
This is a repost promoting content originally bookmarked via del.icio.us. See more del.icio.us imports or more things Dan's reposted.
Bookmarked via del.icio.us: Clean CSS – A Resource for Web Designers.
This is a repost promoting content originally bookmarked via del.icio.us. See more del.icio.us imports or more things Dan's reposted.
Bookmarked via del.icio.us: Roleover Image Maps In CSS.
Want to see something quite terrifying: DHTML Lemmings. I kid you not – this is scary shit, particularly when you realise that it’s all being done client-side, using script, over the web: no Flash, no Applets, no ActiveX <spits> – just pure unadulterated CSS and JavaScript. I got scared.