Einen Rahmen (und mehr) für ein Bild auf der Webseite - November 2013

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

Border Image Dialog

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.

Mittlerweile ist der
Advanced Frame Designer with Gradients so umfangreich geworden, dass in den Tooltips nur kleine Hinweise gegeben werden können.

Deshalb 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 0.5

Advanced Frame Designer with Gradients. Hier vorab: afd.xpi

Bedienugsanleitung

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

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