Bedienugsanleitung für den Advanced Frame Designer with Gradients

   Manual for the Advanced Frame Designer with Gradients

InhaltContents  Deutsch   English   Beispiele   Examples 


WICHTIG: Es werden nur die Notationen nach CSS3 unterstützt. Dadurch kann es speziell bei den Farbverläufen in Seiten mit den Browser spezifischen Notationen zu ungewollten Effekten kommen.

IMPORTANT: Only the CSS3 notations are supported. This can especially for the color gradients in pages with the browser-specific notations result in unwanted effects.


Wofür ist er zu gebrauchen

For what is he usefull

Dialog borderimage Schattendialog

Was sind seine Vorteile

What are its advantages

Die Komponenten

The components

Dialog Farbverläufe

 


Wie geht es los und wo ist das Ergebnis

How do you start and what is the result

1.)

Zum Starten des Advanced Frame Designer with Gradients klickt man auf das Symbol in der Add-on Leiste oder im Kontextmenü.

To start the Advanced Frame Designer with Gradients click on the symbol in the addon bar or in the context menu.

Icon

2.)

Neben dem Mauszeiger wird das Element angezeigt, welches unterhalb der Maus liegt. Mit einem weiteren Klick wählt man dieses Element aus, um es zu bearbeiten. Danach öffnet sich das Dialogfenster.

Under the mouse pointer appears a symbol, which show the type of element. With a click you can choose the element for editing. After this the dialog window open.

Icon

Klickt man vorher erneut auf das Symbol, wird der Vorgang abgebrochen.

Do you click the symbol again before choose an element, the process is canceld.

3.)

Um eine Farbe aus der Web-Seite zu übernehmen, mit der Maus bei gedrückter SHIFT-Taste zur Stelle gehen und klicken.

To pick a color from the web page, press the SHIFT key and click on the color position.

4.)

Das CSS Ergebnis liegt im Zwischenspeicher.

The CSS result is in the clipboard.


Hauptdialog

Main dialog

Box - Modell im Hauptdialog

Box - Model in the main dialog

--- Erst mal das einfache ---

--- First of the simple ---

Das Box-Modell bestehend aus margin, border und padding wird in den grau unterlegten Rechtecken dargestellt. Es gehört zu dem ausgewählten Element, welches in der Mitte als inaktive Schaltfläche angedeutet wird. Die beiden Felder zeigen die Vordergrundfarbe und die Hintergrundfarbe. Die Werte für top werden immer angezeigt und sind auch für die anderen Seiten gültig, wenn die Checkbox all gesetzt ist. Hinter allen Einheiten steckt ein Popup Menü. Wenn man mit der Maus die Einheit anklickt (links), erscheint das Menü zum Wechseln der Einheit (siehe padding top).

The Box-Model consists of margin, border and padding is shown in the gray rectangles. It belongs to the chosen element, whose type is in the inactive button in the middle. The two fields show the foreground color and the background color. The values for top are allways shown. and are also valid for the other sides, if the the checkbox all is set. Behind all units there is a popup menu. If you click the unit with the mouse (left), a menu appears to change the unit (see padding top).

Der Rahmentyp (none) ist ebenfalls ein Popup Menü. Beim border kann zusätzlich ein Radius für abgerundete Ecken angegeben werden. Der erste Wert ist für die x-Richtung, der zweite für die y-Richtung.

The frame type (none) has a popup menu too. For border you can additional set a radius for rounded edges. First value is for the x-direction the second for the y-direction.

Wird die Checkbox all ausgeschaltet, so erscheinen die entsprechenden Eingabefelder für die anderen Seiten. Klick man die Checkbox all mit gedrückter SHIFT-Taste, so werden die Werte von top auf alle Seiten übertragen.

Is the checkbox all deactivated, the input fields for the other sides are displayed. Do you make a click on the checkbox all while pressing the SHIFT key, the top value is set to all sides.

Box-Modell

Mit den Plus und Minus Zeichen an den Ecken werden die Werte von jeweils zwei benachbarten Seiten erhöht oder erniedrigt.

With the plus and minus sign the values of each of two adjacent sides are incremented or decremented.

Box-Modell

Auf der linken Seite des Dialogfensters sind Schaltflächen.
Mit der obersten Schaltfläche Tooltip werden die Tooltips in allen Fenstern ein- bzw. ausgeschaltet.
Die Schaltflächen mit den Zahlen sind 6 interne Speicherplätze, mit der man die aktuellen Einstellungen speichern Tooltip und wieder abrufen Tooltip kann.
Die Schaltfläche Tooltip aktiviert den Dialog für Schatten.
Die Schaltfläche Tooltip aktiviert den Dialog für Border-Image.
Die Schaltfläche Tooltip aktiviert den Dialog für Farbverläufe.
Falls bei dem gewählten Element das float Attribut gesetzt ist, wechselt die Schaltfläche Position die Position links-zentriert-rechts.

On the left side of the main dialog are buttons.
With the first button Tooltip you can switch on or off the tooltips for all dialogs.
The buttons with the numbers are 6 internal memories to temporary save Tooltip and restore Tooltip all settings.
The button Tooltip activate the dialog shadow.
The button Tooltip activate the dialog border-image.
The button Tooltip activate the dialog gradients.
If the chosen element has the float attribute set, the button Position change the position left-center-right.

--- Was sollen die Div-Elemente ---

--- Why are the div elements ---

Um das ausgewählte Element (hier ein image) sind drei Div-Elemente angeordnet, äußeres, mittleres und inneres Div. Diese werden durch die drei Schaltflächen DIV Umschalten dargestellt. Durch Drücken einer Div Schaltfläche wird das Div Element aktiviert und die grauen Flächen des Box-Modells sind diesem Element zugeordnet. Mit der Schaltfläche des Elementes in der Mitte DIV Umschalten wechselt man wieder zum ausgewählten Element.

