The Designer’s Guide to CSS3
One way to put transformations to work is reuse visual assets. For example, you can produce a site’s logo in one size and then use CSS to scale it for various uses throughout the site. Another great idea is to use transformations to bring a static grid of photos to life (as seen in the screenshot below).
Keep in mind that many browsers aren’t yet able to render these transformations properly. So your design should be set up to function properly even if the elements are not transformed. For example, the same photo collage shown above works just fine in older browsers, it just doesn’t look as snazzy (below is the site above in an older version of Internet Explorer).
One radical example of CSS transformations is this experimental tool that applies text to a curve. It’s not something you’d use every day, but it demonstrates the types of things that will be possible in the near future. Below is some text I styled using this tool.
CSS3 transform resources
- Tool to preview and test CSS-based transformations
- Another CSS transformation generator
- Apply text to a path with transformations
Combing transformations with transitions
Transitions aren’t yet ready for prime time, but they’re relevant to the transformation topic. Transitions allow you to ease between two styles. For example, if you want a button to change colors when you mouse over it, you can use a transition to have it fade between the two colors. You can add transitions to create interactive transformations: Simple things like revealing a panel of links upon mousing over could be beautified by adding transitions.
CSS3 transition resources
- Generator to test CSS transformations with transitions
- A handy CSS easing and animation tool
- View some examples of CSS-based transitions
The specifications for 3D transformations are already in place, but few browsers support them yet. Regardless, it’s a great demonstration of what the future holds for CSS. In particular you should check out this demonstration of 3D transformations.
It’s mind-boggling what CSS3 makes possible. Certainly there’s nothing wrong with working with time-proven techniques. But as we move forward, you’ll find more and more design tricks are done in the browser.
CSS3 Resources from MyDesignShop.com
- The Book of CSS3: A Developer’s Guide to the Future of Web Design
- Pro HTML5 and CSS3 Design Patterns
- The Complete Idiot’s Guide to HTML5 and CSS3
- Designing with Progressive Enhancement: Building the Web That Works for Everyone