Hinzufügen eines Verblassungseffektes in NetObjects Fusion Mit CSS3

From Documentation
Jump to: navigation, search
This page is a translated version of the page Add a Fade Effect in NetObjects Fusion Using CSS3 and the translation is 100% complete.

Hinzufügen eines Verblassungseffektes in NetObjects Fusion Mit CSS3

Sie können Objekten auf Ihrer Website mit CSS3 in NetObjects Fusion leicht einen Verblassungseffekt hinzufügen. Dieses Tutorial führt Sie Schritt für Schritt durch den Prozess.

Anforderungen

  • Benutzerdefinierte CSS müssen in die Design-Ansicht von NetObjects Fusion eingeführt werden.

Den Verblassungseffekt bearbeiten

Nachfolgend finden Sie einen grundlegenden Stil für den Verblassungseffekt, den Sie aber über die Design-Ansicht je nach Bedarf bearbeiten können.

Hier ist das Grunddesign, das wir erstellt haben:

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

.fade:hover {
  opacity: 0.5;
  }
  1. Kopieren Sie den obrigen Code.
  2. Öffnen Sie NetObjects Fusion auf die Designansicht für Ihre Webseite.
  3. Falls die Option "Nur lesen" in der Designpalette aktiviert ist, deaktivieren Sie sie.

Read-only.png

  1. Klicken Sie auf das CSS-Code Tab.
  2. Scrollen Sie zu einer Leerzeile in Ihrem CSS.
  3. Fügen Sie den Code hier ein.

Css-code-tab-fade.png

  1. Klicken Sie auf den Grafik Tab. Sie werden gefragt ob Sie speichern möchten. Speichern Sie.

Den Verblassungseffekt auf Texte anwenden

Aus der Seitenansicht:

  1. Markieren Sie den Text, der den Verblassungseffekt erhalten soll.
  2. Suchen Sie den ".fade" Stil aus der Texteigenschaften-Palette vom Dropdown-Menü.

Page-view-style-selection.png

  1. Nachdem die Änderung angewendet wurde, erstellen Sie eine Vorschau oder veröffentlichen Sie Ihre Webseite, um den Effekt zu sehen.

Den Verblassungseffekt auf Bilder anwenden

Aus der Seitenansicht:

  1. Verwenden Sie das Bildarchiv oder das Bild-Tool, um ein Bild auf Ihre Seite zu stellen.
  2. Wählen Sie das Bild aus und klicken Sie auf die HTML-Schaltfläche in der Bildeigenschaften-Palette.
  3. Fügen Sie den folgenden Code-Ausschnitt zwischen dem img-Code und dem End-Tag ein.

Es sollte wie folgt aussehen:

Class-insertion-fade.png

  1. Klicken Sie auf OK.

Sobald die Änderungen angewendet wurden, erstellen Sie eine Vorschau oder veröffentlichen Sie Ihre Website, um den Effekt zu sehen.