The chosen element (here an image) is wrapped with three div-elements, outer, middle and inner div. These are shown as three buttons DIV Umschalten. Pushing a div button activate the div element and the gray areas are assigned to the box model. With the middle button of the element DIV Umschalten you can switch back to the chosen element.

Im Bild ganz rechts ist das mittlere Div Element aktiviert.

In the picture at right the middle div element is activated.

Mit den Div-Elementen und dem ausgewählten Element können insgesamt 4 Rahmen definiert werden. Aber es können auch span Elemente sein.

With the div elements and the element selected a total of 4 frames can be defined. But it can also be span elements.

DIV Umschalten DIV Umschalten

--- Ein bisschen Farbe ---

--- A little bit of color ---

Jedes der 4 Elemente hat eine Vordergrundfarbe, eine Hintergrundfarbe und die Rahmenfarbe. Die Farben werden in Rechecken angezeigt. Die Farben werden durch Drag&Drop gesetzt. Dies kann man in zwei Richtungen ausführen. Einmal zieht man eine Pickerfarbe zu den Farbfeldern und lässt die Pickerfarbe 'fallen' oder man zieht das Farbfeld zu einer Pickerfarbe und läßt das Farbfeld 'fallen'.

Each of the four elements has a foreground color, a background color and border color. The colors are displayed in rectangles. The colors are set by Drag&Drop. This can be done in two directions. Once you drag a picker color to the color fields and drop the color or drag the color field to the color picker and drop the color field.

Farbe gesetzt

Im ersten Fall - Pickerfarbe Richtung Farbfeld - wird die Farbe z.B. als Rahmenfarbe gesetzt.


In the first case - picker color to color field - the color is set e.g. set as border color.


Farbe Verknüpfung

Im Zweiten Fall - Farbfeld Richtung Pickerfarbe - wird eine Verknüpfung zur Farbe hergestellt. Erkennen kann man es an dem Kreis im Farbfeld. Eine Verknüpfung bewirkt, dass Änderungen der Farbe im Colorpicker unmittelbar in der Web-Seite sichtbar werden. So lassen sich die Farben fein abstimmen. Mit einem Klick bei gedrückter Shift-Taste wird der momentane Farbwert übernommen.

In second case - color field to picker color - a link to the color is made. You can recognize it on the circle in the color field. A link means that changing the color in the color picker will immediately visible in the web page. So the colors can be fine-tuned. With a click while holding the Shift key, the current color value is applied.

Rahmen transparent

Eine 'transparente' Farbe wird durch ein Muster dargestellt.


A 'transparent' color is represented by a pattern.


--- Wo sind denn die Farben? ---

--- Where are the colors? ---

Colorpicker im Hauptdialog

Colorpicker in the main dialog

Colorpicker

Rechts im Hauptdialog ist der 'Colorpicker'. Beim ersten Aufruf sieht man oben nur ein buntes Regenbogen-Band neben 4 kleine bunte Streifen und schwarze Winkel. Nicht gerade viel.

Right of the main dialog is the 'Color Picker'. At the first time you will see just above a colorful rainbow ribbon next to 4 small colorful stripes and black angles. Not a lot.

Vorweg ein Hinweis, die Farbbänder reagieren auf Mausbewegung. Ich gebe zu, dass die Bedienung etwas ungewöhnlich ist, vermeidet aber ein langes gedrückt Halten der Maustaste. Auf diese Weise kann man die Maus leicht bewegen und die Farben ausprobieren. Durch Klick schaltet man die Farbbänder weg und kann die Maus wegziehen. Ist die STRG-Taste gedrückt reagieren die Farbbänder nicht mehr auf Mausbewegung.

First a note, the ribbons respond to mouse movement. I admit that the operation is somewhat unusual, but avoids a long holding down the mouse button. In this way, you can move the mouse slightly and try out the colors. With a click you can switch off the ribbons and can move the mouse. Is the CTRL key pressed there is no longer respond to the ribbons on mouse movement.

So fängt man an...

Thus one starts...

Wir bewegen die Maus zum Regenbogenband. Nach einem kurzen Moment reagiert die Maus und die anderen Farbbänder werden aktualisiert. Die Farbe bei der Mausposition, durch ein kleines Rechteck markiert, definiert grob die Ausgangsfarbe. Unter dem Regenbogenband erscheint ein zweites Farbband für die Auswahl der Basisfarbe. Jetzt wechseln wir zu dem Auswahlband und definieren die Basisfarbe (großes Farbfeld).

We move the mouse to rainbow ribbon. After a short moment reacts the mouse and the other color ribbons are updated. The color with the mouse position, marked by a small rectangle, defines roughly the source color. Under the rainbow ribbon the second color ribbon appears for the choice of the base color. Now we change to choice ribbon and define the base color (big color field).

Warum das so gewollt ist, dazu etwas Hintergrundinformation. Es gibt 1530 sogenannte Regenbogenfarben. Das sind die Kombinationen in der RGB-Notation in denen mindestens zwei Werte 0 oder 255 haben und der andere Wert weiter zählt. Die so erzeugten Farben liegen auf den Kanten des RGB-Würfels. Die kleinen bunten Streifen erzeugen unterschiedliche Regenbogenbänder, so dass jede Kante des RGB-Würfels einmal erzeugt wird. Von den Regenbogenfarben werden aus Platzgründen nur jede 5te Farbe im Regenbogen-Band dargestellt. Um auf alle Farben zugreifen zu können, werden alle Regenbogenfarben ausschnittsweise im Farbauswahlband angezeigt.

