Impressum
Datenschutz

   Einen Rahmen (und mehr) für ein Bild auf der Webseite - März 2018 (Start November 2013)

Vorwort

Auf dieser Seite sind noch die alten Bilder aufgeführt. Die aktuellen Bilder sind in der Anleitung / Manual.

Anlass

Bei der Gestaltung von Webseiten wollte ich zu den Bilder einen Rahmen definieren, einfach um die Bilder etwas hervorzuheben. Da ich die Seiten mit dem Notepad-Editor erzeuge, also direkt im HTML-Code schreibe, war mir das "Try and Error", gemeint ist schreiben - im Browser gucken - passt nicht - und wieder schreiben .... zu umständlich. Auch wenn man den Rahmen testweise erst mal ausprobiert und dann in die Seite einbaut, stellt man fest, dass die Farben dann nicht zum Hintergrund passen.

Es wäre doch schön, wenn man beim designen des Rahmens das Ergebnis sofort in der Seite sehen könnte. Ausserdem wäre es hilfreich, wenn man ein Werkzeug hat, welches einen zueinander passende Farben anbietet.

Die Idee

Hier könnte ein Firefox Add-on helfen!

Bei einer Seite mit Bildern ruft man das gedachte "Add-on" auf und sucht sich ein Bild aus, welches einen Rahmen erhalten soll. In einem Fenster werden die Rahmenparameter eingestellt und deren Ergebnis ist sofort in der Seite sichtbar. Prima, das währen dann margin, padding und vor allen Dingen border ... und nicht vergessen, die Hintergrundfarbe und Vordergrundfarbe. Ach so - border hat ja auch Farbe!

Für Farbe nehmen wir einfach einen sogenannten 'Colorpicker'. War wohl nicht mit einfach - die, die ich gefunden habe, liefern alle eine Farbe aber wo war die Unterstützung mit den passenden Farben. Es gibt zwar 'Color Scheme Designer' aber in denen bekommt man nur die Farben für die Weiterbearbeitung.

Unter dem Begriff Farbschema und jeder Menge Farbenlehre fand ich die Definitionen der "Harmonischen Farben". Bei den Diskussionen, welches Farbschema und welche Farbkreis denn nun der richtige sei, orientierte ich mich an der technischen Realität, dem RGB-Farbraum oder dem RGB-Würfel (3 Dimensionen, rot, grün ,blau mit je Werten von 0 - 255).

FarbwürfelRGB-Farbraum bei wikipedia

Die Lösung

Rahmen Parameter

Entstanden ist ein Add-On mit einem Dialogfenster. Der Teil links im Dialogfenster enthält die Parameter für margin, border und padding und rechts befindet sich der 'Colorpicker'. Aber zu dem komme ich noch später. Man wählt also ein Element aus der Seite aus, zu dem ein Rahmen erzeugt werden soll. Das kann z. B. auch ein <p> Element sein aber in der Regel werden es wohl <img> Elemente sein. Eine Änderung eines Parameters wird sofort in der Webseite sichtbar.

Der besondere Clou

Das Bild zeigt die Rahmenparameter für ein <img>. Um das Image sind 3 weitere div-Elemente angeordnet, für die man ebenfalls die Rahmen-Parameter definieren kann. Auf diese Weise kann man den einfachen Rahmen mit den Zusatzrahmen der div-Elemente erweitern.




Harmonic Color Picker





Aus 'Color Picker' wird 'Harmonic Color Picker'

Und nun zum Harmonic Color Picker. Oft wird vom sogenannten Farbkreis gesprochen. Ich habe mich an dem RGB Farbraum orientiert und den Farbkreis als Regenbogenband dargestellt. Im Regenbogen wird wegen der Menge (1530 Farben) nur jede 5te Farbe angezeigt. Die Regenbogenfarben sind die RGB-Werte an 6 Kanten des RGB-Würfels. Da ein Würfel bekannterweise 12 Kanten hat, kann man 4 verschiedene Regenbogen wählen, so das alle Kanten mal vorkommen.

regenbogen regenbogen regenbogen regenbogen

Um die Cursorposition im Regenbogen werden darunter die Farben zur Auswahl angeboten. So erhält man die Basisfarbe. Mit den Farbbändern rechts und links kann dann die Helligkeit der Basisfarbe verändert werden.

Zum Thema 'passende Farben' gibt es die sogenannten harmonischen Farben bzw. ein Farbschema. Hier werden die Begriffe erklärt www.perfekte-website.de. Alle basieren auf jeweils gleichmäßige Abstände zur Basisfarbe im Farbkreis.

Mit den Schieberegler werden die Abstände zu den harmonischen Farben eingestellt.

Die Farbschamas sind:

Harmonic Color Picker with Mixer

Und noch was ...

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.

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.

Was ich vergessen hatte !

Es gibt zum Rahmen 'border' noch zusätzlich Parameter für abgerundete Ecken. Die 'Runden-Ecken' habe ich noch eingebaut.

