UIE Virtual Seminar Presentation (How does this work?)

CSS3 Tips & Techniques for Designers

Stephanie (Sullivan) Rewis

W3Conversions.com

Length: 90 minutes

What You’ll Learn

• Simplify your life with CSS3 selectors and transition effects
• Take advantage of pseudo-elements for styling
• Uncover less common techniques for common properties
• Take control of your design through backgrounds, borders and masking

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.

Why Stephanie (Sullivan) Rewis?

Stephanie (Sullivan) Rewis is a prominent front-end developer, corporate trainer, and noted champion of web standards. She’s written some awesome books, like Mastering CSS with Dreamweaver CS4, contributes regularly to magazines like .NET, Web Designer Magazine and Computer Arts. A born teacher, she’s a highly regarded, in-demand trainer of corporate web teams of all sizes.

As an expert consultant brought in by clients and agencies to handle difficult projects, or as a top-notch lead web developer through her company W3Conversions, she’s worked with a dazzling spectrum of organizations from Newsweek, MLB, Adobe, New York Magazine, Freelancers Union, California State University Fresno, SalesForce.com, and Quiznos to Disney’s “TRON” — and for a lively bunch of startups. A vibrant, gregarious speaker at conferences worldwide, she zeroes in on the practical problem-solving that audiences are eager to hear.

Oh, and if you’ve gotta have more, Stephanie, with her husband Greg Rewis, will be teaching a full-day workshop at our UI16 Conference this fall: HTML5 and CSS3 – What Designers Need To Know.

Although she loves making websites fast-loading and lean, she loves beach volleyball and sailing even more. She spent her most recent vacation achieving the title of Almighty Catamaran Charter Captain, so it’s more likely you’ll catch up with her in the sands of the Caribbean than the sands of her business headquarters in Phoenix, AZ. She lives with her husband, Greg Rewis and three of their four boys. Her hobby, if only she had time? Studying brain function. Her guilty pleasure? Eighties music. "And I ran...I ran so far away..."

You can follow Stephanie on Twitter.

Looking for a sneak peek on what Stephanie will be talking about?

Here's a recent .NET article on background-size, and a blog post on box-shadow's spread property.

I Want the RECORDING $149

Get Lifetime Access to this seminar for your entire organization!

---