In this post I'm going to show you how to create a Twitter header to be used with your tweets and how you can stylize it with CSS. You can reuse the following example in a significant variety of contexts. Let's start with the HTML markup:
<div id="tweets">
<h2><a href="http://www.twitter.com">Twitter</a></h2>
</div>
We have a container for our tweets and an heading element which, in turn, contains a link. Obviously you can change the link URL to make it point to your Twitter profile. The attached CSS code makes use of the following techniques:
- contextual positioning
- text replacement
#tweets {
margin: 0 auto;
padding: 2em 0;
width: 60%;
}
#tweets h2 {
margin: 0;
height: 3em;
background: #008eb9;
color: #fff;
position: relative;
-moz-border-radius: 6px;
border-radius: 6px;
}
#tweets h2 a {
display: block;
width: 130px;
height: 24px;
text-indent: -1000em;
background: url(twitter-header/twitter.gif) no-repeat;
position: absolute;
top: 1em;
left: 1em;
}
The heading element will create a contextual positioning using the declaration position: relative to allow us to correctly position the link element. The link element has a background image which will be shown instead of its text, that has been hidden using the text-indent property with a negative value. You can see the result here.