Why this is so wanted, for that some background information. There are 1530 rainbow colors. These are the combinations in the RGB notation in which at least two values are set 0 or 255 and have the other value counts on. The colors thus produced are the edges of the RGB cube. The small colorful stripes create different rainbow ribbons, so that each edge of the RGB cube is generated once. Colors of the rainbow are represented only every 5th color in the rainbow band to keep space. To access all the colors, all the colors of the rainbow will appear in the fragmentary band color selection.

Mit den 4 bunten Streifen regenbogenregenbogenregenbogenregenbogen werden die 4 Regenbogentypen ausgewählt. Und die schwarzen Winkel rotate rotieren die Farben innerhalb eines Regenbogenbandes.

With the 4 colored stripes regenbogenregenbogenregenbogenregenbogen you can choose the 4 rainbow types. And the black arrows rotate let the colors rotate inside the rainbow ribbon.

Das Symbol rotate zeigt die alphabetisch sortierten Farbnamen, das Symbol rotate die Farbnamen nach deren HEX Wert sortiert. Per Klick werden diese im Colorpicker als Basisfarbe übernommen. Hält man die SHIFT Taste gedrückt, werden nur noch die verwandten Farben angezeigt, z. B. die Blautöne.

The symbol rotate shows the color names sorted by name, the symbol rotate the color names sorted by HEX value. With a click the color is set in the color picker as the basic color. With the SHIFT key pressed, only the similar colors are shown, like the blue hues.

Tippt man einen Buchstaben, so werden alle Farben gezeigt, die mit dem Buchstaben anfangen. Zum Beispiel für "r" erscheinen die Farben Red, RosyBrown und RoyalBlue.

If you press a letter, so all colors are shown that start with the letter. For example, for "r" the colors Red, RosyBrown and RoyalBlue appears.

--- Hier wird es jetzt bunt ---

--- Here it is now colorful ---

Colorpicker

Der Colorpicker ist jetzt mit vielen Farben gefüllt und es gibt recht und links noch zwei weitere Farbbänder. Ausgehend von der im Auswahlband eingestellten Basisfarbe werden links die dunkleren Varianten - Mischung mit Schwarz - und rechts die helleren Varianten - Mischung mit Weiß - dargestellt. Beide Helligkeitsfarbbänder reagieren ebenfalls auf Mausbewegung. Auf diese Weise kann man nur durch Positionieren der Maus und deren Bewegung die Farben variieren ohne die Maustaste gedrückt zu halten.

The Color Picker is now filled with many colors and there are right and left two other color bands. Starting from the color in the selection band you see for the base color left the darker variants - mixed with black - and right the lighter variants - mixed with white. Both brightness ribbons also respond to mouse movement. In this way, you can only by positioning the mouse and there movement vary the colors without holding down the mouse button.

Damit beim Verlassen der Farbbänder die Farbe nicht 'verstellt' wird, können die Farbbänder mit einen Klick ausgeschaltet werden. Ein Klick auf die oberen Farbbänder schaltet alle aus. Ein Klick auf die Helligkeitsfarbbänder nur diese. Zum Einschalten der Farbbänder reicht ein Klick auf die drei grauen Streifen Switch mit dem weißen Rand. Der mittlere schaltet die oberen Farbbänder wieder ein und die beiden rechts und links die Helligkeitsfarbbänder.

To prevent by leaving the color ribbons that the color changed, the ribbons can be turned off with a click. A click on the ribbons on top turned of all ribbons. A click on the brightness ribbons just this. To activate the ribbons click on the three gray stripes Switch with the white border. The middle activate the top ribbons again and both right and left activate the brightness ribbons.

In der Mitte wird ein Block mit 10 Farben angezeigt. Alle diese Farben können per Drag&Drop für die Farbfelder genutzt werden. Was sind dies für Farben und wie entstehen sie.

In the middle there is a block with 10 colors. All this colors can with Drag&Drop used for the color fields. What are these colors and how they are produced.

Eine detailiertere Erklärung ist hier www.perfekte-website.de

A more detailed explanation is here www.tigercolor.com

Um die Abstände einzustellen, gibt es 3 Schieberegler. Der linke ist für die analogen Farben, der rechte für die tetradischen Farben und der untere für die teilkomplementären Farben. Die Werte der Schieberegler werden rechts unten angezeigt, im Bild 90, 40 und 180. Klickt man auf den angezeigten Wert, wird der entsprechende Schieberegler mit einem schwarzen Rahmen markiert und kann mit den Pfeiltasten justiert werden.

To adjust the distances, there are 3 slider. The left is for the analogous colors, the right for the tetradic colors and the lower for the split-complementary colors. The values of the sliders is displayed at bottom right, in the picture 90, 40 and 180. Do you click on the values, the corresponding slider is marked by a black frame and can adjust with the arrow keys.

Durch Klick auf das grau/schwarze Rechteck switch tetradic werden die Seiten für die tetradischen Farben getauscht.

With a click on the gray/black rectangle switch tetradic the sides of the tetradic colors are switched.

Das Muster darüber ist eine 'transparente' Farbe switch tetradic und kann wie eine Farbe benutzt werden.

The pattern above is a 'transparency' color switch tetradic and can be used like the other colors.

--- Jetzt wird es ganz bunt ---

--- Now it is quite colorful ---

Harmonic Color Picker

Ausgehend von den Farben an den Kanten des RGB-Würfels und der Helligkeitseinstellung erhält man nur Farben, die sich auf der Würfeloberfläche befinden. Erkennbar daran, dass einer der RGB Werte immer 255 oder 0 ist.

Based on the colors around the edges of the RGB cube, and the brightness control there are only colors that are on the cube surface. Recognizable from the fact that one of the ​​RGB values is always 255 or 0.