Ebenso die Parameter für Schatten. Da man beliebig viele Schatten definieren kann (manchem genügt schon einer!), habe ich ein weiteres Dialogfenster entworfen. Die Werte einer Listbox sind nicht bearbeitbar, deshalb wandert ein überlagertes Element mit Eingabefelder über die Listbox. Kleiner Hinweis: manchmal hilft die Strg-Taste!

Border Image Dialog

... UND ...

Mit CSS3 gibt es die Möglichkeit ein 'border-image' zu definieren. Das Bild wird in 9 Teile zerlegt. (Linien im Bild) Die Eckteile werden natürlich an den Rahmenecken positioniert. Die Seitenteile an den entsprechenden Seiten und das mittlere Teil als Hintergrund. (fill) Weitere Parameter geben an, wie die Teile für die Darstellung verarbeitet werden. (horizontal, vertical)

ACHTUNG: Bei älteren Browsern reagiert das 'border-image' nicht, da diese kein CSS3 können.

jetzt kommt die Krönung

Dialog für Gradienten

Als Alternative zur Hintergrundfarbe gibt es noch Farbverläufe (Gradients). Diese werden im entsprechenden Dialog bearbeitet.

ACHTUNG: Es wird nur die Notation gemäß CSS3 W3C Draft unterstützt.

In der neusten Version sind auch Transform Definitionen dazugekommen. Jetzt kann man die Elemente zum Beispiel drehen verzerren und/oder kippen.

... ab der Version 2.0

Mittlerweile ist der
Advanced Frame Designer with Gradients so umfangreich geworden, dass Tooltips nicht mehr ausreichen. Aus diesem Grund ist ein Hilfesystem integriert mit hoffentlich aussagekräftigen Hinweisen.

Zusätzlich geht es hier zur Anleitung
DIE ANLEITUNG

 


Genug der Erklärungen.
Am besten ist, man probiert den Advanced Frame Designer mal selber aus.

testbild

Ein Bild, um den Advanced Frame Designer with Gradients zu testen

Hier gibt es weitere Testbeispiele

Info:

Nach dem Aktivieren des Add On wählt man durch Klick in der Web-Seite ein HTML-Element, für das man einen Rahmen entwerfen möchte. Der Elementtyp wird neben dem Curser angezeigt. Danach kann der Rahmen im Dialogfenster gestaltet werden.

Das Add-On:

... ist bei Mozilla registriert Advanced Frame Designer

... liefert als Resultat die CSS-Definitionen in der Zwischenablage (Clipboard).

Version 2.3

Advanced Frame Designer with Gradients.

Bedienugsanleitung

Zusätzlich zu den Tooltips geht es hier zur Bedienugsanleitung / Manual

in Vorbereitung, Version 2.4

Ein existierendes Hintergrundbild wird gesichert bevor es durch die Gradienten ersetzt wird.

Der Border y-Radius kann mit dem Border x-Radius gekoppelt werden, so dass beide identisch sind.

BUGFIX Schieberegler im Colorpicker
Die Schieberegler konnten nicht mit der Maus bewegt werden. Grund ist die innerhalb der Updateroutinen enthaltene Clipboard Funktion, bei der für den Copybefehl eine 'select()' erforderlich ist. Durch den 'select()' wird dem Schieberegler (slider: input Element Typ range) der Focus entzogen. Work around: Beim Schieberegler wird das Clipboard nicht gesetzt und dann bei der nächsten Mausbewegung nachgeholt.


Mai 2018, Version 2.3

Die Farbe in einem Farbfeld kann temporär auf Transparent (OFF) gesetzt werden.

Das äußere DIV wird mit "display:inline-block angelegt. Manchmal erscheinen Zwischenräume. Durch Umschalten auf block oder unset können diese vermieden werden.

Wird ein Gradient als "background-image" für "border" zugeordnet, werden in Borderimage-Dialog Standardwerte gesetzt damit der Rahmen sichtbar wird.

Fehler wurden behoben.



Ende April 2018, Version 2.2

Ein weiterer CSS Parameter "blend-mode" wurde integriert. Für die Parameter "background-position" und background-size" kann man wählen, ob der Hintergrund innerhalb der Elementgrenzen liegen muss oder auch außerhalb.

Einige Einheiten wurden ergänzt. Die Einheiten werden umgerechnet, auch die Font-abhänige Einheit "em".

Fehler wurden behoben.

April 2018, Version 2.1

Für die Farbfelder Hintergrund, Vordergrund und Rahmen gab es keine Transparenz. In allen Farbfelder ist jetzt die Transparenz (Alpha-Wert) integriert. Die Transparenz kann mit dem Mausrad oder mit Ziehen der Maus bei gedrückter rechter Maustaste verändert werden.

Fehler wurden behoben.

März 2018, Version 2.0

Bedingt durch die Umstellung des Firefox Browsers, musste das Addon überarbeitet werden. Das Addon wurde komplett überarbeitet. Folgende Erweiterungen sind hinzugekommen.

Dezember 2013, Version 0.5

November 2013, Version 0.4

Juli 2013, Version 0.3

Mai 2013, Version 0.2 mit 'border-image'

März 2013, Test Version mit 'border-radius' und 'box-shadow'

Februar 2013, alpha Version



zurück zurück