You’ll learn to…
- Simplify your life with CSS3 selectors and transition effects
- Take advantage of pseudo-elements for styling
- Uncover less common techniques for common properties
- Enhance your designs with backgrounds, borders and masking
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
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.
Stephanie explains what you'll learn in this 90‑second preview…
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.