Hier kommt der Farbmischer (3 Schieberegler für rot, grün und blau schieberegler) ins "Farbenspiel". Im Farbmischer wird eine zusätzliche Farbe eingestellt, welche zu der Basisfarbe und deren harmonischen Farben gemischt wird. Das Mischungsverhältnis wird über den Alphakanal (grauer Schieberegler) definiert.

Here comes the color mixer (3 sliders for red, green and blue schieberegler) to the "color play". In the color mixer you can set an additional color, which is mixed with the base color and there harmonic colors. The mixing ratio is defined by the alpha channel (gray slider).

Die Mischfarbe wird oben rechts mit den Farbwerten und dem Mischverhältnis (Alphawert) angezeigt.

The mixed color appears at the top right with the color values ​​and the mixing ratio (alpha value).

Wer die Farbwerte exakt einstellen möchte, kann auf den entsprechenden numerischen Farbwert klicken. Der Schieberegler erhält dann einen dunklen Rahmen und kann mit den Pfeiltasten (rechts, links) justiert werden.

If you want to adjust the color values ​​exactly, click on the corresponding numerical color value. The slider will get a dark frame and can adjust with the arrow keys (right, left).

--- Und noch ein paar Einstellungen ---

--- Some more settings ---

Mit den Checkboxen können noch weitere Einstellungen vorgenommen werden.

With the checkboxes you can make more settings.

hex : Zeigt den Farbwert in hexadezimaler Schreibweise

hex : Shows the color value in hexadecimal notation

rgb : Zeigt den Farbwert in rgb Notation (rot, grün, blau)

rgb : Shows the color value in rgb notation (red, green, blue)

mix : Aktiviert den Farbmischer mit der Mischfarbe.

mix : Activate the color mixer with the mix color.

mm : mm steht für Mausmove und deaktiviert die Verzögerung bei der Mausbewegung. Die Verzögerung verhindert, dass bei jedem darüber huschen die Farbeinstellung verändert wird.

mm : mm means mousemove and deactivate the mousemove delay. The delay prevents changing the color directly on moving the mouse over the ribbons.

half : Setzt den Abstand der tetradischen Farben auf die Hälfte des Abstandes der analogen Farben. Der rechte Schieberegler für die tetradischen Farben wird deaktiviert.

half : Set the distance of the tetradic colors to the half distance of the analogous colors. The right slider for the tetradic colors is then deactivated.

syc : Synchronisiert den Abstand der analogen Farben und der teilkomplementären Farben. Der untere Schieberegler für die teilkomplementären Farben wird deaktiviert.

syc : Synchronize the distance of the analogous colors and the split-complementary colors. The lower slider for the tetradic colors is then deactivated.

keep : Das mit dem Advanced Frame Designer erzeugte Design bleibt temporär in der Web-Seite erhalten. Nach einem Neuladen der Web-Seite sind die Einstellungen weg.

keep : With the Advanced Frame Designer build design keeps temporary in the web page. After reloading the web page, the settings are gone.


Schattendialog

Shadow dialog

--- Manchem ist 1 Schatten zu wenig ?!! ---

--- Some persons is 1 shadow not enough ?!! ---

shadow

Eine Schattendefinition besteht aus mehreren Werten. Aber, es können mehrere sich überlagernde Schatten definiert werden. Hierbei wird zusätzlich nach Schatten, die nach außen und nach innen gerichtet sind, unterschieden. Die Werte eines Schatten sind:

A shadow definition consists of multiple values. But, there may be several overlapping shadows are defined. The shadow are additional differentiate over the direction, outset and inset. The values ​​of a shadow are:

Mit der Schaltfläche add wird eine neue Schattendefinition in der Liste angelegt.

With the button add you can create a new shadow in the list.

Mit der Schaltfläche up wird die aktuelle Schattendefinition in der Liste nach oben geschoben.

With the button up you can move the selected shadow one line up in the list.

Mit der Schaltfläche down wird die aktuelle Schattendefinition in der Liste nach unten geschoben.

With the button up you can move the selected shadow one line down in the list.

Die Schaltfläche delete löscht die aktuelle Schattendefinition wenn die Checkbox off aktiviert wurde.

The button delete delete the selected shadow in the list if the checkbox off is active.


Border Image Dialog

Border Image Dialog

--- Es wird komplizierter ---

--- It becomes more complicated ---

borderimage

Für den Rahmen kann man ein Bild nutzen. Dieses Bild wird in der horizontalen und vertikalen Richtung jeweils in drei Teile zerlegt. Auf diese Weise ergeben sich neun Teile. Die Eckteile werden den Ecken des Rahmens zugeordnet, die Seitenteile den entsprechenden Seiten des Rahmens. Das Mittelteil wird zum Füllen benutzt. Soweit die Theorie.

For the frame, you can use an image. This image is divided in the horizontal and vertical direction, respectively in three parts. In this way, nine parts are the result. The corner parts are assigned to the corners of the frame, the side parts of the corresponding sides of the frame. The middle part is used for filling. That is the theory.

Im Borderimage Dialog sieht man das Bild, welches durch den slice Parameter zerlegt wird. Der slice Parameter gibt den Abstand vom benachbarten Rand an. Die farbigen Linien geben die slice Position an. Falls sie schlecht zu erkennen sind, kann man durch Klick die Farbe wechseln.

In the borderimage dialog you can see the picture, which is divided by the slice parameter. The slice parameters are the distances from the adjacent edge. The colored line shows the slice position. If they are hard to see, you can change the color by clicking.

Der outset Parameter verschiebt den Rahmen nach außen und der width Parameter gibt die Breite des Rahmen an. Die Ecken- und Seitenteile werden an die Rahmenbreite angepasst.

