Impressum
Datenschutz



   Bedienugsanleitung für den Advanced Frame Designer with Gradients

   Manual for the Advanced Frame Designer with Gradients

Inhalt
Contents
 Deutsch 
(Taste D)
 English 
(Key E)
 Beispiele 
 Examples 

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

This color wheel is defined only
by CSS with gradients.


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. Bei relativen CSS Selektoren (z. B. #divid img {} oder .div:first-child {} ) werden die zusätzlichen div-Elemente unter Umständen nicht korrekt angezeigt. Es sollten nur id-Selektoren (#divid) oder class-Selektoren (.myclass) verwendet werden.

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. For relative CSS selectors (such as #divid img {} or .div: first-child {}), the additional div elements may not be displayed correctly. Only id selectors (#divid) or class selectors (.myclass) should be used.


Wofür ist er zu gebrauchen

For what is he usefull

main dialog with box-modell
Hauptdialog
Box Modell und Colorpicker
Main dialog
box modell and colorpicker

Was sind seine Vorteile

What are the advantages

css transform definitions
Transform
Definitionen
Transform
definitions
shadow-box dialog
Schattendialog
 
Shadow dialog
 

Die Komponenten

The components

dialog borderimage
Rahmen
per Bild
Border
image
dialog gradient with colorstop
Dialog Farbverläufe
 
Dialog gradients
 

 


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.

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 der Hauptdialog.

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

3.)

Um eine Farbe aus der Web-Seite zu übernehmen, mit der Maus bei gedrückter STRG-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. Im Ergebnis sollten noch Definitionen mit 'unset' oder 'none' entfernt und Pfadangaben angepasst werden.

The CSS result is in the clipboard. In the result, definitions with 'unset' or 'none' should be removed and path specifications adjusted.


Hauptdialog

Main dialog

Box - Modell im Hauptdialog

Box - Model in the main dialog

--- Erst mal das einfache ---

--- First 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 Box-Modell angedeutet wird. Die darunter liegenden Felder zeigen die Hintergrundfarbe und die Vordergrundfarbe. Das Feld mit dem roten Kreuz Box-Modell setzt die Werte für das Element zurück. 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 Box-Modell in the middle. The two fields underneath show the background color and the foreground color. The field with the red cross Box-Modell resets all values. 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. Tippt man beim x-Wert auf die Leertaste, wird der y-Wert mit dem x-Wert gekoppelt. Beide Werte sind dann identisch.

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. If you tap the spacebar in the x-value, the y-value is coupled to the x-value. Both values are then identical.

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 activate help werden die Hilfetexte in den Fenstern aktiviert.
Die Schaltflächen mit den Zahlen sind 6 interne Speicherplätze, mit der man die aktuellen Einstellungen speichern Tooltip und wieder abrufen load memory kann.
Die Schaltfläche activate transform aktiviert die 'transform' Definitionen.
Die Schaltfläche activate shadow-box aktiviert den Dialog für Schatten.
Die Schaltfläche activate borderimage aktiviert den Dialog für Border-Image.
Die Schaltfläche activate gradient aktiviert den Dialog für Farbverläufe.
Falls bei dem gewählten Element das float Attribut gesetzt ist, wechselt die Schaltfläche change position die Position links-zentriert-rechts.

On the left side of the main dialog are buttons.
With the first button activate help you can activate the help text for the dialogs.
The buttons with the numbers are 6 internal memories to temporary save Tooltip and restore Tooltip all settings.
The button activate transform activate the 'transform' definitions.
The button activate shadow-box activate the dialog shadow.
The button activate borderimage activate the dialog border-image.
The button activate gradient activate the dialog gradients.
If the chosen element has the float attribute set, the button activate position change the position left-center-right.

--- vorab: Das Hilfesystem ---

--- first: The helpsystem ---

DIV Umschalten
Beispiel
Hilfetext
example
help text

Nach dem Klick auf die Schaltfläche activate help ist die Hilfe aktiv. Bewegt man die Maus über die Dialogelemente zeigt der Hilfecursor helpcursor, welches Element einen Hilfetext hat. Ein Klick auf das Element zeigt den Hilfetext. Nach einer Zeit oder durch Berührung des Hilfetextes mit der Maus, wird der Hilfetext ausgeblendet. Die Taste STRG beim Drücken der Hilfe-Schaltfläche unterdrückt das Zeit-gesteuerte Ausblenden. Die Taste SHIFT beim Drücken der Hilfe-Schaltfläche aktiviert die automatische Anzeige aller Hilfetexte bei Mausberührung.

DIV Umschalten
Beispiel
Hilfetext
example
help text

After clicking on the button activate help, the help is active. If you move the mouse over the dialog elements, the help cursor helpcursor shows which element has a help text. A click on the element shows the help text. After a time or by touching the help text with the mouse, the help text is hidden. The CTRL key when pressing the help button suppresses the time-controlled fade out. The SHIFT key when pressing the help button activates the automatic display of all help texts width mouse touch.

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

--- Why are the div elements ---

DIV Umschalten
Element
ist aktiv
element
is active

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 inneres div, mittleres div und äußeres div dargestellt. Durch Drücken einer 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 inner div, middle div und outer div. 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 select you can switch back to the chosen element.

Mit den drei Div-Elementen und dem ausgewählten Element können insgesamt 4 Rahmen definiert werden.

With the three div elements and the selected element a total of 4 frames can be defined.

Das aktive Element erkennt man an der inaktiven Schaltfläche und den darunter stehenden Farbfelder.

The active element can be recognized by the inactive button and the color fields underneath.

DIV Umschalten
innere div
ist aktiv
inner div
is active
DIV Umschalten
mittlere div
ist aktiv
middle div
is active
DIV Umschalten
äußere div
ist aktiv
outer div
is active

--- Ein bisschen Farbe ---

--- A little bit of color ---

Wie die Farbfelder funktionieren

How the color fields work

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 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 Stern ★ 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 star 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

Die 'transparente' Farbe wird durch ein Muster dargestellt.

The 'transparent' color is represented by a pattern.

color alpha value color off

Angezeigt wird die Farbe ohne Alpha-Wert (Transparenz). Mit dem Maus Rad wird die Transparenz verändert. Ist kein Mausrad vorhanden, so kann alternativ mit Klick auf die rechte Maustaste und Ziehen der Maus der Alpha-Wert verändert werden. (wie ein unsichtbarer Schieberegler)

The color is displayed without alpha value (transparency). The mouse wheel changes the transparency. If there is no mouse wheel, alternatively the alpha value can be changed by clicking on the right mouse button and dragging the mouse. (like a hidden slider)

Die Farbe kann temporär mit der Alt Taste und Klick ausgeschaltet werden (OFF). Die Farbe ist dann transparent.

The color can be switched off temporarily with the ALT key and click (OFF). The color is then transparent.

--- 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 Symbole. 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 symbols. 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 und klickt auf eine Farbe, werden nur noch die verwandten Farben angezeigt, z. B. alle 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 and click on a color, only the similar colors are shown, like all 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
Regenbogenband
Auswahlband


Basisfarbe



analoge Farben
triadische Farben
tetradische Farben
teilkomplemtäre Farben
Komplementärfarbe
element
is active

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. ( -> mousover)

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. ( -> mousover)

(BAS)

basecolor

(ANA)

analogcolor

(TRI)

triadiccolor

(TET)

tetradiccolor

(SKO)

splitcomplementarycolor

(KOM)

complementarycolor

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. Die Schieberegler können 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. You can adjust the slider 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's getting more than colorful ---

Harmonic Color Picker
RGB Mixer und Alphawert
Auswahlfarbband


Basisfarbe



analoge Farben
triadische Farben
tetradische Farben
teilkomplemtäre Farben
Komplementärfarbe
RGB mixer and alpha value
selector color ribbon


base color



analogous colors
triadic colors
tetradic colors
split-complementary colors
complementary color

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).

