-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathcss-muster.html
executable file
·231 lines (179 loc) · 15.9 KB
/
css-muster.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
<!DOCTYPE html>
<html lang="de" prefix="og: http://ogp.me/ns#">
<!--
Hallo Fremde:r,
schön, dass du dich umschaust! Falls du Fragen hast oder wissen
möchtest, wie bestimmte Sachen auf meiner Website funktionieren,
schreib doch einfach an postfach2b [ät] web.de oder sende einen
Post an @[email protected].
Weiterhin viele schöne Entdeckungen!
-->
<head>
<meta charset="UTF-8">
<title>Muster aus CSS-Farbverläufen // @cz+</title>
<link href='bestand/style.css' rel='stylesheet'>
<link href="bestand/czSlab.woff2" rel="preload" as="font" type="font/woff2" crossorigin>
<link href="https://charakterziffer.github.io/rss.xml" rel="alternate" type="application/rss+xml" title="@cz+ Blogartikel">
<link rel="icon" href="/bestand/favicon.png">
<link rel="apple-touch-icon" href="/bestand/touchicon.png">
<meta name="theme-color" content="#228811">
<meta name="color-scheme" content="light dark">
<meta name="description" content="Der grüne Streifen am rechten Rand meines Blogs ist kein Bild, sondern Code. Dabei werden verschiedene Farbverläufe übereinander gelegt.">
<meta name="author" content="Gerhard Großmann, postfach2b [ät] web.de">
<meta name="fediverse:creator" content="[email protected]" />
<meta name="keywords" content="Gerhard Großmann, Regensburg, Hohenfels, charakterziffer, Blog, Twitter, Mastodon">
<meta name="robots" content="index, follow">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="referrer" content="strict-origin">
<style> /* QR-Code mit URL für Ausdrucke, siehe smashingmagazine.com/2013/03/tips-and-tricks-for-print-style-sheets/ */
@media print { header:after {
content: url('https://chart.googleapis.com/chart?cht=qr&chs=110x110&chl=https://charakterziffer.github.io/css-muster.html&choe=UTF-8');
position: absolute; right: .5em; top:.2em; z-index:-1; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } } </style>
<meta property="og:image" content="https://charakterziffer.github.io/bestand/cz200x200.jpg">
</head>
<body>
<header>
<a title="Zur Startseite" href="https://charakterziffer.github.io/"><img src="https://charakterziffer.github.io/bestand/favicon.png" width="59.8" height="59.8" alt="">@charak<br>terziffer</a>
<div>
<form id="suchform" method="GET" action="https://duckduckgo.com/" onsubmit="javascript:document.getElementById('q').value = document.getElementById('keyword').value + ' site:charakterziffer.github.io'">
<input type="text" id="keyword" placeholder="Suche mit DuckDuckGo" aria-label="Seite extern durchsuchen mit DuckDuckGo">
<input type="hidden" id="q" name="q">
<input type="hidden" name="kl" value="de-de">
<input type="hidden" name="kj" value="281">
<input type="hidden" name="kx" value="666">
<input type="hidden" name="k9" value="281">
<input type="hidden" name="kaa" value="839">
<input type="hidden" name="ka" value="Source Sans Pro">
<input type="submit" value="🔍" aria-label="Suchen">
</form>
<nav class="no-hyphens no-print"><ul>
<li><a href="/archiv.html">Archiv</a></li>
<li><a href="/extra/index.html">Extra</a></li>
<li><a href="/rss.xml">RSS</a></li>
<li><a href="/index.html#impressum">Impressum</a></li>
</ul></nav>
</div>
</header>
<main>
<article>
<time datetime="2017-09-05">Di, 5. Sept. 2017</time>
<h1>Muster aus CSS-Farbverläufen</h1>
<style>
<!--
style[contenteditable] { display:block; width: 98.8%;
margin: 1.5em 0 1.167em; padding: .05em .2em; border-radius: .1em;
font: .9em/1.667 'Source Code Pro', Consolas, Monaco, 'Lucida Console',
'Andale Mono', 'DejaVu Sans Mono', monospace; white-space: pre-wrap;
background-color: var(--nebelgrau);
-webkit-box-decoration-break: clone; box-decoration-break: clone; }
style[contenteditable]::before { display:inline-block; margin:0 .1em -.2em 0; vertical-align:-12%; content: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221.2em%22%20height%3D%221.2em%22%20viewBox%3D%220%200%2014%2014%22%20preserveAspectRatio%3D%22xMinYMin%20meet%22%3E%3Cg%20style%3D%22fill%3Anone%3Bstroke%3A%23c2b%3Bstroke-width%3A1.5%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around%22%3E%3Cpath%20d%3D%22M%2011%2C11%2011%2C8%205%2C2%202%2C5%208%2C11%20z%22%2F%3E%3Cpath%20d%3D%22m%2010%2C7%20-3%2C3%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
[class^="beispiel"] { position:relative; width:100%; height:0; margin:0;
padding-bottom:28.75%; line-height:0; border:1px solid var(--grau-matt) }
-->
</style>
<p>Vor fünf Monaten habe ich das <a href="blogdesign-3.html">Aussehen meines Blogs überarbeitet</a>. Statt eines großflächigen Hintergrundbilds verwende ich seitdem einen grünen Randstreifen mit kristallinem Muster (nur sichtbar, wenn das Browserfenster breit genug ist). Ich brauche dafür keine Bilddatei mehr, sondern erzeuge das Muster durch Code. Es besteht aus mehreren, übereinander gelegten Farbverläufen.</p>
<h2 id="ein-farbverlauf-in-css">Ein Farbverlauf in CSS</h2>
<p>Mit der <a href="https://www.bjoernsworld.de/css/grundlagen.html">Auszeichnungssprache CSS</a> kann man die HTML-Elemente einer Website gestalten. Ein einfacher Farbverlauf mit drei Farben ist zum Beispiel dieser:</p>
<figure>
<div class="beispiel-1"></div>
<figcaption>Beispiel 1: Farbverlauf von links nach rechts, von Weiß über Lila bis zu Grau.</figcaption>
</figure>
<p>Dafür sorgt der folgende Code:</p>
<style contenteditable="">.beispiel-1 {
background-image: linear-gradient(90deg, #fff 5%, #839 30%, #ccc 80%);
}</style>
<p>Erklärung: Ein ausgewähltes Element (<code>.beispiel-1</code>) bekommt als Hintergrundbild (<code>background-image</code>) einen linearen Farbverlauf (<code>linear-gradient</code>). Dieser soll aber nicht standardmäßig von unten nach oben laufen, sondern von links nach rechts, also um 90° verdreht (<code>90deg</code>).</p>
<p>Für die ersten 5% unseres Verlaufs wählen wir die Farbe Weiß (mit verkürzter <a href="https://wiki.selfhtml.org/wiki/Farbe/Farbangaben">Hexadezimalschreibweise</a> ist das <code>#fff 5%</code>). Das Weiß geht dann über in Lila (bei 30% des Verlaufs: <code>#839 30%</code>). Ab da verblasst das Lila zu Grau, was bei 80% des Farbverlaufs erreicht ist (<code>#ccc 80%</code>). Diese letzte Farbe behält der Verlauf bis 100%, also bis ganz nach rechts.</p>
<p class="hinterlegt">Übrigens: In diesem Artikel lassen sich <b>alle Codeblöcke bearbeiten</b> (markiert mit dem Symbol <svg xmlns="https://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 13 13" preserveAspectRatio="xMinYMin meet"><g style="fill:none;stroke:#c2b;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round"><path d="M 11,11 11,8 5,2 2,5 8,11 z" /><path d="m 10,7 -3,3" /></g></svg>). Probier’s einfach mal aus: Ändere oben die <code>30%</code> in eine <code>60%</code>, oder mache aus <code>90deg</code> ein <code>80deg</code> und beobachte, wie sich der Verlauf verändert. Falls du den ursprünglichen Code wiederherstellen möchtest, aktualisiere die Seite in deinem Browser („Neu laden“).</p>
<h2 id="musterhafte-wiederholung">Musterhafte Wiederholung</h2>
<p>Seit 2012/2013 unterstützen moderne Browser auch CSS-Farbverläufe, die sich wiederholen. Der folgende Verlauf umfasst nur etwa ein Viertel der Bildbreite und geht von violett über hellgrau nach grün. Danach beginnt er wieder bei violett und wiederholt sich über die gesamte Fläche.</p>
<figure>
<div class="beispiel-2"></div>
<figcaption>Beispiel 2: Ein Farbverlauf von violett über hellgrau nach grün, der sich danach dreimal wiederholt</figcaption>
</figure>
<p>Für das CSS benötigen wir nun einen <code>repeating-linear-gradient</code>, einen <em>sich wiederholenden</em> linearen Verlauf. Den Winkel habe ich mit <code>100deg</code> leicht schräg gewählt. Der Code:</p>
<style contenteditable="">.beispiel-2 {
background-image: repeating-linear-gradient(100deg, #839, #eee 10%, #3a1 25%);
}</style>
<p>Farbbeginn ist violett (<code>#839</code>, ohne Prozentangabe), bei 10% liegt ein helles Grau (<code>#eee 10%</code>) und bis 25% ändert sich das zu grün (<code>#3a1 25%</code>). Die letzte Angabe legt auch fest, wie breit der Verlauf insgesamt ist, bevor er sich wiederholt.</p>
<p>In diesem Beispiel ist zwischen grün und violett eine harte Kante; man sieht, wo der Verlauf neu anfängt. Würde man bei der ersten und letzten Angabe dieselbe Farbe festlegen, bekäme man zwischen den Wiederholungen einen weichen Übergang.</p>
<h2 id="farbe-in-schichten">Farbe in Schichten</h2>
<p>Der Trick meines grünen Randstreifens besteht darin, Teile des Farbverlaufs transparent zu lassen, dafür aber mehrere Verläufe mit unterschiedlichen Winkeln übereinander zu legen. Hier ein Beispiel mit drei Verläufen:</p>
<figure>
<div class="beispiel-3"></div>
<figcaption>Beispiel 3: Drei Farbverläufe mit unterschiedlichen Winkeln, teilweise transparent</figcaption>
</figure>
<p>Der Code dafür sieht so aus:</p>
<style contenteditable="">.beispiel-3 {
background-image:
repeating-linear-gradient(160deg, transparent, #deb 30%),
repeating-linear-gradient(40deg, transparent, #839 20%, transparent 23%),
repeating-linear-gradient(100deg, #fff, #c2b 25%);
}</style>
<p>Erklärung: Der oberste Verlauf geht von <code>transparent</code> nach <code>#deb</code> (hellgrün) und ist 30% breit. Darunter liegt ein Farbverlauf von <code>transparent</code> nach <code>#839</code> (lila) und zurück nach <code>transparent</code> – dadurch entsteht keine harte Kante zwischen Ende und Anfang des Verlaufs.</p>
<p>Ganz zuunterst und zu einem großen Teil verdeckt ist der Farbverlauf aus Beispiel 2, hier mit den Farben <code>#fff</code> (weiß) und <code>#c2b</code> (pink).</p>
<h2 id="kombiniere">Kombiniere!</h2>
<p>Nun haben wir alle Zutaten für den Randstreifen zusammen. Es kommt nur noch auf die richtige Zusammenstellung und Farbgebung an. Man nehme den Verlauf aus Beispiel eins, aber mit den Farben Weiß, Hellgrün und Grün. Darüber lege man die drei Verläufe aus Beispiel 3, aber in transparent-weiß statt farbig:</p>
<figure>
<div class="beispiel-4"></div>
<figcaption>Beispiel 4: Über einem weiß-grünen Farbverlauf liegen drei transparente-weiße Verläufe, die sich wiederholen.</figcaption>
</figure>
<p>Der Code dazu ist folgender:</p>
<style contenteditable="">.beispiel-4 {
background-image:
repeating-linear-gradient(160deg, transparent, #fff 30%),
repeating-linear-gradient(40deg, transparent, #fff 20%, transparent 23%),
repeating-linear-gradient(100deg, transparent, #fff 25%),
linear-gradient(90deg, #fff 5%, #deb 30%, #3a1 80%);
}</style>
<p>Für meinen Blog habe ich die Maße und Winkel der Farbverläufe angepasst, das Weiß halbtransparent gemacht (mit der <a href="https://web.archive.org/web/20161116142146/https://www.css3.de/hsl-farben-hsl-farbangaben-und-hsla.html">HSLA-Farbangabe </a> <code>hsla(0,0%,100%, 0.3)</code> statt <code>#fff</code>) und die Abstände des weiß-grünen Hintergrunds teilweise fest und teilweise abhängig von der Fensterbreite gesetzt. Deshalb verschwindet der Randstreifen scheinbar, wenn das Browserfenster schmaler wird (tatsächlich sieht man die weißen Verläufe auf weißem Hintergrund nicht mehr).</p>
<h2 id="erst-der-anfang">Erst der Anfang</h2>
<p>Das <em>Mozilla Developer Network</em> bietet einen ausführlichen, deutschsprachigen <a href="https://developer.mozilla.org/de/docs/Web/CSS/CSS_images/Using_CSS_gradients">Artikel über CSS-Farbverläufe</a>, auch über radiale Verläufe. Wie unterschiedlich CSS-Muster sein können, zeigt Lea Verou in ihrer <a href="https://projects.verou.me/css3patterns/">CSS3-Muster-Galerie</a>. Hier kann man selbst im Code herumprobieren, zum Beispiel bei den einfacheren <a href="https://projects.verou.me/css3patterns/#diagonal-stripes">diagonalen Streifen</a>.</p>
<p style="margin-bottom:2.25em;">---<br>
<i>Rubrik(en):</i> <a href="archiv.html?methodik">#methodik</a> </p>
</article>
<div class="no-print">
<h2 id="kommentieren">Artikel kommentieren</h2>
<p>Ich lege Wert auf eine respektvolle Diskussion und überprüfe jeden Kommentar, bevor er hier erscheint. Beleidigende oder unsachliche Beiträge ignoriere ich mit großem Vergnügen. Alle Angaben sind freiwillig.</p>
<form name="kommentarformular" id="kommentarformular" method="post" action="https://www.onlex.de/_formmailer.php?username=charakterziffer" accept-charset="UTF-8" enctype="application/x-www-form-urlencoded" onsubmit="javascript:document.getElementById('aktuelles-datum').value = new Date().toLocaleString('de-DE')">
<input type="hidden" name="post_id" value="/css-muster">
<input type="hidden" name="date" id="aktuelles-datum" value="">
<input type="hidden" name="nummer" value="1">
<div>
<label for="name">Name</label>
<div><input name=" name" id="name" type="text" size="25" spellcheck="false">
<i>(Pseudonym möglich)</i></div>
<!-- fügt in der Onlex-Mail eine Leerzeile davor ein -->
</div>
<div>
<label for="mail">E-Mail</label>
<div><input name="mail" id="mail" type="email" size="25" autocomplete="email" spellcheck="false" autocapitalize="off">
<i>(wird nicht veröffentlicht)</i></div>
</div>
<div>
<label for="link">Website</label>
<div><input name="link" id="link" type="url" size="25" spellcheck="false" onblur="javascript:if ( (this.value!='') && !(this.value.match(/^https?:\/\//g)) ) { this.value = 'http://' + this.value;}"></div>
<!-- Beim Verlassen des Feldes: Falls Webadresse nicht leer und nicht mit „http(s)://“ beginnt, dann ergänze „http://“. So bekommt der Nutzer wegen type="url" keine Fehlermeldung, auch wenn er das http:// vergisst. -->
</div>
<div>
<label for="comment">Kommentar</label><br>
<textarea name="comment" id="comment" rows="8" cols="50" required spellcheck="true"></textarea>
</div>
<input type="hidden" name=" --- Hinweis" value="Mehrzeilige Kommentare in 'Apostrophe' einschließen und um </р><р> ergänzen.">
<input name="onlex_password" id="onlex_password" type="hidden" value="5">
<div><input name="submit" id="submit" type="submit" value="Veröffentlichen"></div>
</form>
<p class="no-hyphens" style="font-size:0.9em;line-height:1.667em;">Formatierungen mit HTML sind möglich, z.<small> </small>B. <em><em>betont</em></em>, <strong><strong>hervor­gehoben</strong></strong> oder <code><code>Quelltext</code></code>. Außerdem Verlinkungen (<a href="http://verlinkte-website.de">Linktext</a>) und Bilder (<img src="http://pfad-zum.de/bild.jpg" alt="Bildbeschreibung">).</p>
</div> <!-- .no-print -->
<p style="width:48%; float:left; margin:3.1em 0 1.1em;" class="no-hyphens no-print"><a href="origamistier.html">← Ein gefalteter Stier</a></p>
<p style="width:48%; float:right; text-align:right; margin:3.1em 0 1.1em;" class="no-hyphens no-print"><a href="spendenwerbung.html">Mit Spenden werben →</a></p>
<p style="clear:both;" class="no-print"></p>
</main>
<aside class="no-hyphens">
<p>Hallo, ich bin <a href="javascript:new%20Audio('bestand/aussprache.mp3').play()" class="anhoeren" title="Aussprache anhören">Gerhard Großmann</a> aus Hohen­fels<span class="no-print"> (siehe <a href="/index.html#impressum">Impres­sum/Daten­schutz</a>)</span>. Über Fragen, Kritik und Anmer­kungen freue ich mich sehr – z.<small> </small>B.<span class="no-print"> via <a href="https://typo.social/@charakterziffer" target="_blank" rel="noopener noreferrer">Masto­don</a> oder</span> per Mail an <em>postfach2b [ät] web.de</em>.</p>
<p class="no-print">Mein <a href="/rss.xml" class="icon-rss">RSS-Feed</a> informiert immer pünkt­lich über neue Artikel. Alle bis­herigen Ein­träge finden sich <a href="/archiv.html">im Archiv</a>.</p>
<p>Die Texte in diesem Blog stehen unter einer <a rel="license" href="https://creativecommons.org/licenses/by-sa/4.0/deed.de" class="icon-ccbysa">Crea­tive-Commons-Lizenz 4.0 (Deutsch­land)</a> mit Namens­nennung und Weiter­gabe unter gleichen Bedin­gungen.</p>
</aside>
<script src="https://www.onlex.de/_counter.php?username=charakterziffer" defer></script>
</body>
</html>