The Tweet Moods aggregator
Recently I had this idea for a little pet project – to create a tweet aggregator site with a novelty theme. One of my main motivations for wanting to build this site was to have a chance to experiment with some CSS3 sorcery. When you make a website for yourself you have more freedom to be bold and experiment further than you would on a website for someone else.
Tweet Moods was built with the Monitter framework – a jQuery aggregator that pulls in tweets from the twitter API using JSON. On it’s own the framework isn’t anything exciting, but that gave me an idea to take it and see what could be done with it to make it more interesting.
Why Tweet Moods? A lot of people tweet their moods on a given day of the week, and there are the obvious trends of happy tweets on Fridays, and depressed tweets on Mondays. I thought it would be interesting to have a site that would let me see what people are saying. Once someone mentions a day of the week and the word “mood” then their tweet will appear in the tweet feed for that day.
For the look and feel of the site I wanted to apply some colour theory to my pages – associating different colours with the moods and days of the week. The most obvious one being the Monday blues. As you move through the week days the colours change, getting more vibrant towards the happier end of the week. And once we hit Friday it’s red “danger” time for the weekend.
The typeface used throughout the site is the stunning Franchise Bold from Derek Weathersbee. “Franchise is a powerful new display typeface meant to communicate your message quickly and with power.”
If you are a type lover, then you will love Franchise bold. And best of all… it is totally free, which meant that I could use this to embedd in the website using the CSS @font-face property. The typeface is in .ttf format by default, but I converted it to a .eot format to serve to IE users. Web font embedding is the way forward.
When you view the site in Chrome or Safari you will see the lovely CSS3 transitions in the site, but if you view it in Firefox you will see some of the CSS3 features, but not all. And if you stroll onto the website in IE then you will see the lovely Franchise Bold typeface, and some of the site loveliness, but none of the fancy interaction features. Afterall, it is an experiment and aimed to target the best browsers using the best current technologies.
A few code samples…
Some CSS code to do the left menu transitions:
text-shadow: 0px 0px 10px #FFF;
-o-transform:rotate(6deg);
-webkit-transform:rotate(6deg);
And to do the sleek colour fade in-out on the links:
a {
-webkit-transition-duration: .33s;
-webkit-transition-property: color, background, text-shadow;
-moz-transition-duration: .33s;
-moz-transition-property: color, background, text-shadow;
transition-duration: .33s;
transition-property: color, background, text-shadow;
}
a:hover {
-webkit-transition-timing-function: ease-out;
}
Smooth internal page scroll to hashlinks:
jQuery(function( $ ){
$.localScroll({
duration:900,
hash:true,
});
});
The feedback has generally been really good, and I haven’t really got any negative responses about the site bar a few people commenting on my use of the CSS3 effects. But the whole point of the site was to test how far I could push it visually, and to test the limits of the browsers with these new technologies.
I did actually push it too far at one stage and Chrome and Safari couldn’t handle some of the CSS3 div rotate transitions when using a fixed position so I had to adjust a few things before launching. So I certainly learned a few things along the way, and had some fun while I was at it. So in that sense, I guess it’s a mission accomplished.
Ha! You finally wrote the article. As I already said on twitter, I’m not such a huge fan of the amount of css3 effects you’re using. Then again this was a project to tryout some different things which css3 has to offer.
Franchise Bold is indeed a nice font. Did you just upload it your self and used @font-face with a link to the destination?
Yeah I uploaded the font files onto the server and called it into the top of the CSS like this:
@font-face {
font-family: Franchise;
src: url(‘fonts/Franchise-Bold.ttf’);
}
And for IE users…
@font-face {
font-family: Franchise;
src: url(‘fonts/Franchise-Bold.eot’);
}
There is a lot of CSS3 in use, but that is sort of the purpose of the website… to experiment with this stuff.
Hot damn, Mark!
I haven’t done very much w/the transitions yet. Working with rgba gradients, etc. I did find out that when you rotate type/divs to which you’ve applied text or box shadow effects, the effects are applied BEFORE the rotation. In other words, you need to have a unique text or box shadow rule for rotated elements that’s different from non-rotated elements to maintain consistent light source. ‘Top left’ becomes ‘bottom left’ if your element is rotated 90 degrees counter-clockwise.