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 29th Sep 2009 under CSS Tricks
Just to expand on yesterdays post, you can add icons for external links (http://) and mail links (mailto:) too.
To do this you simply change the $ to a ^.
So your basic code will look like the below:
a[href^="http://"] {
}
What that does is ignore everything after “http://” and displays an image of your choice, so that users know thats an external link.
For mail links simply swap out “http://” with “mailto:”, like so:
a[href^=["mailto:"] {
}
So below are the completed codes in all there glory!
a[href^="http://"] {
background: url(/images/external.png) no-repeat right top;
padding-bottom:5px;
padding-right:20px;
}
a[href^="mailto:"] {
background: url(/images/mail.png) no-repeat right top;
padding-bottom:5px;
padding-right:20px;
}
Good luck!
Daniel Newman says:
10th February, 2010 @ 23:48
I think you should have an example file or files for the user to download. As even though this is simple for you it would be great to see it in action.
matthewkirk says:
11th February, 2010 @ 9:52
@ Daniel Newman
I shall create a zip folder with various examples for users to download. Thanks for the feedback.