The outset parameter moves the frame outside and the width parameter set the width of the frame. The corner parts and side parts are matched to the frame width.

Die Checkboxen all funktionieren hier entsprechend wie im Box-Modell.

The checkboxes all work here like in the box-model.

Die Parameter horizontal und vertical können mit den Menüs eingestellt werden. Sie geben an, wie die Seitenteile dem Rahmen angepasst werden. Die Checkbox fill füllt das Zentrum mit dem Mittelteil des Bildes.

The parameters horizontal and vertical can be set with the menus. You specify how the side parts are adapted to the context. The checkbox fill fills the center with the center part of the image.

ACHTUNG: Wird beim Parameter outset die Einheit * (stern = ohne Einheit) eingestellt, so ist der Wert von outset ein Faktor, der mit der Rahmenbreite im Box-Modell multipliziert wird. Das Ergebnis wird im Tooltip der outset Textbox angezeigt. Mit border-width = 20px und outset = 3* ergibt sich für outset effektiv 60px. Gleiches gilt für Parameter width. Bei Parameter slice bedeutet die Einheit * ebenfalls 'ohne Einheit', sind aber implizit Pixel (px).

ATTENTION: Did you set on parameter outset the unit * (star = no unit), the value of outset is a factor, which will be multiplied with the frame width form the box-model. The result you can see in the tooltip outset. With border-width = 20px and outset = 3* the result is for outset is 60px. The same applies for parameter width. If parameter slice has unit * 'no unit', the unit is implicitly Pixel (px).


Dialog Farbverläufe (Gradients)

Dialog Gradients

--- Kompliziert ist ab jetzt untertrieben ---

--- Complicated is an understatement from here now ---

gradient

Als Alternative zur Hintergrundfarbe und Hintergrundbildern kann man Farbverläufe definieren. Aus den Definitionen der Farbverläufe wird im Prinzip ein Hintergrundbild berechnet. Auf die Regeln möchte ich hier nicht eingehen.

As an alternative to the background color and background picture you can define gradients. From the definitions of the gradients, a background image is calculated. To the rules, I will not go into here.

Der Dialog Gradient (Farbverläufe) besteht aus den Teilen:

The Dialog Gradient consists of the parts:

Auffällig ist, dass es für die Farbverläufe eine Liste gibt. Grund ist, man kann mehrere Farbverläufe definieren, die sich dann überlagern. Klingt im ersten Moment einfach, aber man muss einiges dabei beachten. Und das lässt sich leider nicht in Tooltips unterbringen.

It is striking that there is a list for the gradients. Reason is, you can define multiple gradients, which are then overlapping. Sounds easy at first, but you have several things to consider here. And that can not be accommodated in tooltips.

Linker Teil: Felder der Farbverläufe

Left part: fields for the gradients

Es gibt 6 verschiedene Typen von Farbverläufe: linear, repeating-linear, circle, repeating-circle, ellipse, repeating-ellipse.

There are 6 kinds of gradients: linear, repeating-linear, circle, repeating-circle, ellipse, repeating-ellipse.

Mit den Schaltflächen add, add, add, add, add, add werden die Farbverläufe erzeugt.

With the buttons add, add, add, add, add, add you can create the gradients.

Mit der Schaltfläche up wird die aktuelle Definition in der Liste nach oben geschoben.

With the button up you can move the selected gradient.

Mit der Schaltfläche down wird die aktuelle Definition in der Liste nach unten geschoben.

With the button down you can move down the selected gradient.

Die Schaltfläche delete löscht die aktuelle Definition, wenn die Checkbox off aktiviert wurde.

The button delete delete the selected gradient, if the checkbox off is active.

In der Liste werden die Hauptparameter eines Farbverlaufes angezeigt:

The list shows the main parameters of the gradient:

Unterhalb der Liste erscheinen die Parameter entsprechend dem Farbverlaufstyp. Beim Typ linear gibt es den Winkel (angle). Vorab ein Wort zu den Einheiten. Die Einheit - (minus) steht für Parameterwert ist nicht relevant. Im Bild ist der Winkel nicht relevant, weil die Richtung des Farbverlaufes mit den Schlüsselworten left top angegeben wurde.

Below the list appear the according parameters of the gradient type. Type linear has an angle (angle). First a word to the units. The unit - (minus) means parameter value is not relevant. In the picture the angle is'nt relevant, because the direction of the gradient is set by a keyword left top.

Dieser Farbkreis ist nur mit Farbverläufen
in CSS definiert.

This color wheel is defined only
by CSS gradients.

zusätzliche Felder

additional fields

Für besondere 'Konstruktionen' werden noch weitere CSS-Parameter benötigt

For special 'constructions' other CSS parameters are still needed

Diese werden mit der Schaltfläche extend sichtbar. In der Liste erscheint die Spalte background position und darunter weitere Felder:

These are shown by this button extend. In the list appears the column background position and some additional fields below:

Beispiel ist der rechts stehende Farbkreis.

An example is the color wheel on the right side.

Mittlerer Teil: Vorschau mit Einstellungen

Middle part: Preview with settings

gradient

Wie der Name schon sagt, wird hier gemäß Liste das Farbresultat aller aktuellen Farbverläufe des Elementes angezeigt. Dies ist einfach gesagt, aber was steckt dahinter. Wenn es z.B. drei Farbverläufe gibt, dann werden im Prinzip alle drei angezeigt. Für den in der Liste aktuellen Farbverlauf werden die Hilfselemente eingeblendet.

As the name suggests, the result of all the color gradients of the element is displayed according to the list here. This is easy to say, but what's behind it. If for example there are three gradients, then they are displayed in principle all three. For the current gradient in the list, the auxiliary elements are displayed.

