Click here to view the demo!
A lot of people have been using CSS3 media queries recently to deliver different styles of their web site to users based on the size of their browser screen. Usually this comes in the form of a ‘normal’ 960px width site, and will also deliver a more condensed version for mobile platforms such as the iPad and smartphones. I decided to go a different route and create a demo that delivers content for a 960px width site, and also delivers an enhanced version for users with monitors that have a Full HD resolution (1920px width).
The site works best in webkit based browsers of course, but most of the quirks of older browers are brought up to speed using some different methods. I used CSS3PIE to enable most of the CSS3 properties used on the page to work in Internet Explorer 7 and 8. Media Queries are also a problem in IE 7-8, so I also employed a javascript project called css3-mediaqueries.js to enable them. While both of these methods have their quirks, they go a long way in helping to bring users with outdated browsers more advanced features.
Here is a list of some of the CSS3 features employed on this demo:
- Media Queries
- border-radius
- box-shadow
- linear-gradient
- text-shadow
- transitions
- @font-face
- RGBa/opacity
Please take a look at the demo I’ve created and feel free to browse the source to see how things were done. Users with a 1920px width monitor will get to see the CSS3 Media Query in action as it converts the site to a two column layout that takes advantage of the entire width of the site. Also, if anyone is wondering what the image slider is on the demo page, it is a jQuery slider called Nivo Slider.
Click here to view the demo!