Mit den Pfeiltasten (rechts, links) können die Farbwerte exakt eingestellt werden.

With the arrow keys (right, left) you can exactly adjust the color values.

Möchte man zwei Farben aus den Farbbändern mischen, stellt man erst die erste Farbe ein. Per Drag&Drop auf das Mixer Farbfeld wird die Farbe auf den Mixer übertragen. Dann stellt man die zweite Farbe mit den Farbbändern ein und setzt die Checkbox mix.

If you want to mix two colors from the coor ribbons, you first set the first color. The color is transferred to the mixer by drag&drop it onto the mixer color field. Then set the second color with the ribbons and set the checkbox mix.

--- 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.

Am unteren Rand sind weitere 5 Schaltflächen color view, mit denen nur bestimmte Farben angezeigt werden (von links nach rechts).

At the bottom are another 5 buttons, which only show certain colors (from left to right).


Schattendialog

Shadow dialog

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

--- For 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, 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.

Bei Mausberührung bekommt das rechte Bild einen Rahmen mit einem borderimage.

When you touch the right picture with the mouse, the picture gets a frame with a borderimage.

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

ATTENTION: Did you set on parameter width the unit * (star = no unit), the value of width is a factor, which will be multiplied with the frame width form the box-model. The result you can see in the tooltip width. With border-width = 20px and width = 3* the result is for width is 60px. If parameter slice means unit px '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
Gradientenliste Vorschau Colorstops
gradient list preview colorstops

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