Das Vorschaufeld wird entsprechend den Dimensionen des in der Web-Seite ausgewählten Elementes skaliert.

The preview box is scaled by the dimensions of the element in the web page.

In dem Beispiel gibt es ein Farbverlauf linear einen von Typ circle und einen vom Typ ellipse. Der Farbverlauf circle ist in der Liste ausgewählt. Als Farbergebnis aller Farbverläufe ist der Farbverlauf linear im Hintergrund und der Farbverlauf circle als dunkler Punkt. Vom Farbverlauf ellipse ist nicht zu sehen. Warum? Das Stichwort ist schon gefallen HINTERGRUND. Der Farbverlauf linear deckt den vollständigen Bereich ab und da der Farbverlauf ellipse in der Liste am Ende steht, bleibt er verdeckt. ABER, den Farbverlauf circle sieht man doch, obwohl er in der Liste ebenfalls hinter dem Farbverlauf linear steckt. Grund ist, in der Farbdefinition des Farbverlaufes linear sind ab dem grünen Bereich die Farben mit einer Transparenz definiert, so dass der Farbverlauf circle durchscheint.

In the example there is a gradient linear one with type circle and another with type ellipse. The gradient circle is selected in the list. The result of the gradients is the gradient linear in the background and the gradient circle as shadow point. The gradient ellipse in not visible. Why this? The keyword is already been said BACKGROUND. The gradient linear completely overlap the area and since the gradient ellipse in the list is at the end, it is hidden. BUT, the gradient circle you can see, even though he's in the list also behind the gradient linear. The reason is, the color definitions in the gradient linear has with the green color a transparency, so that the gradient circle shine through.

gradient

In der Liste habe ich die Farbverläufe in die richtige Reihenfolge gebracht und die 'transparenten' Farben aktiviert. Jetzt ist der Farbverlauf linear im Hintergrund und die Farbverläufe circle und ellipse im Vordergrund. So weit ein kleiner Vorgeschmack auf die richtige Nutzung, aber davon später mehr.

I put the gradients in the list to the right order and activate the 'transparent' color. Now the gradient linear is in the background and the gradients circle and ellipse are in the foreground. So far a little taste of the correct usage, but more of that later.

Erst einmal weiter mit den Bedienungselementen.

Let us continue with the controls.

Um das Vorschaufeld sind an den Seiten und Ecken Marker. Ein Klick auf einen Marker positioniert den Farbverlauf bzw. bestimmt die Richtung. Die entsprechenden Schlüsselworte sieht man in der Liste.

Round the preview box there are marker on the sides an the corners. A click on a marker positioned the gradient or defined the direction. The corresponding keyword you see in the list.

Beim Farbverlauf linear erscheint ein Richtungsmarker (Pfeil mit Linie). Wenn für den Winkel eine Einheit gewählt ist, reagiert der Richtungsmarker auf Mausbewegung und man kann so den Winkel einstellen.

For the gradient linear you see a direction marker (arrow width line). If a unit is set for the angle, the direction marker reacts to the mouse to adjust the angle.

gradient

Bei dem Farbverlauf ellipse wird die Ellipse dargestellt und zur Orientierung die 50% Ellipse sowie weitere Marker. Die gelben Marker rechts im Vorschaufeld positionieren die Ellipse an der nächsten Seite oder der nächsten Ecken, die bläulichen die am weitesten entfernte Seite oder Ecke. Durch Klick auf einen Marker wird Position und Größe eingestellt.

For the gradient ellipse you see an ellipse and for the orientation a second ellipse in the 50% distance and additional marker. The yellow marker right in the preview box positioned the ellipse to the closest or farthest side, the blue one to the closest or farthest corner. With a click an the other marker you can set the position and the size.

Die Marker auf der Ellipsenlinie sind der x-Radius (rx) und der y-Radius (ry). Durch ziehen mit der Maus wird die Größe eingestellt. Ebenso kann die Ellipse mit der Maus verschoben werden (klick, halten und schieben). Beim Kreis fehlt nur der Marker für den y-Radius. Der Mittelpunkt sind die Parameter cx und cy.

The marker on the ellipse line are for the x-radius (rx) and the y-radius (ry). With dragging by mouse you can set the size. Also you can move the ellipse by mouse (click, hold and move). The circle has only a marker for the y-radius. The center are the parameter cx and cy.

Die drei Schaltflächen unterhalb der Farbverlaufliste gehören noch zum Vorschaufeld.

The three buttons below the gradient list still belong to preview box.


gradient

Rechter Teil: Farbdefinitionen

Right part: color definitions

Die Farbdefinitionen werden in einer Liste bearbeitet. Mit dem Anlegen eines neuen Farbverlaufs werden auch drei Farben erzeugt. Ein Farbverlauf benötigt mindestens zwei Farben. Die dritte Farbe ist eine deaktivierte 'transparente' Farbe, welche immer bei Überlagerungen benötigt wird und dann aktiviert werden kann.

The color definitions are processed in a list. By creating a new gradient, three colors are produced. A gradient requires at least two colors. The third color is a disabled 'transparent' color, which is always required in overlapping and can then be activated.

An der stop Position einer Farbe hat die Farbe ihre volle Intensität. Im Bereich zwischen zwei Farben werden die Farben gleichmäßig überblendet (gemischt). Ohne Wert hat die erste Farbe 0% und die letzte Farbe 100%. Die stop Werte sollten aufsteigen sein, sonst gibt es keine Übergänge. Die letzte Farbe definiert auch den Bereich außerhalb eines circle oder ellipse Farbverlaufs und deckt somit andere Definitionen ab. Deshalb sollte die letzte Farbe dann eine 'transparente' Farbe sein.

