CSS3 Tips & Techniques for Designers

With all the buzz surrounding HTML5 today, it's easy to forget that CSS has also been evolving and now offers exciting new capabilities for designers and front-end developers alike. And even if you have begun to look at CSS3, chances are you haven't ventured too far past a rounded corner here and there or perhaps the occasional box shadow.

With the evolution of CSS, there are lots of added features that can completely change not only the way you design for the web, but also the way that your designs are turned into code—making the designer/developer relationship smoother. Stephanie (Sullivan) Rewis shows you how to leverage some of the more advanced CSS3 features to streamline page production and maintenance, reduce bandwidth requirements, and deliver more flexible designs.

Simplify your life with CSS3 selectors and transition effects

Ever handed off a PSD to developer only to get something completely different back? With CSS3, you can utilize powerful selectors to identify exactly what behavior or styling should apply to a given element – giving you the ability to create impressive UI enhancements. And why settle for static elements when CSS3 also provides the tools to call attention to UI changes with transforms and transitions.

• Target specific elements in your page with attributes or states and save on development time and maintenance in the process
• Utilize a variety of transition triggers—including JavaScript–that reach far beyond simple :hover effects to enhance your designs and their usability

Take advantage of pseudo-elements for styling

Some designs are hard to implement in HTML and CSS without lots of non-semantic code – causing wasted bandwidth and maintenance headaches. With pseudo-elements—a type of selector—we can save bandwidth and http requests by getting rid of needless wrappers and extra, strictly decorative images on the page.

• Add decorative images without cluttering the actual page markup
• Create entire elements and extra wrappers using pure CSS to super-charge your page styling

Uncover less common techniques for common properties

Even if you understand some of the more basic CSS3 properties like box-shadow and border-radius, you may not realize the full creative power that these seemingly simple properties can unleash. With a little imagination, you can bend the rules and even make a square peg go into a round hole!

• Create elliptical corners and fully flexible, accessible circles without images
• Leverage spread values of the box-shadow property to create the illusion of multiple borders on a single element

Enhance your designs with backgrounds, borders and masking

Backgrounds and borders have been a small, limited part of the web professional’s toolbox since the early days of the web – but with CSS3, they become a full-blown creative powerhouse, allowing you to solve previously daunting layout challenges.

• Achieve greater flexibility and accessibility with granular control of background images and borders
• Save page weight when developing for mobile using the webkit-only masking property

With CSS3, designers can finally achieve the designs they envision—without having to compromise or resort to browser hacks and non-semantic mark-up. Whether you write the code yourself, or just work with individuals that do, this seminar will break down the barriers and open your mind to what is possible with these exciting, advanced CSS3 tricks and techniques.

Warning: This may all sound like some geeky hocus-pocus. But don’t be afraid, Stephanie has a way of making geeky easy to understand and magic seem as simple as tying your shoe. Best of all, you’ll leave this seminar with tips and techniques you can put to work immediately in your projects.

Using real world examples, Stephanie will take you beyond the basics, on a deep dive of practical CSS3 techniques that will ensure you’re getting the most out of CSS3.