gradient
Gradientenliste
gradient list

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 werden die Farbverläufe erzeugt. Mit der Checkbox rep werden die Repeat Varianten aktiviert.

With the buttons add, add, add you can create the gradients. With the checkbox rep the repeat variants are activated.

Mit der Schaltfläche borderimage wird die aktuelle Definition dem Rahmen zugeordnet als Ersatz für ein Borderimage.

The button borderimage will assign the current definition to the border as a substitute for a borderimage.

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.

The button delete delete the selected gradient.

Die Schaltfläche toggle ändert die Farbe der Marker. Mit gedrückter SHIFT-Taste werden die Marker im Vorschaufeld ein-/ausgeblendet.

The button toggle changes the color of the marker. With SHIFT-key pressed the marker in the preview box are switch on/off

Die Schaltfläche reset setzt den Kreis oder die Ellipse zentriert zurück. Dies ist machmal nützlich, wenn der Kreis/die Ellipse zu groß geworden ist oder die Position weit außerhalb des Feldes liegt.

the button reset reset the circle and ellipse in the center. This is sometimes useful if the circle / ellipse has become too large or the position is far outside the field.

Die Schaltfläche center zeigt zusätzliche Felder.

The button center displays additional fields.

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.

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.

zusätzliche Felder

additional fields

gradient
erweiterte Gradientenliste
extend gradient list

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 erscheinen die Spalten background position, background size, repeat, blend-mode und ein rule (Regel) Feld:

These are shown by this button extend. In the list appears the column background position, background size, repeat, blend-mode and a rule field:

*** Das bedeutet, keine Positionen außerhalb der Elementgrenzen und die Größe wird so angepasst, dass der Hintergrund nicht außerhalb des Elementes liegt.

*** This means that there are no positions outside the element boundaries and the size is adjusted so that the background does not fall outside the element.

Mittlerer Teil: Vorschau mit Einstellungen

Middle part: Preview with settings

gradient
Vorschau
preview

--- Erst einmal die Bedienungselemente ---

--- First the controls ---

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.

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

Round the preview box there are gray marker gray markeron the sides an the corners. A click on a gray marker positioned the gradient or defined the direction. The corresponding keyword you see in the gradient 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.

Bei dem Farbverlauf ellipse wird die Ellipse dargestellt und zur Orientierung die 50% Ellipse sowie weitere Marker. Die gelben Marker yellow marker rechts im Vorschaufeld positionieren die Ellipse an der nächsten Seite oder der nächsten Ecken, die bläulichen Marker blue marker 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 yellow marker right in the preview box positioned the ellipse to the closest or farthest side, the blue marker blue marker to the closest or farthest corner. With a click on a marker you can set the position and the size.

Die Marker auf der Ellipsenlinie sind der x-Radius und der y-Radius. 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 x und y Koordinaten.

The marker on the ellipse line are for the x-radius and the y-radius. 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 x and y coordinates.

--- was kann man sehen - oder auch nicht - und warum ---

--- what can you see - or even not - and why ---

gradient
drei Farbverläufe
three gradients

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.

