Hintergrundeinstellungen (Formulare)
Flexible Layouts und Widgets bieten die Möglichkeit ihren Hintergrund zu gestalten. Hierfür steht der Subdialog "Hintergrund" in der Eigenschaftenrubrik "Style" zur Verfügung.
Konfigurationsdialog
(1) Hintergrundfarbe: Legt eine beliebige Hintergrundfarbe und deren Sichtbarkeit (von 0 transparent bis 1 voll sichtbar) fest. Wird hier keine Farbe definiert, bleibt der Basishintergrund transparent.
(2) Ebenen: Hier kann eine odere mehrere Hintergrundebenen definiert werden. Eine Ebene kann entweder ein Bild, ein linearer oder ein radialer Farbverlauf sein. Mit der Funktion "Bild oder Farbverlauf hinzufügen" kann über eine entsprechende Auswahlliste eine neue Ebene hinzugefügt werden. Ebenen werden dabei in der Reihenfolge gezeichnet, in der sie von oben nach unten aufgelistet sind. Ebene 1 wird zuerst gezeichnet, dann ebene 2, dann ebene 3 und so weiter. Entsprechend werden die Ebenen überlagert. Die Reihenfolge kann durch Drag&Drop nachträglich verändert werden.
Hintergrundebenen
Bild
|
Konfiguration |
Ergebnis |
|
|
|
Ein Hintergrundbild kann über eine relative oder absolute URL (1) geladen werden. Die URL kann entweder statisch oder über das Taschenrechnersymbol via Berechnungsausdruck ermittelt werden. Der "Auswählen" Knopf bietet darüberhinaus die Möglichkeit, ein Bild aus den bereits vorhandenen Assets zu wählen (diese können über den Dateimanager hochgeladen werden).
Detailliertere Einstellungen (wie Position, Größe, Wiederholung und Scrollverhalten) lassen sich durch ausklappen des Bereichs "Mehr Einstellungen ..." (2) vornehmen.
Durch einen Klick auf das Mülleimersymbol (3) kann die Ebene wieder entfernt werden.
Linearer Farbverlauf
Ein Farbverlauf, welcher in einer festgelegten Richtung linear verläuft.
|
Konfiguration |
Ergebnis |
|
|
|
Ein Farbverlauf wird durch mindestens zwei Farben in der Farbenliste (1) definiert. Zu jeder Farbe kann zusätzlich eine Sichtbarkeit (von 0 transparent bis 1 voll sichtbar) festgelegt werden. Einträge in der Farbliste lassen sich via Drag&Drop umsortieren. Ebenso lassen sich Farben über die Funktion "Farbe hinzufügen" (2) hinzufügen oder über das Mülleimersymbol entfernen. Der Start und Endpunkt des Farbverlaufs und auch der Zwischenabstufungen (bei mehr als zwei Farben), lassen sich über die Regler (3a) im Vorschaubereich (3) beeinflussen (jede Farbe besitzt auch einen Regler). Die Reihenfolge der Regler entspricht selbstredend der Reihenfolge der Farben in der Farbenliste (1). Folglich wird die Farbenliste umsortiert, wenn die Reihenfolge der Regler verändert wird und umgekehrt.
Bei einem linearen Farbverlauf lässt sich auch ein Winkel (4) in Grad festlegen. Dieser beeinflusst die Richtung des Verlaufs (z.B. 90 - von links nach rechts, 180 - von oben nach unten, 135 - von links oben nach rechts unten, usw.).
Detailliertere Einstellungen (wie Position, Größe, Wiederholung und Scrollverhalten) lassen sich durch ausklappen des Bereichs "Mehr Einstellungen ..." (5) vornehmen.
Durch einen Klick auf das Mülleimersymbol (6) kann die Ebene wieder entfernt werden.
Radialer Farbverlauf
Ein Farbverlauf, der ausgehend von einem Mittelpunkt kreisförmig von innen nach außen verläuft.
|
Konfiguration |
Ergebnis |
|
|
|
Die Einstellungsmöglichkeiten und Funktionen entsprechen denen, des linearen Farbverlaufs, nur dass hier kein Winkel eingestellt werden kann.
Mehr Einstellungen ...
Unabhängig vom Ebenentyp, sind neben den spezifischen Einstellungen auch noch weitere, wie Position, Größe, Wiederholung etc., unter dem Punkt "Mehr Einstellungen ..." verfügbar.
Hinweis: Wird eine Eigenschaft leer gelassen, wird der Standard, welcher für das Element gültig ist, übernommen (z.B. durch einen festgelegten Style).
(1) Wiederholen
Definiert, ob und wie und in welcher Richtung der Hintergrund wiederholt wird.
Dabei werden folgende Optionen jeweils für die X- und die Y-Richtung angeboten.
|
Optionsname |
Erklärung |
Ergebnis |
|
Nein |
Der Hintergrund soll nicht wiederholt werden |
|
|
Ja |
Der Hintergrund wird wiederholt, indem er ohne Abstand aneinandergereiht wird. |
|
|
Ja. Erlaube Abstände |
Füllt die Zwischenräume der Instanzen so auf, dass der verfügbare Platz ausgefüllt wird |
|
|
Ja. Skaliere wenn nötig |
Skaliert die Instanzen, sodass nicht abgeschnitten wird, wie bei "Ja" |
|
(2) Position und Versatz
Über die Schaltflächen kann die Position des Hintergrundes jeweils in X- und Y-Richtung festgelegt werden (x: links, mitte, rechts, y: oben, mitte, unten).
Steht eine Richtung nicht auf "mitte", kann ebenfalls ein Versatz angegeben werden. Dieser verschiebt den Hintergrund, relativ zu seinem definierten Rand. Der Versatz kann in Pixeln (px), Prozent (%) oder relativ zur Schriftgröße (em) angegeben werden.
(3) Größe
Es stehen drei Größeneinstellungen zur Verfügung.
|
Optionsname |
Erklärung |
Ergebnis |
|
Eingepasst |
Skaliert den Hintergrund, sodass es die verfügbare Fläche in der naheliegendsten Richtung ausfüllt |
|
|
Abdeckend |
Skaliert den Hintergrund, sodass die verfügbare Fläche komplett ausgefüllt wird |
|
|
Benutzerdefiniert |
Blendet Felder zur Eingabe einer Breite und Höhe ein. |
Beispielbreite: 50px |
(4) Scrollverhalten
Legt fest, wie sich die Hintergrundebene beim Scrollen von überlaufendem Inhalt verhält.
Es stehen folgende Scrollverhalten zur Verfügung.
|
Optionsname |
Erklärung |
Ergebnis |
|
Scrollt nicht |
Der Hintergrund steht, relativ zur sichtbaren Fläche, fest |
|
|
Scrollt mit Inhalt |
Der Hintergrund steht, relativ zum Inhalt, fest und wird somit beim Scrollen mitverschoben. |
|
|
Feststehend im Hintergrund |
Positioniert den Hintergrund an der oberen, linken Ecke der Applikation (z.B. des Browserfensters). Wird die Option "Relativ zum Element" aktiviert, wird der Hintergrund nicht mehr am App-Ursprungspunkt ausgerichtet, Hinweis: Der Effekt zeigt nur Wirkung, wenn das Element selbst seine relative Position verändert z.B. indem es "weggescrollt" oder verschoben wird. |
Beispiel (ohne Option "Relativ zum Element")
|
Farbüberlagerung
Die Einstellung "Farbüberlagerung" steht nur zur Verfügung, wenn die Ebene eine andere überlagert oder eine Hintergrundfarbe gesetzt ist.
Hier wird festgelegt, wie die Farben zwischen der aktuellen Ebene und der darunterliegenden Ebenen miteinander verrechnet wird. Dafür stehen verschiedene Algorithmen zur Verfügung (z.B. Difference, Multiply, Hard-Light, Soft-Light, ...).
Durch anklicken einer Überlagerungsoption, wird der entsprechende Algorithmus aktiviert. Wird kein Modus oder "Normal" ausgewählt, dominiert immer die Farbe der aktuellen Ebene.
Siehe auch Styles und Effekte (Formulare)