Inkscape – Farbrad [Colorwheel]

Diese Tutorial ist eine Grundlage für verrückte Design-Ideen.
Zum Beispiel als Pfad erstellt für einen Regenbogen oder Farbrand mit Weichzeichner und vieles mehr.

Ergebnis des Tutorials
Colorwheel-small
Die Einstellungen sind in Bearbeiten -> Klonen -> Gekachelte Klone erzeugen.



Werte
P1: Einfache Verschiebung
Reihen: 1
Spalten: 255
Rotation = Segmentgröße: 1,4117°
Farbe pro Spalte H-Wert: 0,3921%


Colorwheel-12-rows

Werte
P1: Einfache Verschiebung
Reihen: 1
Spalten: 12
Rotation: 30°
Farbe pro Spalte H-Wert: 8,3%


Berechnungen

360 Grad geteilt durch 255 Segmente gleich 1,411764706 Grad je Segment.
360° / 255 = 1,411764706°

100 % Farben geteilt durch 255 Segmente gleich 0,392156863 Farbanteil je Segment.
100 % / 255 = 0,392156863% H

Startfarbe
HSL, H = 0, S = 255, L = 128, A = 255


Objekt

Mit gedrückter Strg-Taste einen Kreis ziehen.
Objekt-Füllung undefiniert lassen, das ist das Fragezeichensymbol und keine Kontur.


Video


Bilder

zfr07

zfr08

zfr09

zfr10

zfr11

zfr12

zfr13

CSS-Zeichnen Dreiecke

 


<div style="width: 24em; height: 4em; background: #fff; border:.1em solid #ddd;">
<div style="border-top: 4em solid goldenrod; border-bottom: 4em solid transparent; border-right: 24em solid transparent;">
</div>
</div>


 


<div style="width: 24em; height: 4em; background: #c00; border:.1em solid #ddd;">
<div style="border-top: 4em solid goldenrod; border-bottom: 4em solid transparent; border-right: 24em solid transparent;">
</div>
</div>


 


<div style="width: 24em; height: 4em; background: #fff; border:.1em solid #ddd;">
<div style="width: 0; height: 0; border-top: 4em solid yellowgreen; border-bottom: 4em solid transparent; border-right: 4em solid transparent;">
</div>
</div>


 


<div style="width: 24em; height: 4em; background: url(rose.jpg) #fff; border:.1em solid #ddd;">
<div style="width: 0; height: 0; border-top: 2em solid transparent; border-bottom: 2em solid royalblue; border-left: 2em solid transparent; border-right: 2em solid transparent;">
</div>
</div>


 


<div style="width: 24em; height: 4em; background: #fff; border:.1em solid #ddd;">
<div style="width: 0; height: 0; border-top: 2em solid transparent; border-bottom: 2em solid mediumvioletred; border-left: 22em solid transparent; border-right: 2em solid transparent;">
</div>
</div>


 


<div style="width: 24em; height: 4em; background: #fff; border:.1em solid #ddd;">
<div style="width: auto; height: 2em; border-top: 2em solid transparent; border-bottom: 2em solid transparend; border-right: 2em solid black;">
</div>
</div>


 


<div style="width: 24em; height: 4em; background: #fff; border:.1em solid #ddd;">
<div style="width: 0; height: 0; border-top: 2em solid goldenrod; border-bottom: 2em solid royalblue;border-left: 2em solid yellowgreen; border-right: 2em solid mediumvioletred;">
</div>
</div>


 


<div style="width: 24em; height: 4em; background: #fff; border:.1em solid #ddd;">
<div style="border-width: 1em; height: 2em; border-color:goldenrod royalblue yellowgreen mediumvioletred; border-style:solid;">
</div>
</div>

box-shadow

Es gibt noch viel fantastischere Möglichkeiten für box-shadow, hier einige Anregungen.

Weicher Schatten


<div style="width: 24em; height: 4em; background: #fff; border:.1em solid #ddd; box-shadow: 1.1em 1.2em 1.3em royalblue;"></div>

• 1.1em = horizontale Verschiebung
• 1.2em = vertikale Verschiebung
• 1.3em = Unschärfe-Radius [Blur]
• royalblue = Schattenfarbe


Harter Schattten


<div style="width: 24em; height: 4em; background: #fff; border:.1em solid #ddd; box-shadow:1.1em 1.2em silver;"></div>


4 Farben-Schatten


