CSS2 allows you to specify stylesheet for specific media type such as screen or print. Now CSS3 makes it even more efficient by adding media queries. You can add expressions to media type to check for certain conditions and apply different stylesheets. For example, you can have one stylesheet for large displays and a different stylesheet specifically for mobile devices. It is quite powerful because it allows you to tailor to different resolutions and devices without changing the content. Continue on this post to read the tutorial and see some websites that make good use of media queries.
I will be speaking at Frontend 2010 conference along with a big list of famous designers. The event will take place in Oslo, Norway on September 1st & 2nd, 2010. I have a last minute free conference ticket to give away. Enter a comment in this post before Aug 24, 2010 for your chance to win a free ticket. If you are buying the conference tickets, enter "WDW" coupon code to save 10% discount.
Update: the winner is #58.
You may probably notice that I haven't been updating Web Designer Wall for a while. I've been working very hard on a new project called Themify, a premium WordPress theme shop. It is a collaboration with Darcy Clarke, who is an amazing developer. Each theme is packed a framework and bunch of custom widgets. With the framework, you can apply theme settings, style everything, apply skins, and import/export the setting data. Let me know what your thoughts. Also, don't forget to follow us on Twitter @themify.
I have a free FITC San Francisco to give away. To get it: you just need to enter a comment in this post before August 6, 2010 and the winner will be selected randomly. The event will take place in San Francisco between Aug 17th to 19th. If you are getting the tickets, use coupon code "wdwluv" to get 10% discount. For more information, visit the FITC website.
Update: the winner is #109
Some people hate it, some people love it, but undoubtedly it is preferred in a wide variety of situations, from banners and online videos to rich internet applications. I'm talking about Flash of course. Take the comic strip below as an example. It was animated with BannerSnack and output as a SWF file. Click to play it.
The other day I was trying to style CSS3 border-radius to image element and I realized that Firefox doesn't display border-radius on images. Then I figured a way to work around it — wrap a span tag around with the original image as a background-image. Thanks to Darcy Clarke for the jQuery code which does the magic tag wrapping automatically.