CSS Lint. CSS3 Media Queries Explained - Ubelly. CSS3 Media Queries allow you to serve your content whilst giving consideration to the size of the screen of the device that is viewing your site.
In this 25 minute talk about ‘responsive design’, Thomas Lewis (@tommylee on Twitter) explains why CSS3 Media Queries are important, how they work and how you can implement them today to create better websites. Nice to see Mr.Simon Collison (@colly) get a name check for excellent responsive design on colly.com: So if you want to know how to make your website respond to the size of the screen that is viewing it, you’ll learn how in this talk.
You can make your websites automatically scale and re-display depending on the size of the screen on the viewing device and even using clever CSS tricks to change the content that is being presented to the viewer. You can download this video on the session page: 250+ Resources to Help You Become a CSS Expert. CSS is the second-most-important thing you can master when it comes to web design, right after HTML.
And the capabilities of CSS can be staggering (especially with the new CSS3 standard already making appearances in some browsers). If you can imagine it, it’s likely someone has already figured out how to do it with CSS. Below are more than 250 resources for mastering CSS. While they’re not likely to make it any less staggering, they can help you master the techniques that will help set your designs apart from the crowd.
CSS3 Resources 30 Essential CSS3 Resources – A roundup of 30 great tutorials, tips, and other resources for what’s new in CSS3. 20 Useful Resources for Learning About CSS3 – A great collection of CSS3 tutorials. CSS3 Unleashed—Tips, Tricks and Techniques – A huge roundup of CSS3 resources broken down by category. 20 Very Useful CSS3 Tutorials – Another rundown of good tutorials for learning the new capabilities of CSS3. References and Cheatsheets Tutorials and Techniques. CSS3.0 Generator. CSS3 Generator. Perfect Full Page Background Image.
Learn Development at Frontend Masters This post was originally published on August 21, 2009 and is now updated as it has been entirely revised.
Both original methods are removed and now replaced by four new methods. The goal here is a background image on a website that covers the entire browser window at all times. Let’s put some specifics on it: Fills entire page with image, no white spaceScales image as neededRetains image proportions (aspect ratio)Image is centered on pageDoes not cause scrollbarsAs cross-browser compatible as possibleIsn’t some fancy shenanigans like Flash Image above credited to this site. Awesome, Easy, Progressive CSS3 Way We can do this purely through CSS thanks to the background-size property now in CSS3.
Works in: Safari 3+Chrome Whatever+IE 9+Opera 10+ (Opera 9.5 supported background-size but not the keywords)Firefox 3.6+ (Firefox 4 supports non-vendor prefixed version) View Demo CSS-Only Technique #1 Big thanks, as usual, to Doug Neiner for this alternate version. CSS Type Set.