At a stop position of a color, the color has its full intensity. In the area between two colors, the colors are evenly blended (mixed). Without value, the first color is 0% and the last color 100%. The stop values ​​should be ascending, otherwise there are no transitions. The last color also defines the region outside a circle or ellipse gradient and thus covers other definitions. Therefore, the final color should then be a 'transparent' color.

Mit der Schaltfläche add wird eine neue Farbdefinition in der Liste angelegt.
Mit der Schaltfläche up wird die aktuelle Farbdefinition in der Liste nach oben geschoben.
Mit der Schaltfläche down wird die aktuelle Farbdefinition in der Liste nach unten geschoben.
Die Schaltfläche delete löscht die aktuelle Farbdefinition, wenn die Checkbox off aktiviert wurde.
Mit der Schaltfläche zero werden alle stop Werte auf 0px gesetzt.

With the button add a new color definition is created.
With the button up the selected color definition is moved up.
With the button down the selected color definition is moved down.
The button delete delete the selected color definition, if the checkbox off is active.
The button zero set all stop values to 0px.

Die Spinbuttons des EIngabefeldes stop reagieren auf Klick in Kombination mit den Funktionstasten:

The spinbuttons of the input field stop reacts on click in combination with keys:

Das ermöglicht mehrere Farbdefinitionen zu verschieben.

This enables to move multiple color definitions.

 


Wie kann man ...

How can you ...

--- Tipps ---

--- Tips ---

- Element auswählen -

- select an element -

Möchte man ein DIV-Element auswählen, das man mit der Maus nicht 'erwischen' kann, hält man die SHIFT-Taste gedrückt und wählt ein inneres Element.

If you want to choose a DIV element that you are not able to 'catch' with the mouse, you hold the SHIFT key button and selects an inner member.

- Dialog in den Vordergrund -

- dialog in the foreground -

Ein Klick auf die Icons öffnet die Dialoge. Wenn der Dialog bereits geöffnet ist, wird der Dialog durch Klick in den Vordergrund gebracht. Der Schattendialog und der Farbverlaufdialog bleiben immer im Vordergrund, damit man die Farben per Drag&Drop einfacher setzen kann.

A click on the icon opens the dialogs. When the dialog is already open, the dialog is placed by clicking in the foreground. The shadow dialog and gradient dialog always remain in the foreground, so you can set the colors by Drag&Drop easier.

Box - Modell

box - model

- Zusatz-Div's -

- additional Div's -

Around the selected item for which you want to define a frame, three additional div elements are created. If these are subsequently used in web page or have already been implemented, the Div elements must get the class name hjbddorfkeepdesign. Via the class name the Advanced Frame Designer with Gradients detects the div elements and takes over their style parameters.

<div id="outerdiv" class="outer hjbddorfkeepdesign" style="float:right;">
    <div id="middlediv" class="middle hjbddorfkeepdesign">
        <div id="innerdiv" class="inner hjbddorfkeepdesign">
            <img id="foto" src="../hobby/hortensie.jpg" width="350" height="233" alt="testbild">
        </div>
    </div>
</div>
	

- Farbfelder -

- color field -

Ist eine Farbdefinition per Verweis eingestellt (gekennzeichnet mit O ) und die Farbe soll fixieren werden, klickt man mit gedrückter SHIFT-Taste auf das Farbfeld. Die Farbe ist dann fest eingestellt.

If a color definition is set by reference (indicated by O) and you want the color to fix, you click while holding down the SHIFT key on the color field. The color is then fixed.

Colorpicker

colorpicker

- Farbbänder -

- color ribbons -

Die Farbbänder reagieren auf Mausbewegung mit einer Verzögerung. Um die Farben nicht ungewollt zu verändern, sollte man die Maus zügig über die Farbbänder bewegen. Hat man trotzdem Probleme, kann die Reaktion bei Mausbewegung durch gedrückt halten der STRG-Taste unterbunden werden oder man schaltet die Farbbänder aus.

The ribbons respond to mouse movement with a delay. To avoid unintentionally changing the colors, you should move the mouse quickly over the ribbons. If you still have problems, the reaction can be suspend by holding down the CTRL key. Or you can turn off the color bands by click.

Das letzte Farbband mit Mausbewegung reagiert auf die Pfeiltasten. Das Farbauswahlband auf rechts und links, die beiden Helligkeitsbänder auf hoch und runter.

The last color ribbon you touch with the mouse reacts on the arrow keys. The color selection ribbon on right ans left, the both brigthness color ribbons on up and down.

- Schieberegler -

- slider -

Die Schieberegler werden mit der Maus eingestellt. Für jeden Schieberegler wird der aktuelle Wert angezeigt. Um Werte exakt einzustellen, werden durch Klick auf den Schiebereglerwert die Pfeiltasten für diesen Schieberegler aktiviert. Diesen erkennt man an dem schwarzen Rahmen.

The slider can be adjusted with the mouse. For each slider, the current value is displayed. To set values ​​exactly, you can activate the arrow keys by click on the slider value . This can be recognized by the black frame.

- zwei Farben mischen -

- mixing two colors -

Möchte man Farben mischen, so wird die erste Farbe mit den Farbbändern eingestellt. Durch Drag&Drop auf das Farbfeld des Mischers wird die Farbe im Mischer übernommen. Jetzt kann man den Mischer ausschalten (Checkbox) und die zweite Farbe einstellen. Nach dem Aktivieren (Checkbox) des Mischer sieht man das Ergebnis. Auf diese Weise lassen sich aber nur Farben aus den Farbbändern mit den Helligkeitsstufen mischen.

If you want to mix colors, the first color is set with the ribbons. By Drag&Drop the color to the field of the mixer, the color is taken in the mixer. Now you can turn off the mixer (checkbox) and set the second color. After enabling (checkbox) the mixer you can see the result. In this manner, you can only mix colors from the color ribbons and the brightness ribbons.

