Skip to content

Commit 72db478

Browse files
bjellinebjelline
committed
clip-path und mask
1 parent 7d0d006 commit 72db478

File tree

4 files changed

+58
-10
lines changed

4 files changed

+58
-10
lines changed

‎css/css/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -247,7 +247,7 @@ <h2 id="maeinheiten-in-stylesheets">Maßeinheiten in Stylesheets</h2>
247247

248248
<ul>
249249
<li>vw (Hundertstel der Viewport-Breite),</li>
250-
<li>vh (Hunderstel der Viewport-Höhe),</li>
250+
<li>vh (Hundertstel der Viewport-Höhe),</li>
251251
<li>px (Pixel),</li>
252252
<li>rem (Höhe des Großbuchstaben M im root-Element),</li>
253253
<li>em (Höhe des Großbuchstaben M im Eltern-Element),</li>
@@ -259,7 +259,7 @@ <h2 id="maeinheiten-in-stylesheets">Maßeinheiten in Stylesheets</h2>
259259
<li>und noch <a href="https://developer.mozilla.org/de/docs/Web/CSS/length">viele mehr</a></li>
260260
</ul>
261261

262-
<p>Einige davon sind relativ (em = relativ zur Schriftgröße, px = relativ zur Pixel-Größe am aktuellen Ausgabemedium), andere absolut (Centimeter, Inch). Die absoluten Angaben kann man nur bei der Ausgabe auf Papier sinnvoll verwenden. <a href="/images/css-masse.html">Demo</a></p>
262+
<p>Einige davon sind relativ (em = relativ zur Schriftgröße, vw = relativ zur Auflösung des aktuellen Ausgabegeräts), andere absolut (Centimeter, Inch). Die absoluten Angaben kann man nur bei der Ausgabe auf Papier sinnvoll verwenden. <a href="/images/css-masse.html">Demo</a></p>
263263

264264

265265
<a class="slide_break do-not-print" id="slide-15" href="slide.html#slide-15" title="Wechsle zur Präsentations-Ansicht, Folie Nr. 15">▻</a>

‎css/css/slide.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -283,7 +283,7 @@ <h2 id="maeinheiten-in-stylesheets">Maßeinheiten in Stylesheets</h2>
283283

284284
<ul>
285285
<li>vw (Hundertstel der Viewport-Breite),</li>
286-
<li>vh (Hunderstel der Viewport-Höhe),</li>
286+
<li>vh (Hundertstel der Viewport-Höhe),</li>
287287
<li>px (Pixel),</li>
288288
<li>rem (Höhe des Großbuchstaben M im root-Element),</li>
289289
<li>em (Höhe des Großbuchstaben M im Eltern-Element),</li>
@@ -295,7 +295,7 @@ <h2 id="maeinheiten-in-stylesheets">Maßeinheiten in Stylesheets</h2>
295295
<li>und noch <a href="https://developer.mozilla.org/de/docs/Web/CSS/length">viele mehr</a></li>
296296
</ul>
297297

298-
<p>Einige davon sind relativ (em = relativ zur Schriftgröße, px = relativ zur Pixel-Größe am aktuellen Ausgabemedium), andere absolut (Centimeter, Inch). Die absoluten Angaben kann man nur bei der Ausgabe auf Papier sinnvoll verwenden. <a href="/images/css-masse.html">Demo</a></p>
298+
<p>Einige davon sind relativ (em = relativ zur Schriftgröße, vw = relativ zur Auflösung des aktuellen Ausgabegeräts), andere absolut (Centimeter, Inch). Die absoluten Angaben kann man nur bei der Ausgabe auf Papier sinnvoll verwenden. <a href="/images/css-masse.html">Demo</a></p>
299299

300300
</div>
301301
<div class="slide">

‎grafik/svg/index.html‎

Lines changed: 30 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -448,11 +448,35 @@ <h4 class="caption">Xml Code <small>SVG Animation</small></h4>
448448

449449
<a class="slide_break do-not-print" id="slide-14" href="slide.html#slide-14" title="Wechsle zur Präsentations-Ansicht, Folie Nr. 14">▻</a>
450450

