Tutorial Tuesday: Add a new dimension to your work with the Google Web Designer CSS Panel

Welcome to week three of our Google Web Designer Tutorial Tuesday series. So far, we have given you an overview of the tool’s interface and have helped you get started with animation. This week, we’re going to teach you about Google Web Designer’s CSS panel, which brings design and dimension to your creative. 

The CSS panel shows the styling for any element that you select. The panel has: 

All the basic features you need...

• View and edit existing CSS values
• Create new styles for a single element or multiple elements
• Add properties, classes and rules

...plus a full 3D authoring environment...

• Rotate elements in 3D with the 3D Object Rotate Tool
• Change the position of an element in 3D with the 3D Translation Tool

You can learn more about designing in 3D in the Help Center, and you can learn more about the CSS panel in our latest YouTube video. 

….and cross browser publishing

We take cross-browser support very seriously and we want to be the default choice for users building HTML5 content. For this reason, we’ve worked to ensure that Google Web Designer allows you to publish your content across a number of different browsers. While GWD’s CSS rules only show webkit browser prefixes, the tool generates additional CSS rules that make your creative compatible with IE10, Firefox and Opera in addition to webkit based browsers. Both the components and Javascript generated work with all evergreen browsers.

See you in two Tuesdays

There will be no Tutorial Tuesday post next week, as we want to give you time to catch up on everything we’ve covered so far. We’ll be back with our last Tutorial Tuesday post on 10/29, where we’ll walk through how to create interstitial and expandable ads. We have three instructional videos to help you with each type of ad, and you can view them all on the our YouTube Channel.

Share your feedback

We hope this blog series has been helpful for you. Please don’t hesitate to share your feedback with us on our user forum or our Google+ page. We’re always working to improve Google Web Designer, and your feedback counts.

Posted by Jasmine Rogers, Program Manager, Google Web Designer