<div style="width: 24em; height: 4em; background: #fff; border:.1em solid #ddd; box-shadow: 5px 5px 5px mediumvioletred,-5px 5px 5px yellowgreen,5px -5px 5px royalblue,-5px -5px 5px goldenrod;"></div>


Innerer weicher Schatten auf 2 Seiten


<div style="width: 24em; height: 4em; background: #fff; border:.1em solid #ddd; box-shadow: inset 5px 5px 5px black;"></div>


Innerer harter Schatten auf 2 Seiten


<div style="width: 24em; height: 4em; background: #fff; border:.1em solid #ddd; box-shadow: inset -5px -5px 0 5px #000;"></div>


Innerer weicher Schatten auf allen Seiten


<div style="width: 24em; height: 4em; background: #fff; border:.1em solid #ddd; box-shadow: inset 0 0 10px black;"></div>


Äußerer weicher Schatten auf allen Seiten


<div style="width: 24em; height: 4em; background: #fff; border:.1em solid #ddd; box-shadow: 0 0 10px black;"></div>


Äußerer weicher Schatten auf 1 Seite


<div style="width: 24em; height: 4em; background: #fff; border:.1em solid #ddd; box-shadow: 0 20px 20px -20px black;"></div>


Transparenter Schatten


<div style="width: 24em; background: mediumvioletred;">
<div style="width: 50%; height: 4em; box-shadow: 3em 1em rgba(0,0,0,0.3);"></div>
</div>


Schattiger Schatten


<div style="width: 24em; height: 4em; background: #fff; border:.1em solid #ddd; box-shadow: 0 0 .5em .3em black,1.5em -1em yellowgreen,1.5em 1em 2em mediumvioletred,-1.5em 1em goldenrod,-1.5em -1em 2em royalblue;"></div>

text-shadow

Beispieltext mit text-shadow


<div style="text-shadow: .1em .2em .3em #666; font-size: 2em; color: mediumvioletred;">Beispieltext mit <em>text-shadow</em>
</div>

• 0.1em = horizontale Verschiebung
• 0.2em = vertikale Verschiebung
• 0.3em = Blur [Unschärfe-Radius]
• #666 = Schattenfarbe
• mediumvioletred = Schriftfarbe


Beispieltext mit 2x Textschatten


<div style="text-shadow: 0 0 .5em red,.1em .1em .1em gold; color: white; font-size: 2em;">Beispieltext mit 2x Textschatten
</div>


Beispieltext im Vordergrund


<div style="text-shadow: .1em .1em .1em black; color: white; font-size: 2em;">Beispieltext im Vordergrund
</div>


Beispieltext mit Kontur


<div style="text-shadow: 0 -1px black,1px 0 black,0 1px black,-1px 0 black; color: white; font-size: 2em;">Beispieltext mit Kontur
</div>


Beispieltext im Inset


<div style="text-shadow: 0 -1px 1px black,0 1px 1px white; color: silver; font-size: 2em; font-weight:900;">Beispieltext im Inset
</div>


Beispieltext im Outset


<div style="text-shadow: 0 -1px 1px white,0 1px 1px black; color: silver; font-size: 2em; font-weight:900;">Beispieltext im Outset
</div>


Weitere Informationen:
http://www.wss-expert.de/Style/Examples/007/text-shadow.html
http://pixeltuner.de/css3-text-shadow/

border-radius


<div style="width: 24em; height: 4em; background: silver; border-radius: 0 2em 4em 6em;"></div>

border-top-left-radius: 0;
border-top-right-radius: 2em;
border-bottom-right-radius: 4em;
border-bottom-left-radius: 6em;


Border-Radius mit 1 Wert alle Ecken


<div style="width: 24em; height: 4em; background: silver; border-radius: 6em;"></div>


Border-Radius mit 1 Ecke


<div style="width: 24em; height: 4em; background: silver; border-radius: 0 0 4em 0;"></div>


Border-Radius mit 2 Ecken unten


<div style="width: 24em; height: 4em; background: silver; border-radius: 0 0 6em 6em;"></div>


Border-Radius mit 2 diagonale Ecken


<div style="width: 24em; height: 4em; background: silver; border-radius: 6em 0;"></div>


Border-Radius mit 2 unterschiedliche Werten in 2 Ecken


<div style="width: 24em; height: 4em; background: silver; border-bottom-left-radius: 6em 1em; border-bottom-right-radius: 2em 1em;"></div>


Border-Radius als Kreis


<div style="border-radius: 10em; height: 10em; width: 10em; background: silver;"></div>