In dem Beispiel gibt es ein Farbverlauf linear, einen vom Typ circle und einen vom Typ ellipse. Zu sehen ist der Farbverlauf linear. Vom Farbverlauf ellipse werden die Marker angezeigt, weil dieser ausgewählt wurde. Vom Farbverlauf circle sieht man nichts. --- warum --- Der Farbverlauf linear steht in der Liste an erster Position und verdeckt die beiden anderen. Die Farbverläufe müssen in die richtige Reihenfolge gesetzt werden und die 'transparente' Farbe ist zu aktivieren.

In the example there is a gradient linear one with type circle and another with type ellipse. You can see the gradient linear. Fram the gradient ellipse you see the markers because it was selected. But you can see nothing from the color gradient circle. --- why --- The gradient linear is first in the list and covers the other two. The gradients must be set in the correct order and the 'transparent' color must be activated.

Hierbei ist die Spalte off sehr nützlich. Durch setzen der Checkbox können die Farbverläufe deaktiviert werden.

The column off is very useful here. By setting the checkbox, the color gradients can be deactivated.

gradient
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.

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.

Der Farbverlauf circle liegt hinter dem Farbverlauf ellipse. Die Farbe Blau des colorstops vom Farbverlauf circle hat den Wert des Radius. Die nachfolgende Farbe ist transparent mit colorstop 90px. Damit endet die Farbe exakt am Radius und außerhalb des Radius ist die Farbe 'transparent'.

The gradient circle is behind the gradient ellipse. The color blue of the color stop of the gradient circle has the value of the radius. The following color is transparent with colorstop 90px. So the color ends exactly at the radius and outside the radius the color is 'transparent'.

Der Farbverlauf ellipse (mouse over) hat bei Farbe 'orange' den colorstop 70px, die Hälfte vom Radius. Deshalb liegt die Farbe exakt auf dem Marker '50% Ellipse'. Die anderen Farben werden gleichmäßig verteilt.

The color gradient ellipse (mouse over) with color 'orange' has the colorstop 70px, half of the radius. Therefore, the color is exactly on the marker '50% ellipse'. The other colors are equally distributed.

Rechter Teil: Farbdefinitionen

Right part: color definitions

gradient
Colorstopliste
colorstop list

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.
Mit der Schaltfläche up wird nur die Farbe der aktuellen Farbdefinition in der Liste nach oben geschoben. **
Mit der Schaltfläche down wird nur die Farbe der aktuellen 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 'keine Angabe' Einheit '-' gesetzt.

** Dadurch bleibt die Reihenfolge der colorsop Positionen erhalten. Für einen Farbverlauf müssen die colorstop Werte aufsteigend sortiert sein.

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.
With the button up only the color of the selected color definition is moved up. **
With the button down only the color of 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 'no value' unit '-'.

** This keeps the order of the colorsop positions. For a gradient, the colorstop values must be sorted in ascending order.

 


Wie kann man ...

How can you ...

--- Tipps ---

--- Tips ---

- Element auswählen -

- select an element -

   <div id="1">
      <p id="2"></p>
      <div id="3">
         <a id="4"></a">
         <p id="5">
            <img id="6">
            <div id="7"></div> 
         </p>
      </div>
   </div>

Möchte man ein DIV-Element auswählen, das man mit der Maus nicht 'erwischen' kann, weil es überlagert wurde, kann man im ElementBaum mit SHIFT-Taste, STRG-Taste und ALT-Taste navigieren. Ist die Maus bei Element 7, so erhält man mit:

  • SHIFT oder STRG: Element 5 (parent)
  • SHIFT und STRG: Element 3 (parent parent)
  • ALT: Element 6 (previous)
  • (SHIFT oder STRG) und ALT: Element 4 (parent previous)
  • SHIFT und STRG und ALT: Element 2 (parent parent previous)

If you want to choose a DIV element that you are not able to 'catch' with the mouse, because it is overlaped, you can navigate in the element tree with SHIFT-Taste, STRG-Taste und ALT-Taste,

  • SHIFT or CTRL: element 5 (parent)
  • SHIFT and CTRL: element 3 (parent parent)
  • ALT: element 6 (previous)
  • (SHIFT or CTRL) and ALT: element 4 (parent previous)
  • SHIFT and CTRL and ALT: element 2 (parent parent previous)