Schatten

shadow

Bei den Schatten ist auf die richtige Reihenfolge zu achten. Sonst wird ein Schatten von einem anderen überlagert.

For the shadow ensure that they are in the correct order. Otherwise a shadow is overlaid by another.

Borderimage

borderimage

Wenn nichts zu sehen ist, dann ist der Wert für width 0 oder der Wert für outset ist zu klein.

If you see nothing, then the value for width is 0 or the value for outset is too small.

Testet man mit lokalen Bildern, so muss die CSS-Definition nachbearbeitet werden, da der lokale Pfadname verwendet wurde. (file:///....)

If you test with local images, so the CSS definition must be edited, since the local path name was used.(file:///....)

Farbverlauf

gradient

- Einstellung des Winkels mit der Maus -

- setting angle with mouse -

Wenn der Winkel nicht mit der Maus eingestellt werden kann, fehlt die Einheit des Winkels.

If you can not adjust the angle with the mouse, the unit of the angle is missing.

- Überlagerung -

- overlay -

Bei Überlagerung ist auf die richtige Reihenfolge zu achten und als letztes die 'transparente' Farbe zu aktivieren. Will man eine scharfe Abgrenzung erreichen, z.B. bei einem Kreis, ist der Wert des Radius (rx) gleich dem stop Wert der letzten Farbe (nicht transparent) zu setzten. Das bedeutet, der Kreis hat einen Radius von z.b. 100px und die letzte Farbe endet bei 100px. Ab da wirkt die transparente Farbe.

For overlay is to ensure the correct order and to activate finally the 'transparent' color. If you want to reach a sharp demarcation, for example, in a circle, the value of the radius (rx) is equal to stop value of the last color (not transparent). This means that the circle has a radius of, e.g., 100px and the last color stops the position 100px. From that affects the transparent color.

farbkreis

- Beispiel Farbkreis -

- example color wheel -

Der Farbkreis besteht aus zwei ineinander verschachtelte DIV Elemente. Das innere DIV Element hat zwei Kreise. Der kleine deckt den Mittelpunkt ab und der große sorgt für den Rand. Das äußere DIV Element hat den class Namen hjbddorfkeepdesign, damit dessen CSS Definition mit bearbeitet werden kann.

The color wheel consists of two nested DIV elements. The inner DIV element has two circles. The little covers the center and the large covers the edge. The outer DIV element has the class name hjbddorfkeepdesign thus its CSS definition can be worked with.

Der kleine Kreis liegt im Vordergrund und der große im Hintergrund.

The small circle is in the foreground and the large in the background.

farbkreis

Das äußere DIV Element enhält die 16 Farben. Jede Farbe besteht aus einem linear Farbverlauf. Um die Farben im Kreis anzuordnen, benötigt man die Zusatzparameter. Die Breite (w) und die Höhe (h) des Hintergrundes wird auf 50% eingestellt. Damit werden die Farbverläufe für ein viertel Hintergrund definiert. In diesen viertel Hintergrund werden linear Farbverläufe angelegt, die mit der richtigen Reihenfolge und Farbe die Segmente erzeugen. Die Segmente in den anderen Vierteln werden über die x Werte und y Werte in die anderen Viertel verschoben.

The outer DIV element contains the 16 colors. Each color consists of a linear gradient. To arrange the colors in a circle, you need the additional parameter. The width (w) and the height (h) of the background is set to 50%. Thus, the gradients are defined for a quarter background. In these quarter background the linear gradients are created with the segments in the correct sequence and color. The segments in the other quarters are moved over the x values​​ and y values ​​in the other quarters.

  farbkreis

Im Bild sind alle Farbverläufe ausgeblendet bis auf vier, für jeden Quadranten ein linear Farbverlauf. Die anderen überlagern diese oder sind im Hintergrund. Der letzte Farbverlauf ist ein waagerecht zentriertes Rechteck und füllt so das übrig gebliebene Segment mit Farbe. Das obere rote Segment wird durch die Hintergrundfarbe gefüllt.

In the picture all linear gradients are disabled except four, in each quarter one. The other overlay these or are in the background. The final gradient is a horizontally centered rectangle and so fills the remaining segment with color. The upper red segment is filled with the background color.

Eigentlich sind die Segmente keine Farbverläufe, da sie nur aus einer Farbe bestehen. Um aber eine scharfe Abgrenzung der Farbe zu bekommen, ist die 'transparente' Farbe auf 1% gesetzt worden. Eigentlich sollen die stop Werte aufsteigend sein aber hier wird absichtlich der Farbverlauf verhindert.

Actually, the segments are no gradients, since they consist of only one color. But to get a sharp demarcation of the color the 'transparent' color is set to 1%. Actually, the stop values ​​should be ascending but here the gradient is intentionally prevented.

Die Einstellung des stop Wertes (60%)für die eigentliche Farbe wurde empierisch ermittelt. Die Farbkanten sollten sich bei gegebenem Winkel im Zentrum treffen.

The setting of the stop value (60%) for the actual color was determined empiricism. Bar edges should meet at a given angle in the center.

 

- Anzeige Ellipse falsch? -

- ellipse display incorrectly? -

In der Vorschau angezeigte Ellipse stimmt nicht mit der Farbfläche überein. Grund: die stop Werte bei den Farben beziehen sich auf die x-Achse. Ist also der stop Wert größer als der x-Radius (rx), ist auch die Farbfläche größer.

The previewing ellipse does not match the color space. Reason: the stop values ​​for the colors refer to the x-axis. Thus, if the stop value is greater than the x-radius (rx), the color space is larger.



zurück zurück