Create a CSS3 Media Queries Easter Egg

A day does not pass without me seeing something about CSS3 Media Queries on the Internet. Be it a new article highlighting the pros or slating the cons, a tutorial showing you how to use them to create an 'iphone version' of your website or people tweeting about the module.

One thing has struck me about all this recently and that is; apart from us as web designers having a poke around a fellow designer newly finished site or clients site would anyone else re-size the browsers (if possible) and notice the changes that are put in place using this part of the CSS3 spec.

Whilst I was designing this blog (it's a perpetual work in progress) I thought it'd be kind of cool to add a slight colour change of the main background when the browser window is re-sized or for when your on an smart phone/iPhone or a iPad/Tablet/Netbook.

Whilst I was using the CSS3 media queries to set my widths for the appropriate 'mobile' devices I thought I'd use the new CSS3 transitions so that people on a big screen for if and when the re-size the browser would have a nice fade between colours.

I set about creating a quick test demo page to see what would happen, the css for this page is shown below.

Don't forget to resize your browser or flip your iPhone/iPad.

body {
	height: 100%;
	width:100%;
	background-color: #ccc;
	-webkit-transition: all 2s ease; /* Saf3.2+, Chrome */
	-moz-transition: all 2s ease; /* FF3.7+ */
	-o-transition: all 2s ease; /* Opera 10.5 */
	transition: all 2s ease;
	@media screen and (min-width:320px) {
		body { 
			background-color: black;
		}
	}
	@media screen and (min-width:480px) {
		body {
			background-color: red;
		}
	}
	@media screen and (min-width:768px) {
		body {
			background-color: blue;
		}
	}
	@media screen and (min-width:1024px) {
		body {
			background-color: green;
		}
	}

As you can see from the demo it was a quick 'test case' to see the idea in a really obvious way. On this site, hopefully, it is a little more subtle.

• #Design
• #Css