- 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.

A click on the icon opens the dialogs. When the dialog is already open, the dialog is placed by clicking in the foreground.

Box - Modell

box - model

- Zusatz-Div's -

- additional Div's -

Um das gewählte Element, für das man einen Rahmen erstellen möchte, werden drei zusätzliche div Elements gesetzt. Wenn diese anschließend in der Webseite verwendet werden oder bereits implementiert wurden, müssen die Div-Elemente den Klassennamen hjbddorfkeepdesign erhalten. Über den Klassennamen erkennt der Advanced Frame Designer die div-Elemente und übernimmt deren Style-Parameter.

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 detects the div elements and takes over their style parameters.

<div id="outerdiv" class="outer hjbddorfkeepdesign"">
    <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 fields -

Ist eine Farbdefinition per Verweis eingestellt (gekennzeichnet mit ★ ) und die Farbe soll fixieren werden, klickt man mit gedrückter SHIFT-Taste auf das Farbfeld. Die Farbe ist dann fest eingestellt. Mit der STRG-Taste und Klick auf das Farbfeld wird die Farbe im Colorpicker als Basisfarbe übernommen.

If a color definition is set by reference (indicated by ☆) and you want the color to fix, you click while holding down the SHIFT key on the color field. The color is then fixed. With the CTRL key and clicking on the color field, the color is taken over in the colorpicker as base color.

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 react on 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 and left, the both brigthness color ribbons on up and down.

- falsche Farben -

- wrong color -

Wenn falsche Farben angezeigt werden, ist vermutlich die Checkbox mix an. Bei den Farbverläufen ist nicht der richtige Farbverlauf aktiviert oder wird überlagert oder es fehlt die Tansparenz.

If wrong colors are displayed, the checkbox mix is probably on. Gradients do not have the correct gradient selected or is overlapped or there is no transparency.

- Schieberegler -

- slider -

Die Schieberegler werden mit der Maus eingestellt. Für jeden Schieberegler wird der aktuelle Wert angezeigt. Die Werte können auch mit den Pfeiltasten eingestellt werden.

The slider can be adjusted with the mouse. For each slider, the current value is displayed. You can adjust the values with the arrow keys.

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. Das Bild wird in der 'base64' Notation eingebunden. Alternativ kann ein vorhandenes Bild vom Server geladen werden. Die Pfadangabe ist relativ zur Webseite.

If you test with local images, so the CSS definition must be edited. The image is included in the 'base64' notation. Alternatively, an existing image can be loaded from the server. The path is relative to the website.

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 x 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 x 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
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. Die Reihenfolge der Farben ist im großen kreis transparent, Hintergrundfarbe deckt den äußeren Teil ab. Im kleinen Kreis ist die Reihenfolge Hintergrundfarbe, transparent. Somit bleibt der Farbring übrig.

The small circle is in the foreground and the large in the background. The order of the colors is in the large circle transparent, background color covers the outer part. In a small circle the order is background color, transparent. Thus, the color ring remains.

Wird der Farbkreis in der Webseite ausgewählt, so findet man der Farbkreis im box modell beim inner div. Das ausgewählte Elemen im box model ist das div mit den grauen Kreisen.

If the color wheel is selected in the web page, you will find the color wheel in the box model in the inner div. The selected element in the box model is the div with the gray circles.

farbkreis
farbkreis

Das äußere DIV Element enhält die 16 Farben und erscheint im Dialog Box-Modell beim inner Div. 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 and appears in the box model dialog at inner Div. 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.

Im 'mouseover' Bild sind alle Farbverläufe ausgeblendet bis auf einen. 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 'mouseover' image all color gradients are hidden except for one. The others overlay them or are in the background. The last gradient is a horizontally centered rectangle, filling the leftover segment with color. The upper red segment is filled by 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. Die Einstellung der stop Werte für die Farbe wurde empierisch ermittelt. Die Farbkanten sollten sich bei gegebenem Winkel im Zentrum treffen.

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. The setting of the stop values for the actual color was determined empirically. The color 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