Create a New Style Sheet in the CSS Styles Panel
CSS Code Hinting in Dreamweaver
How to Apply CSS3 Effects and Transforms in Dreamweaver

How to Obtain the ColorZilla Plugin for CSS3

In order to use most ColorZilla features with CSS3, you must install the plugin. (The Ultimate Gradient Generator doesn’t require the plugin.) The plugins described here are version 2.8 for Firefox and version 0.5 for Chrome.

If you use a newer or different version of the plugin (say, for another browser), you may see some differences in the appearance of the screenshots. A little variation is normal and you shouldn’t worry about it. Use the following procedure to install the plugin.

  1. Go to the ColorZilla site.

    You see the ColorZilla main page.

    image0.jpg
  2. Click ColorZilla for Firefox and Chrome.

    You see options for selecting the browser type. Even though the example shows the Firefox page, the options for working with Chrome are the same.

    image1.jpg
  3. Click Firefox if you use the Firefox browser or Chrome if you use the Chrome browser.

    The installation button that appears below the browser buttons changes to match the browser you selected.

  4. Click Install ColorZilla 2.8 if you use the Firefox browser or Install ColorZilla 0.5 if you use the Chrome browser.

    You see a dialog box for Firefox that asks your permission to install the plugin. It may also tell you what the plugin will do. If you don’t see the dialog box, your browser may be asking for permission to display it.

    image2.jpg
  5. Click Install Now (or Add if you’re using Chrome).

    The installation will proceed. Firefox users may have to restart the browser (a dialog box will tell you whether this step is necessary) After a few seconds, you see a ColorZilla Installed page that describes all the features of the plugin in a little more detail.

    image3.jpg

For more on the additional functionality of The ColorZilla plugin review the full list of features at ColorZilla.com. For example, you can use ColorZilla to display element information such as the tag name, class, ID, size, and relative mouse-pointer position so you know how a particular page is put together. It’s also possible to use ColorZilla to launch Firebug when you need to debug the page setup.

After you get the plugin installed, you see a new eyedropper icon in the toolbar of your browser. Next to this eyedropper is a drop-down list (menu) of ColorZilla features you can use.

image4.jpg
blog comments powered by Disqus
Preview HTML Documents on a Cellphone, Tablet, or Laptop in Dreamweaver
How to Create a Media Query in Dreamweaver
How to Create CSS3 Animations with Stylie
How to Define the Basic Page Layout in CSS3
How to Use Three-Column Layouts in CSS3
Advertisement

Inside Dummies.com