451-
<h2 id="svg-mit-javascript-erzeugen">SVG mit Javascript erzeugen</h2>
451+
<h2 id="svg-in-css-verwenden">SVG in CSS verwenden</h2>
452+
453+
<p>SVG kann als <code>mask</code> oder <code>clip-path</code> verwendet werden.</p>
454+
455+
<p>Clip-Path erwartet einen “Basic Shape” als Wert. Hier mann man einen SVG-Path angeben. Mehr auf <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/clip-path">MDN</a>.</p>
456+
457+
<p>Mask erwartet ein Bild als Wert. Mehr auf <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/mask">MDN</a>.</p>
458+
459+
<div class="example">
460+
<pre><code class="language-css linenums">clip-path: path(&#39;M20,0H30A10,10 0,0,1 40,10V20A10,10 0,0,0 50,30H90A10,10 0,0,1 100,40V90A10,10 0,0,1 90,100H10A10,10 0,0,1 0,90V20A20,20 0,0,1 20,0Z&#39;);
461+
mask: url(&quot;mask.svg&quot;);
462+
</code></pre></div>
463+
464+
<div style="display:flex">
465+
<div style="box-sizing: border-box;clip-path: path('M20,0H30A10,10 0,0,1 40,10V20A10,10 0,0,0 50,30H90A10,10 0,0,1 100,40V90A10,10 0,0,1 90,100H10A10,10 0,0,1 0,90V20A20,20 0,0,1 20,0Z');width: 100px;background-color:rgb(232, 124, 74);aspect-ratio: 1 / 1;margin: 4px;font-size:8px;">SVG als clip-path. Der Inhalt dieses Tags wird einfach verdeckt, der Text ist also nicht vollständig lesbar. Nochmal: SVG als clip-path. Der Inhalt dieses Tags wird einfach verdeckt, der Text ist also nicht vollständig lesbar.</div>
466+
467+
<div style="box-sizing: border-box;mask: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cpath%20d%3D%22M20%2C0H30A10%2C10%200%2C0%2C1%2040%2C10V20A10%2C10%200%2C0%2C0%2050%2C30H90A10%2C10%200%2C0%2C1%20100%2C40V90A10%2C10%200%2C0%2C1%2090%2C100H10A10%2C10%200%2C0%2C1%200%2C90V20A20%2C20%200%2C0%2C1%2020%2C0Z%22%20fill%3D%22%23fff%22%20%2F%3E%3C%2Fsvg%3E') no-repeat center / contain;width: 100px;background-color:rgb(232, 124, 74);aspect-ratio: 1 / 1;margin: 4px;font-size:8px;">SVG als mask. Der Inhalt dieses Tags wird einfach verdeckt, der Text ist also nicht vollständig lesbar. Nochmal: SVG als mask. Der Inhalt dieses Tags wird einfach verdeckt, der Text ist also nicht vollständig lesbar.</div>
468+
</div>
469+
470+
<p>Dieses Beispiel wurde mit dem <a href="https://corner-inverter.douiri.org/">Corner Inverter</a> gebaut.</p>
452471

453472

454473
<a class="slide_break do-not-print" id="slide-15" href="slide.html#slide-15" title="Wechsle zur Präsentations-Ansicht, Folie Nr. 15">▻</a>
455474

475+
<h2 id="svg-mit-javascript-erzeugen">SVG mit Javascript erzeugen</h2>
476+
477+
478+
<a class="slide_break do-not-print" id="slide-16" href="slide.html#slide-16" title="Wechsle zur Präsentations-Ansicht, Folie Nr. 16">▻</a>
479+
456480
<h3 id="createelement">createElement</h3>
457481

458482
<p>Der SVG-Tag kann direkt in einem HTML-Dokument verwendet werden, wie auf dieser Seite.</p>
@@ -471,7 +495,7 @@ <h3 id="createelement">createElement</h3>
471495
</code></pre></div>
472496

473497

474-
<a class="slide_break do-not-print" id="slide-16" href="slide.html#slide-16" title="Wechsle zur Präsentations-Ansicht, Folie Nr. 16">▻</a>
498+
<a class="slide_break do-not-print" id="slide-17" href="slide.html#slide-17" title="Wechsle zur Präsentations-Ansicht, Folie Nr. 17">▻</a>
475499

476500
<h3 id="jquery">jQuery</h3>
477501

@@ -491,7 +515,7 @@ <h3 id="jquery">jQuery</h3>
491515
<p>Code <a href="http://stackoverflow.com/questions/3642035/jquerys-append-not-working-with-svg-element#answer-36305466">von Matthieu Charbonnier</a>.</p>
492516

493517

494-
<a class="slide_break do-not-print" id="slide-17" href="slide.html#slide-17" title="Wechsle zur Präsentations-Ansicht, Folie Nr. 17">▻</a>
518+
<a class="slide_break do-not-print" id="slide-18" href="slide.html#slide-18" title="Wechsle zur Präsentations-Ansicht, Folie Nr. 18">▻</a>
495519

496520
<h3 id="gsap">GSAP</h3>
497521

@@ -505,7 +529,7 @@ <h3 id="gsap">GSAP</h3>
505529
</code></pre></div>
506530

507531

508-
<a class="slide_break do-not-print" id="slide-18" href="slide.html#slide-18" title="Wechsle zur Präsentations-Ansicht, Folie Nr. 18">▻</a>
532+
<a class="slide_break do-not-print" id="slide-19" href="slide.html#slide-19" title="Wechsle zur Präsentations-Ansicht, Folie Nr. 19">▻</a>
509533

510534
<h2 id="svg-optimieren">SVG Optimieren</h2>
511535

@@ -514,7 +538,7 @@ <h2 id="svg-optimieren">SVG Optimieren</h2>
514538
<p><img src="images/grafik/svgomg.png" alt="" ></p>
515539

516540

517-
<a class="slide_break do-not-print" id="slide-19" href="slide.html#slide-19" title="Wechsle zur Präsentations-Ansicht, Folie Nr. 19">▻</a>
541+
<a class="slide_break do-not-print" id="slide-20" href="slide.html#slide-20" title="Wechsle zur Präsentations-Ansicht, Folie Nr. 20">▻</a>
518542

519543
<h2 id="quellen-von-svg">Quellen von SVG</h2>
520544

@@ -529,7 +553,7 @@ <h2 id="quellen-von-svg">Quellen von SVG</h2>
529553
</ul>
530554

531555

532-
<a class="slide_break do-not-print" id="slide-20" href="slide.html#slide-20" title="Wechsle zur Präsentations-Ansicht, Folie Nr. 20">▻</a>
556+
<a class="slide_break do-not-print" id="slide-21" href="slide.html#slide-21" title="Wechsle zur Präsentations-Ansicht, Folie Nr. 21">▻</a>
533557

534558
<h2 id="mehr">Mehr</h2>
535559

‎grafik/svg/slide.html‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -484,6 +484,30 @@ <h4 class="caption">Xml Code <small>SVG Animation</small></h4>
484484
</div>
485485
<div class="slide">
486486

487+
<h2 id="svg-in-css-verwenden">SVG in CSS verwenden</h2>
488+
489+
<p>SVG kann als <code>mask</code> oder <code>clip-path</code> verwendet werden.</p>
490+
491+
<p>Clip-Path erwartet einen “Basic Shape” als Wert. Hier mann man einen SVG-Path angeben. Mehr auf <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/clip-path">MDN</a>.</p>
492+
493+
<p>Mask erwartet ein Bild als Wert. Mehr auf <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/mask">MDN</a>.</p>
494+
495+
<div class="example">
496+
<pre><code class="language-css linenums">clip-path: path(&#39;M20,0H30A10,10 0,0,1 40,10V20A10,10 0,0,0 50,30H90A10,10 0,0,1 100,40V90A10,10 0,0,1 90,100H10A10,10 0,0,1 0,90V20A20,20 0,0,1 20,0Z&#39;);
497+
mask: url(&quot;mask.svg&quot;);
498+
</code></pre></div>
499+
500+
<div style="display:flex">
501+
<div style="box-sizing: border-box;clip-path: path('M20,0H30A10,10 0,0,1 40,10V20A10,10 0,0,0 50,30H90A10,10 0,0,1 100,40V90A10,10 0,0,1 90,100H10A10,10 0,0,1 0,90V20A20,20 0,0,1 20,0Z');width: 100px;background-color:rgb(232, 124, 74);aspect-ratio: 1 / 1;margin: 4px;font-size:8px;">SVG als clip-path. Der Inhalt dieses Tags wird einfach verdeckt, der Text ist also nicht vollständig lesbar. Nochmal: SVG als clip-path. Der Inhalt dieses Tags wird einfach verdeckt, der Text ist also nicht vollständig lesbar.</div>
502+
503+
<div style="box-sizing: border-box;mask: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cpath%20d%3D%22M20%2C0H30A10%2C10%200%2C0%2C1%2040%2C10V20A10%2C10%200%2C0%2C0%2050%2C30H90A10%2C10%200%2C0%2C1%20100%2C40V90A10%2C10%200%2C0%2C1%2090%2C100H10A10%2C10%200%2C0%2C1%200%2C90V20A20%2C20%200%2C0%2C1%2020%2C0Z%22%20fill%3D%22%23fff%22%20%2F%3E%3C%2Fsvg%3E') no-repeat center / contain;width: 100px;background-color:rgb(232, 124, 74);aspect-ratio: 1 / 1;margin: 4px;font-size:8px;">SVG als mask. Der Inhalt dieses Tags wird einfach verdeckt, der Text ist also nicht vollständig lesbar. Nochmal: SVG als mask. Der Inhalt dieses Tags wird einfach verdeckt, der Text ist also nicht vollständig lesbar.</div>
504+
</div>
505+
506+
<p>Dieses Beispiel wurde mit dem <a href="https://corner-inverter.douiri.org/">Corner Inverter</a> gebaut.</p>
507+
508+
</div>
509+
<div class="slide">
510+
487511
<h2 id="svg-mit-javascript-erzeugen">SVG mit Javascript erzeugen</h2>
488512

489513
</div>

0 commit comments

Comments
 (0)