In my previous article we determined that your logo is not a <h1> and is in fact an image (<img />) in its own right. Now let’s cover some nice little tips and snippets for making the most of your markup and creating a nicer UX around it.
The techniques I’m going to cover can be found on my recently launched hub site hry.rbrts.me, but for the sake of clarity I have isolated them in a jsFiddle here.
So, if we know a logo needs to be an <img /> that’s easy enough, but what if we want hover styles on this image? Simple.
We’ll be wrapping the logo in an <a> so as to link back to the homepage, a common and good practice:
<a href="/" id="logo">
<img src="/img/logo.png" alt="Company logo">
</a>What we can do here is utilise this <a> and apply a sprited background image to it to provide our on/off hover states, thus:
#logo{
display:block;
width:100px; /* Width of logo */
height:100px; /* Height of logo */
background:url(/img/css/sprite.png);
}So now we have a background on the <a> surrounding our <img /> that we now need to git rid of.
We could do this by using a simple display:none; or more accessibly using:
#logo img{
position:absolute;
left:-9999px;
}Now we can no longer see the <img /> but we can see the background on the <a> behind it.
Now all we need is to move the sprite on :hover, thus:
#logo:hover{
background-position:0 -100px;
}So here we have a semantically sound logo, using (as we should be) an <img /> with the added benefit of being able to use sprites to give the logo hover effects.
There’s more…
There’s another little thing I’ve started doing which I really like. We have an image in the page semantically, but not functionally. Right clicking the logo won’t yield a view image context menu, instead it’ll just focus on the <a>.
What I like to do, which is a nice little touch, is to unhide the <img /> (i.e. get rid of the absolute positioning above) and instead just hide it with opacity:0; (or filter:alpha(opacity = 0); for IE). This means that the user can still right click the logo and be interacting with an image, but they still get your nice sprites on hover.
So we have an <a> with a background sprite which contains an invisible image that a user can still interact with; see it in situ or look at an isolated case. Try hovering and right clicking…
By Harry Roberts on Tuesday, August 2nd, 2011 in Web Development. Tags: Logo, Semantics, Web Standards | 18 Comments »
+
Chris Marsh said on 2 August, 2011 at 8:53 pm
Not sure about this Harry. If you think your h1 should be an img, then it seems silly to hide it. Why not absolutely position the img sprite within the anchor, and reposition it on hover?
#logo a { position:relative; }
#logo a img { position:absolute; top:0; }
#logo a:hover img { top:-100px; }
Something like that.
Chris Nager said on 2 August, 2011 at 8:54 pm
This logo markup is simple and elegant.
Harry Roberts said on 2 August, 2011 at 9:10 pm
@Chris Marsh: Your logo should be an image for semantic and not cosmetic reasons. Whether it’s hidden or not your logo should always be an
<img />. Further, it should be an unadulterated image, so making a sprite out of an inline<img />would ‘tamper’ with it.Using these methods you get all the semantics and purity of using an unadulterated image for your brand whilst leveraging existing markup to make use of the power of sprites. Pure separation of content and style; web standards 101.
Cheers,
H
Luca Degasperi said on 2 August, 2011 at 9:15 pm
That’s brilliant Harry!
Really a nice work, will use it for sure in one of my next projects. What about browsers like ie7 that don’t support opacity (at least not directly)? Should we sacrifice it?
Tell me what do you think about :)
Luca
Harry Roberts said on 2 August, 2011 at 9:29 pm
@Luca Degasperi: There is some IE syntax in the fiddle that’ll take care of this :)
hawaii web design said on 2 August, 2011 at 9:47 pm
I personally like it when a logo fades a little more in when you hover over it.
Luca Degasperi said on 2 August, 2011 at 10:11 pm
That’s the IE hack i meant, But I have another doubt: You are trying to make the semantically correct use of the img tag as a logo act like the incorrect method of using the H1, but in this process you added another resource the user has to download (the image and the background sprite). My question is: is it worth adding the resource for a more semantical thing?
Harry Roberts said on 2 August, 2011 at 10:28 pm
I see… Well to be honest you always need to exercise caution with non-standard CSS, so make the decision as/where you see fit.
As for the extra resource download; your sprite will/should contain more than just your logo, so it will have to be downloaded elsewhere on the page anyway.
If you look at the sprite I use you will see that it has to be downloaded for the social icons anyway so it actually doesn’t equate to another download :)
Christian Krammer said on 3 August, 2011 at 7:06 am
Niiiiice! Just at the right time. I am currently redesigning http://css3files.com and also choose to no longer rely on an
<h1>for the logo. I just now searched for a solution to deal with the image (I use no background-image, a real ) at lower resolutions (media queries). And the tip to use a background image and hide the normal one with opacity is really brilliant. Thanks.John Faulds said on 3 August, 2011 at 11:31 am
My personal approach is to always make the logo an img but on the home page of the site, wrap it in a h1 with the alt attribute containing the name of the company. On interior pages, the h1 becomes a span or div.
Keiron Lowe said on 3 August, 2011 at 12:21 pm
Personally I don’t think you should use the background image, just set a width and height and overflow hidden on the a tag, then use a negative margin on hover to make a hover effect.
Soh Tanaka wrote a post about this a while ago: http://www.sohtanaka.com/web-design/css-sprites-wout-background-images/
Harry Roberts said on 3 August, 2011 at 3:39 pm
@Keiron Lowe: As I state in my comment earlier the idea/whole point here is to not tamper with your brand, giving it the semantics and attention it deserves. Making an inline sprite would mean that your logo is no longer a pure image, and is in fact two logos in one.
Cheers,
H
Ted Goas said on 3 August, 2011 at 5:36 pm
This is awesome. What I like best is that it doesn’t involved extra markup (like an empty span) or the :before or :after selectors.
There’s no section at the bottom of your article dedicated to “making it work in IE”. Nice!
Craig Coles said on 8 August, 2011 at 10:06 pm
I always thought that the most semantic way to mark up your logo would be through:
This way, screen readers can still read the text of the logo, even no text is visible.
Ionut said on 24 August, 2011 at 9:00 am
I don’t know what to say about the filter IE property… it’s a big performance fail and I would restrict using that in simple use cases like the logo
Hutch said on 26 August, 2011 at 2:37 pm
Why are you hiding the img like this?
I’m not sure what the advantage is over what chris said.
You’re essentially loading the unhovered state twice, and hitting your server for extra bandwidth. User’s don’t notice semantic markup, but they sure do notice extra delays caused by heavier weight sites.
João Luís said on 14 September, 2011 at 7:04 pm
I’d never done it, but I’d do it this way:
1.Set the background to the hover image.
2.Place the inside the with full opacity. This way, the image should “cover” the hover image.
3.On hover, change the img opacity to 0. This way, you can even animate it via CSS.
João Luís said on 14 September, 2011 at 7:07 pm
I’d never done it, but I’d do it this way:
1.Set the a background to the hover image.
2.Place the img inside the a with full opacity. This way, the image should “cover” the hover image.
3.On hover, change the img opacity to 0. This way, you can even animate it via CSS.