This email was part of the new MINI Convertible launch campaign.
This development carried on the same great feel as its predecessor, MINI Convertible Email – Vertical.
This email was part of the new MINI Convertible launch campaign.
This development was a nice challenge. The need to make sure the horizontal concept worked in all main browsers and email clients was essential.
Posted on 28th Sep 2009 under CSS Tricks
Ever wanted to display a logo depending on what link you are using? For instance, if you was linking to a .pdf, you could display the Adobe PDF logo. I know what you are thinking… genius!
This is all about the manipulation of the <a> tag.
Lets start a normal <a> tag in CSS, like so:
a {
}
All the details of what-is-what happens between the [ & ] (square brackets). So after the a add [], like so:
a[] {
}
Right, as I said we want to add the PDF logo to the .pdf extension. Between the [ & ] please add:
href$=".pdf"
The code should now look like this:
a[href$=".pdf"] {
}
Basically what we are doing there is looking for the href tag within the link and ignoring everything until it finds the .pdf extension.
So to display the image all we need to do is add a background image, like so:
a[href$=".pdf"] {
background: url(/images/page_pdf.png);
}
Remember to line up the image using background positioning and padding, like so:
a[href$=".pdf"] {
background: url(/images/page_pdf.png) top right;
padding-bottom:5px;
padding-right:20px;
}
And thats it! Below are some other variants for you to have a gander at!
a[href$=".doc"] {
background: url(/images/page_doc.png) top right;
padding-bottom:5px;
padding-right:20px;
}
a[href$=".rss"], a[href$=".rdf"] {
background: url(/images/feed.png) no-repeat right top;
padding-bottom:5px;
padding-right:20px;
}
Good luck, and try and make your own, let me know how you get on!
