How to Use the CSS Properties Panel in Fireworks CS6

Learning and using CSS styles isn’t easy if you aren’t familiar with how it works. It can be difficult to visualize how a part of your website is going to look by just looking at the code. In Fireworks CS6, they have included an amazing feature to make styling your website quick and easy. The feature I am referring to is CSS Properties. Now, in Fireworks CS6, you can design visually, copy the code, and paste it into your stylesheet.

First, create a new document, and set the dimensions to 1024px x 768px. You can create guides to make the page 960px wide, like you would see in a normal site. Select the Rectangle Tool and draw a rectangle within the guides. This Rectangle will represent a normal div. Select Drop Shadow under Effects and set the softness to 4 and the angle to 270°. The result should look similar to the example below.

Screen Shot 2012-08-15 at 12.03.33 AM

The great part about the CSS Properties Panel, is that it literally does all of the calculations for you. You will notice that in the CSS Properties panel, you will see a lot of information. In the top area, it tells you the RGB values of the color of the selected object, and it even tells you the width and height. These values are essential, especially if this Fireworks file is being created as a mockup for your actual design.  You won’t have to spend time calculating and looking at your images files to see how large your images are, or how large or small to make a div. It takes the guess work and the leg work out of laying out your site via CSS Styles.

Screen Shot 2012-08-15 at 12.29.23 AM

You will notice in the shot above that directly under the basic properties for your object, it shows how to create this object with CSS. Firefox takes into account the different browsers and versions, and creates the CSS for the properties and styles for those browsers. Let’s take a look at how the code is broken down.

background-color:rgb(153,153,153);
width:959px;
height:272px;
/* Firefox v3.5+ */
-moz-box-shadow:0px 7px 4px rgba(0,0,0,0.65);
/* Safari v3.0+ and by Chrome v0.2+ */
-webkit-box-shadow:0px 7px 4px rgba(0,0,0,0.65);
/* Firefox v4.0+ , Safari v5.1+ , Chrome v10.0+, IE v10+ and by Opera v10.5+ */
box-shadow:0px 7px 4px rgba(0,0,0,0.65);
-ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=7,Color=#a5000000,Positive=true)";
filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=7,Color=#a5000000,Positive=true);

The first few values determine the same values as we saw in our basic properties, which are the RGB values, as well as the width and height. The items with /**/ wrapped around them denote comments, which tell you which browsers the following CSS works for. Fireworks handles the CSS for Firefox, Safari, Chrome, Internet Explorer and Opera. It goes as far as integrating the CSS for different versions of Firefox as well. At the bottom of the panel, you can uncheck the different browsers, but I am not sure why you would want to do this, since the point of CSS and professional web design is for your client’s site to look as consistent as possible across multiple platforms. Click the clipboard icon to copy the css from Fireworks, and then you can easily paste directly into your text editor, or Dreamweaver.

Screen Shot 2012-08-15 at 12.54.11 AM

Paste the Code in your Code editor. I pasted it into the stylesheet for my demo page in Dreamweaver. As you can see, the image above looks nearly identical to the object in Fireworks. You can preview this in each browser to ensure consistency. One thing that you need to consider is that you will still need to know and understand some CSS principles, such as margin and padding in order to make your site and layout look the way that you want it to.

Box Shadow isn’t the only CSS property that you can create within Fireworks. You can create rounded corners as well. Select the Rounded Rectangle Tool and draw a smaller rectangle that is roughly a third of the 960px width of the active area of the document. Select the Yellow diamond and drag it toward the corner to adjust the roundness of the corner. With the rounded rectangle selected, you will see the CSS Styles in the CSS Properties Panel, which you can copy and paste in Dreamweaver. Since we will have 3 rounded rectangles, create a div class and create 3 copies.

Screen Shot 2012-08-15 at 1.30.21 AM

Refer to the Selector in your stylesheet and paste the styles in the stylesheet in Dreamweaver. To get the rounded rectangles to flow in a horizontal row, you have to add 2 more lines of code to the CSS properties that we retrieved from Fireworks, shown below.

margin: 20px 20px;
display:inline-block;

The results are three rounded rectangles in a row, with plenty of margin between each one. Fireworks handles all of the prefixes for you, so that your rounded corners will show up in Chrome, Firefox and Safari.
Screen Shot 2012-08-15 at 1.50.52 AM

Text shadow has not been forgotten in the CSS Properties Panel. Design your type with a drop shadow, done the way that you want it, and Fireworks creates the CSS for it. In the example, I create black text created from Helvetica Bold, and I gave it a red drop shadow. Fireworks calculates all of the values, even the CSS for the text-shadow property. Below is a shot of what this looks like in Fireworks:

Screen Shot 2012-08-15 at 2.02.59 AM

And there you have it — here’s an example after we copy and paste the code from Fireworks to Dreamweaver:

Screen Shot 2012-08-15 at 2.10.16 AM

Gradients

Gradients are a huge issue in CSS. I consider myself an expert-level designer, and I have used gradients in some of my projects, but there is no way I would ever imagine that I would ever be able to remember all of the code to display a gradient in most browsers using CSS. You end up with 10-20 lines of CSS just to display one gradient. This is where the CSS Properties Panel in Fireworks really shines. In Foreworks, you can create your gradient, and all of the CSS instantly populates the CSS Properties Panel. Below is an example of a blue gradient rendered in Fireworks, and the same one rendered in Firefox with CSS.

Fireworks:

Screen shot 2012-08-15 at 9.03.53 AM

Here is the CSS for the gradient:

/* Firefox v3.6+ */
background-image:-moz-linear-gradient(50% 0% -90deg,rgb(38,201,255) 0%,rgb(0,105,140) 100%);
/* safari v4.0+ and by Chrome v3.0+ */
background-image:-webkit-gradient(linear,50% 0%,50% 100%,color-stop(0, rgb(38,201,255)),color-stop(1, rgb(0,105,140)));
/* Chrome v10.0+ and by safari nightly build*/
background-image:-webkit-linear-gradient(-90deg,rgb(38,201,255) 0%,rgb(0,105,140) 100%);
/* Opera v11.10+ */
background-image:-o-linear-gradient(-90deg,rgb(38,201,255) 0%,rgb(0,105,140) 100%);
/* IE v10+ */
background-image:-ms-linear-gradient(-90deg,rgb(38,201,255) 0%,rgb(0,105,140) 100%);
background-image:linear-gradient(-90deg,rgb(38,201,255) 0%,rgb(0,105,140) 100%);
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff26c9ff,endColorstr=#ff00698c,GradientType=0)";
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff26c9ff,endColorstr=#ff00698c,GradientType=0);

Here is the Output in Firefox:

Screen shot 2012-08-15 at 9.08.36 AM

Conclusion

As you can see in the examples above, the CSS Properties Panel in Fireworks is a huge time saver. Now, you can design elements of your websites visually, copy the styles, and paste them in your stylesheets. Hard-to-remember CSS, such as the gradient shown above, is no longer an issue, because you can design and tweak the gradient visually in Fireworks, and then paste the CSS into the stylesheet of your website. This new feature alone is worth upgrading to Fireworks CS6, and if you use Fireworks to make mockups of your websites, the time you will save with this one feature will be worth the cost of upgrading.

What do you think about the new CSS Properties Panel in Fireworks CS6? Do you think it is something that you would use?

 

If you liked this article, please help spread the news on the following sites:

  • Bump It
  • Blend It
  • Bookmark on Delicious
  • Stumble It
  • Float This
  • Reddit This
  • Share on FriendFeed
  • Clip to Evernote