These are great times for front-end developers. After months of exaggerated excitement about HTML5 and CSS3, the web design community now starts coming up with CSS techniques that actually put newly available technologies to practical use instead of abusing them for pure aesthetic purposes. We see fewer “pure CSS images” and more advanced, clever CSS techniques that can actually improve the Web browsing experience of users. And that’s a good thing!
[Offtopic: by the way, did you already get your copy of the Smashing Book?]
Now Playing: transitions and animations with CSSMax Voltar showcases a fairly simple CSS design that uses transitions, animations and subtle hover-effects to produce an engaging user experience. Also, notice the use of favicons as background-images for attribute selectors. Unfortunately, the demo works best in Webkit-browsers, but it degrades gracefully in other modern browsers. Unfortunately, we didn’t find the documentation of the technique.
CSS3 Media QueriesCSS2 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.
Proportional leading with CSS3 Media QueriesA fluid layout should be responsive to the width of the columns of text. This problem, of proportional leading, is what holds many designers back from adopting fluid layouts. In this article, Andy Clarke explains how you can achieve proportional leading for your typography using CSS3 Media Queries.
Responsive Web DesignThis article by Ethan Marcotte explains how to use fluid grids, flexible images, and media queries to create elegant user experiences with responsive web design. Check out the demo — of course, don’t forget to resize the browser window.
Popout Details on Hover with CSSThis tutorial describes a technique that presents details of a content ... Lire la suite de l'article