Add a Fade Effect in NetObjects Fusion Using CSS3

From Documentation
Jump to: navigation, search

Add a Fade Effect in NetObjects Fusion Using CSS3

You can easily add a fade effect on objects in your website using CSS3 in NetObjects Fusion. This tutorial will walk you through the process step by step.

Requirements

  • Custom CSS needs to be input into the Style view of NetObjects Fusion.

Editing the Fade Effect Style

Below is a basic style for the fade effect but you can edit as needed via the Style view.

Here is the basic Style we’ve created:

.fade {
   opacity: 1;
   transition: opacity .30s ease-in-out;
   }

.fade:hover {
   opacity: 0.5;
   }
  1. Copy the code above.
  2. Open NetObjects Fusion to the Style view for your website project.
  3. If the Read Only option is checked in the Style properties palette, uncheck it.

Read-only.png

  1. Click on the CSS Code tab.
  2. Scroll to a blank line in your CSS.
  3. Paste the code here.

Css-code-tab-fade.png

  1. Click to the Graphic tab, you will be prompted to save, do so.

Apply the Fade Effect to text

From the Page view:

  1. Highlight the text you wish to have fade out.
  2. From the Text Properties palette, locate .fade Style from the drop down menu.

Page-view-style-selection.png

  1. Once applied, preview or publish your site to view the effect.

Apply the Fade Effect to images

From the Page view:

  1. Select or place an image on your page.
  2. With the image selected, locate and click the HTML button in the Picture Properties palette.
  3. Add the CSS Class Name (class="fade") after the end of the img code and before the end tag.

It should look like the following:

Class-insertion-fade.png

  1. Click OK.

Once applied, preview or publish your site to view the effect.