Add wiki dump and instructions
This commit is contained in:
parent
f71e54a92f
commit
37f9cc3fd1
449 changed files with 44307 additions and 0 deletions
307
eh22.easterhegg.eu/design/glow.html
Normal file
307
eh22.easterhegg.eu/design/glow.html
Normal file
|
|
@ -0,0 +1,307 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<script>
|
||||
const setTheme = (theme) => {
|
||||
theme ??= localStorage.theme || "system";
|
||||
document.getElementById("themeLight").checked = theme === "light";
|
||||
document.getElementById("themeDark").checked = theme === "dark";
|
||||
localStorage.theme = theme;
|
||||
};
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
setTheme();
|
||||
});
|
||||
</script>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||
<link rel="shortcut icon" href="assets/image/favicon.png" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
type="text/css"
|
||||
href="assets/style/styleguide.css"
|
||||
/>
|
||||
<title>Glow</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<a href="../index.html" id="backToWiki">
|
||||
<img
|
||||
src="assets/image/logo_eventname_glow.svg"
|
||||
class="header-image dark-only"
|
||||
alt="Logo of Easterhegg 2025. In the style of a neon sign:
|
||||
The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg.
|
||||
The egg shell and the word 'Eggception' are glowing in a light blue, everything else in a bright pink."
|
||||
/>
|
||||
<img
|
||||
src="assets/image/logo_eventname_glow_off.svg"
|
||||
class="header-image light-only"
|
||||
alt="Logo of Easterhegg 2025. In the style of a unpowered neon sign:
|
||||
The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg.
|
||||
The egg shell and the word 'Eggception' are dimly glowing in a dark blue, everything else in a dark pink."
|
||||
/>
|
||||
</a>
|
||||
</header>
|
||||
<div>
|
||||
<nav>
|
||||
<button aria-label="Open Navigation">
|
||||
<i data-icon="menu_small"></i>
|
||||
</button>
|
||||
<ul>
|
||||
<li class="link-back">
|
||||
<a href="../index.html"><i data-icon="arrow_left"></i>Back to Wiki</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="index.html"><i data-icon="home"></i>Overview</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="colors.html"><i data-icon="pen"></i>Colors</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="typography.html"><i data-icon="font"></i>Typography</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="iconography.html"><i data-icon="info"></i>Iconography</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="logo.html"><i data-icon="hare_head"></i>Logo</a>
|
||||
</li>
|
||||
<li class="active">
|
||||
<a href="glow.html"><i data-icon="lightbulb"></i>Glow</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="doodles.html"><i data-icon="looping"></i>Doodles</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="demopage.html"><i data-icon="code"></i>Demopage</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="generator.html"
|
||||
><i data-icon="settings"></i>Image Generator</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="changelog.html"><i data-icon="history"></i>Changelog</a>
|
||||
</li>
|
||||
<li id="themeToggleDark" class="themeToggle">
|
||||
<input
|
||||
id="themeDark"
|
||||
type="checkbox"
|
||||
aria-label="Switch between dark and light mode"
|
||||
/>
|
||||
<label for="themeDark">
|
||||
<i data-icon="lightbulb"></i>
|
||||
</label>
|
||||
</li>
|
||||
<li id="themeToggleLight" class="themeToggle">
|
||||
<input
|
||||
id="themeLight"
|
||||
type="checkbox"
|
||||
aria-label="Switch between dark and light mode"
|
||||
/>
|
||||
<label for="themeLight">
|
||||
<i data-icon="lightbulb"></i>
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<main>
|
||||
<h1>Glow</h1>
|
||||
<h2>Darkmode</h2>
|
||||
<p>
|
||||
To add the glow to something of a given height (or fontsize), here
|
||||
<b>1em</b>, one needs to calculate four values:
|
||||
</p>
|
||||
<ul>
|
||||
<li>An eighth; here 0.125em</li>
|
||||
<li>A sixteenth; here 0.0625</li>
|
||||
<li>A thirtysecond; here 0.03125</li>
|
||||
<li>A sixtyfourth; here 0.015625</li>
|
||||
</ul>
|
||||
<p>
|
||||
The first three values are used for drop-shadows, the last for an
|
||||
inset shadow. Sadly, the latter is currently not possible using plain
|
||||
CSS filters, which is why it requires the use of an SVG filter
|
||||
(further information: see <a href="glow.html#notes">Notes</a>).
|
||||
</p>
|
||||
<p>
|
||||
Below you'll find implementation examples using the primary color CSS
|
||||
variable for the glow color as specified in our (S)CSS stylesheets. In
|
||||
the CSS example simply replace
|
||||
<code>--color-primary</code> with <code>--color-secondary</code> to
|
||||
use the secondary color. In the SVG example, we don't use CSS
|
||||
variables, because not every software understands them.
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
For CSS filters one can simply use the following set of three
|
||||
shadows layered atop each other:
|
||||
<pre><code><span class="keyword">filter</span><span class="neutral">:</span>
|
||||
<span class="function">drop-shadow</span><span class="neutral">(</span><span class="number">0</span> <span class="number">0</span> <span class="number">0.03125</span><span class="keyword">em</span> <span class="function">var</span><span class="neutral">(</span><span class="identifier">--color-white</span><span class="neutral">))</span>
|
||||
<span class="function">drop-shadow</span><span class="neutral">(</span><span class="number">0</span> <span class="number">0</span> <span class="number">0.0625</span><span class="keyword">em</span> <span class="function">var</span><span class="neutral">(</span><span class="identifier">--color-primary</span><span class="neutral">))</span>
|
||||
<span class="function">drop-shadow</span><span class="neutral">(</span><span class="number">0</span> <span class="number">0</span> <span class="number">0.125</span><span class="keyword">em</span> <span class="function">var</span><span class="neutral">(</span><span class="identifier">--color-primary</span><span class="neutral">));</span></code></pre>
|
||||
</li>
|
||||
<li>
|
||||
For SVG filters instead use the following two filters:
|
||||
<pre><code>
|
||||
<span class="comment"><!-- this code assumes a font-size of 520 --></span>
|
||||
|
||||
<span class="neutral"><filter</span> <span class="identifier">x</span><span class="neutral">=</span><span class="string">"-150%"</span> <span class="identifier">y</span><span class="neutral">=</span><span class="string">"-150%"</span> <span class="identifier">width</span><span class="neutral">=</span><span class="string">"400%"</span> <span class="identifier">height</span><span class="neutral">=</span><span class="string">"400%"</span>
|
||||
<span class="identifier">color-interpolation-filters</span><span class="neutral">=</span><span class="string">"sRGB"</span> <span class="identifier">id</span><span class="neutral">=</span><span class="string">"textBlurPrimary"</span><span class="neutral"> ></span>
|
||||
<span class="neutral"><feGaussianBlur</span> <span class="identifier">in</span><span class="neutral">=</span><span class="string">"SourceGraphic"</span> <span class="identifier">stdDeviation</span><span class="neutral">=</span><span class="string">"16.25"</span> <span class="neutral">/></span>
|
||||
<span class="neutral"><feOffset</span> <span class="identifier">dx</span><span class="neutral">=</span><span class="string">"0"</span> <span class="identifier">dy</span><span class="neutral">=</span><span class="string">"0"</span> <span class="identifier">result</span><span class="neutral">=</span><span class="string">"offsetblur"</span> <span class="neutral">/></span>
|
||||
<span class="neutral"><feFlood</span> <span class="identifier">flood-color</span><span class="neutral">=</span><span class="string">"#ffffff"</span> <span class="identifier">flood-opacity</span><span class="neutral">=</span><span class="string">"1"</span> <span class="neutral">/></span> <span class="comment"><!-- color-white --></span>
|
||||
<span class="neutral"><feComposite</span> <span class="identifier">in2</span><span class="neutral">=</span><span class="string">"offsetblur"</span> <span class="identifier">operator</span><span class="neutral">=</span><span class="string">"in"</span> <span class="neutral">/></span>
|
||||
<span class="neutral"><feMerge</span> <span class="identifier">result</span><span class="neutral">=</span><span class="string">"drop_shadow_0"</span> <span class="neutral">></span>
|
||||
<span class="neutral"><feMergeNode/></span>
|
||||
<span class="neutral"><feMergeNode</span> <span class="identifier">in</span><span class="neutral">=</span><span class="string">"SourceGraphic"</span> <span class="neutral">/></span>
|
||||
<span class="neutral"></feMerge></span>
|
||||
|
||||
<span class="neutral"><feGaussianBlur</span> <span class="identifier">in</span><span class="neutral">=</span><span class="string">"drop_shadow_0"</span> <span class="identifier">stdDeviation</span><span class="neutral">=</span><span class="string">"32.5"</span> <span class="neutral">/></span>
|
||||
<span class="neutral"><feOffset</span> <span class="identifier">dx</span><span class="neutral">=</span><span class="string">"0"</span> <span class="identifier">dy</span><span class="neutral">=</span><span class="string">"0"</span> <span class="identifier">result</span><span class="neutral">=</span><span class="string">"offsetblur"</span> <span class="neutral">/></span>
|
||||
<span class="neutral"><feFlood</span> <span class="identifier">flood-color</span><span class="neutral">=</span><span class="string">"#c6257d"</span> <span class="identifier">flood-opacity</span><span class="neutral">=</span><span class="string">"1"</span> <span class="neutral">/></span> <span class="comment"><!-- color-primary --></span>
|
||||
<span class="neutral"><feComposite</span> <span class="identifier">in2</span><span class="neutral">=</span><span class="string">"offsetblur"</span> <span class="identifier">operator</span><span class="neutral">=</span><span class="string">"in"</span> <span class="neutral">/></span>
|
||||
<span class="neutral"><feMerge</span> <span class="identifier">result</span><span class="neutral">=</span><span class="string">"drop_shadow_1"</span> <span class="neutral">></span>
|
||||
<span class="neutral"><feMergeNode/></span>
|
||||
<span class="neutral"><feMergeNode</span> <span class="identifier">in</span><span class="neutral">=</span><span class="string">"drop_shadow_0"</span> <span class="neutral">/></span>
|
||||
<span class="neutral"></feMerge></span>
|
||||
|
||||
<span class="neutral"><feGaussianBlur</span> <span class="identifier">in</span><span class="neutral">=</span><span class="string">"drop_shadow_1"</span> <span class="identifier">stdDeviation</span><span class="neutral">=</span><span class="string">"65"</span> <span class="neutral">/></span>
|
||||
<span class="neutral"><feOffset</span> <span class="identifier">dx</span><span class="neutral">=</span><span class="string">"0"</span> <span class="identifier">dy</span><span class="neutral">=</span><span class="string">"0"</span> <span class="identifier">result</span><span class="neutral">=</span><span class="string">"offsetblur"</span> <span class="neutral">/></span>
|
||||
<span class="neutral"><feFlood</span> <span class="identifier">flood-color</span><span class="neutral">=</span><span class="string">"#c6257d"</span> <span class="identifier">flood-opacity</span><span class="neutral">=</span><span class="string">"1"</span> <span class="neutral">/></span> <span class="comment"><!-- color-primary --></span>
|
||||
<span class="neutral"><feComposite</span> <span class="identifier">in2</span><span class="neutral">=</span><span class="string">"offsetblur"</span> <span class="identifier">operator</span><span class="neutral">=</span><span class="string">"in"</span> <span class="neutral">/></span>
|
||||
<span class="neutral"><feMerge</span> <span class="identifier">result</span><span class="neutral">=</span><span class="string">"drop_shadow_2"</span> <span class="neutral">></span>
|
||||
<span class="neutral"><feMergeNode/></span>
|
||||
<span class="neutral"><feMergeNode</span> <span class="identifier">in</span><span class="neutral">=</span><span class="string">"drop_shadow_1"</span> <span class="neutral">/></span>
|
||||
<span class="neutral"></feMerge></span>
|
||||
<span class="neutral"></filter></span>
|
||||
|
||||
<span class="neutral"><filter</span> <span class="identifier">x</span><span class="neutral">=</span><span class="string">"-150%"</span> <span class="identifier">y</span><span class="neutral">=</span><span class="string">"-150%"</span> <span class="identifier">width</span><span class="neutral">=</span><span class="string">"400%"</span> <span class="identifier">height</span><span class="neutral">=</span><span class="string">"400%"</span>
|
||||
<span class="identifier">color-interpolation-filters</span><span class="neutral">=</span><span class="string">"sRGB"</span> <span class="identifier">id</span><span class="neutral">=</span><span class="string">"textInsetPrimary"</span><span class="neutral"> ></span>
|
||||
<span class="neutral"><feFlood</span> <span class="identifier">flood-color</span><span class="neutral">=</span><span class="string">"#ffffff"</span> <span class="identifier">result</span><span class="neutral">=</span><span class="string">"flood-white"</span> <span class="neutral">/></span> <span class="comment"><!-- color-white --></span>
|
||||
<span class="neutral"><feFlood</span> <span class="identifier">flood-color</span><span class="neutral">=</span><span class="string">"#c6257d"</span> <span class="identifier">result</span><span class="neutral">=</span><span class="string">"flood-glow-color"</span> <span class="neutral">/></span> <span class="comment"><!-- color-primary --></span>
|
||||
|
||||
<span class="neutral"><feComposite</span> <span class="identifier">in</span><span class="neutral">=</span><span class="string">"flood-glow-color"</span> <span class="identifier">in2</span><span class="neutral">=</span><span class="string">"SourceAlpha"</span> <span class="identifier">operator</span><span class="neutral">=</span><span class="string">"in"</span>
|
||||
<span class="identifier">result</span><span class="neutral">=</span><span class="string">"flooded"</span> <span class="neutral">/></span>
|
||||
<span class="neutral"><feGaussianBlur</span> <span class="identifier">in</span><span class="neutral">=</span><span class="string">"SourceAlpha"</span> <span class="identifier">stdDeviation</span><span class="neutral">=</span><span class="string">"8.125"</span>
|
||||
<span class="identifier">result</span><span class="neutral">=</span><span class="string">"inset_drop_shadow"</span> <span class="neutral">/></span>
|
||||
<span class="neutral"><feComposite</span> <span class="identifier">in</span><span class="neutral">=</span><span class="string">"flood-white"</span> <span class="identifier">in2</span><span class="neutral">=</span><span class="string">"inset_drop_shadow"</span> <span class="identifier">operator</span><span class="neutral">=</span><span class="string">"in"</span>
|
||||
<span class="identifier">result</span><span class="neutral">=</span><span class="string">"inset_drop_shadow_white"</span> <span class="neutral">/></span>
|
||||
<span class="neutral"><feComposite</span> <span class="identifier">in</span><span class="neutral">=</span><span class="string">"inset_drop_shadow_white"</span> <span class="identifier">in2</span><span class="neutral">=</span><span class="string">"SourceAlpha"</span> <span class="identifier">operator</span><span class="neutral">=</span><span class="string">"in"</span>
|
||||
<span class="identifier">result</span><span class="neutral">=</span><span class="string">"inset_shadow"</span> <span class="neutral">/></span>
|
||||
<span class="neutral"><feMerge</span> <span class="identifier">result</span><span class="neutral">=</span><span class="string">"final"</span><span class="neutral">></span>
|
||||
<span class="neutral"><feMergeNode</span> <span class="identifier">in</span><span class="neutral">=</span><span class="string">"flooded"</span> <span class="neutral">/></span>
|
||||
<span class="neutral"><feMergeNode</span> <span class="identifier">in</span><span class="neutral">=</span><span class="string">"inset_shadow"</span> <span class="neutral">/></span>
|
||||
<span class="neutral"></feMerge></span>
|
||||
<span class="neutral"></filter></span></code></pre>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h2>Lightmode</h2>
|
||||
<p>
|
||||
To add the dim glow to something of a given height (or fontsize), here
|
||||
<b>1em</b>, one needs to calculate one value: a thirtysecond; here
|
||||
0.03125.
|
||||
</p>
|
||||
<p>
|
||||
The value is needed for both drop shadows and inset shadows. Sadly,
|
||||
the latter is currently not possible using plain CSS filters, which is
|
||||
why it requires the use of an SVG filter (further information: see
|
||||
<a href="glow.html#notes">Notes</a>).
|
||||
</p>
|
||||
<p>
|
||||
Below you'll find implementation examples using the primary color CSS
|
||||
variable for the glow color as specified in our (S)CSS stylesheets. In
|
||||
the CSS example simply replace each occurrence of "primary" with
|
||||
"secondary" and "argon" with "krypton" to get a glow of the secondary
|
||||
color. In the SVG example, we don't use CSS variables, because not
|
||||
every software understands them.
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
For CSS filters one can simply use the following properties:
|
||||
<pre><code><span class="keyword">filter</span><span class="neutral">:</span> <span class="function">drop-shadow</span><span class="neutral">(</span><span class="number">0</span> <span class="number">0</span> <span class="number">0.03125</span><span class="keyword">em</span> <span class="function">var</span><span class="neutral">(</span><span class="identifier">--color-argon-950</span><span class="neutral">));</span>
|
||||
<span class="keyword">color</span><span class="neutral">:</span> <span class="function">var</span><span class="neutral">(</span><span class="identifier">--color-argon-800</span><span class="neutral">);</span></code></pre>
|
||||
</li>
|
||||
<li>
|
||||
For SVG filters instead use the following two filters:
|
||||
<pre><code>
|
||||
<span class="comment"><!-- this code assumes a font-size of 520 --></span>
|
||||
|
||||
<span class="neutral"><filter</span> <span class="identifier">x</span><span class="neutral">=</span><span class="string">"-25%"</span> <span class="identifier">y</span><span class="neutral">=</span><span class="string">"-150%"</span> <span class="identifier">width</span><span class="neutral">=</span><span class="string">"150%"</span> <span class="identifier">height</span><span class="neutral">=</span><span class="string">"400%"</span>
|
||||
<span class="identifier">color-interpolation-filters</span><span class="neutral">=</span><span class="string">"sRGB"</span> <span class="identifier">id</span><span class="neutral">=</span><span class="string">"textBlurPrimary"</span><span class="neutral"> ></span>
|
||||
<span class="neutral"><feGaussianBlur</span> <span class="identifier">in</span><span class="neutral">=</span><span class="string">"SourceGraphic"</span> <span class="identifier">stdDeviation</span><span class="neutral">=</span><span class="string">"16.25"</span> <span class="neutral">/></span>
|
||||
<span class="neutral"><feOffset</span> <span class="identifier">dx</span><span class="neutral">=</span><span class="string">"0"</span> <span class="identifier">dy</span><span class="neutral">=</span><span class="string">"0"</span> <span class="identifier">result</span><span class="neutral">=</span><span class="string">"offsetblur"</span> <span class="neutral">/></span>
|
||||
<span class="neutral"><feFlood</span> <span class="identifier">flood-color</span><span class="neutral">=</span><span class="string">"#3f012d"</span> <span class="identifier">flood-opacity</span><span class="neutral">=</span><span class="string">"1"</span> <span class="neutral">/></span> <span class="comment"><!-- color-argon-950 --></span>
|
||||
<span class="neutral"><feComposite</span> <span class="identifier">in2</span><span class="neutral">=</span><span class="string">"offsetblur"</span> <span class="identifier">operator</span><span class="neutral">=</span><span class="string">"in"</span> <span class="neutral">/></span>
|
||||
<span class="neutral"><feMerge</span> <span class="identifier">result</span><span class="neutral">=</span><span class="string">"drop_shadow_0"</span> <span class="neutral">></span>
|
||||
<span class="neutral"><feMergeNode/></span>
|
||||
<span class="neutral"><feMergeNode</span> <span class="identifier">in</span><span class="neutral">=</span><span class="string">"SourceGraphic"</span> <span class="neutral">/></span>
|
||||
<span class="neutral"></feMerge></span>
|
||||
<span class="neutral"></filter></span>
|
||||
|
||||
<span class="neutral"><filter</span> <span class="identifier">x</span><span class="neutral">=</span><span class="string">"-25%"</span> <span class="identifier">y</span><span class="neutral">=</span><span class="string">"-150%"</span> <span class="identifier">width</span><span class="neutral">=</span><span class="string">"150%"</span> <span class="identifier">height</span><span class="neutral">=</span><span class="string">"400%"</span>
|
||||
<span class="identifier">color-interpolation-filters</span><span class="neutral">=</span><span class="string">"sRGB"</span> <span class="identifier">id</span><span class="neutral">=</span><span class="string">"textInsetPrimary"</span><span class="neutral"> ></span>
|
||||
<span class="neutral"><feFlood</span> <span class="identifier">flood-color</span><span class="neutral">=</span><span class="string">"#c6257d"</span> <span class="identifier">result</span><span class="neutral">=</span><span class="string">"flood_brighter"</span> <span class="neutral">/></span> <span class="comment"><!-- color-primary --></span>
|
||||
<span class="neutral"><feFlood</span> <span class="identifier">flood-color</span><span class="neutral">=</span><span class="string">"#3f012d"</span> <span class="identifier">result</span><span class="neutral">=</span><span class="string">"flood_darker"</span> <span class="neutral">/></span> <span class="comment"><!-- color-argon-950 --></span>
|
||||
|
||||
<span class="neutral"><feComposite</span> <span class="identifier">in</span><span class="neutral">=</span><span class="string">"flood_darker"</span> <span class="identifier">in2</span><span class="neutral">=</span><span class="string">"SourceAlpha"</span> <span class="identifier">operator</span><span class="neutral">=</span><span class="string">"in"</span>
|
||||
<span class="identifier">result</span><span class="neutral">=</span><span class="string">"flooded"</span> <span class="neutral">/></span>
|
||||
<span class="neutral"><feComponentTransfer</span> <span class="identifier">in</span><span class="neutral">=</span><span class="string">"SourceAlpha"</span> <span class="identifier">result</span><span class="neutral">=</span><span class="string">"reduced_alpha"</span> <span class="neutral">></span>
|
||||
<span class="neutral"><feFuncA</span> <span class="identifier">type</span><span class="neutral">=</span><span class="string">"table"</span> <span class="identifier">tableValues</span><span class="neutral">=</span><span class="string">"0 0.5"</span> <span class="neutral">/></span>
|
||||
<span class="neutral"></feComponentTransfer></span>
|
||||
<span class="neutral"><feGaussianBlur</span> <span class="identifier">in</span><span class="neutral">=</span><span class="string">"reduced_alpha"</span> <span class="identifier">stdDeviation</span><span class="neutral">=</span><span class="string">"16.25"</span>
|
||||
<span class="identifier">result</span><span class="neutral">=</span><span class="string">"inset_drop_shadow"</span> <span class="neutral">/></span>
|
||||
<span class="neutral"><feComposite</span> <span class="identifier">in</span><span class="neutral">=</span><span class="string">"flood_brighter"</span> <span class="identifier">in2</span><span class="neutral">=</span><span class="string">"inset_drop_shadow"</span> <span class="identifier">operator</span><span class="neutral">=</span><span class="string">"in"</span>
|
||||
<span class="identifier">result</span><span class="neutral">=</span><span class="string">"inset_drop_shadow_brighter"</span> <span class="neutral">/></span>
|
||||
<span class="neutral"><feComposite</span> <span class="identifier">in</span><span class="neutral">=</span><span class="string">"inset_drop_shadow_brighter"</span> <span class="identifier">in2</span><span class="neutral">=</span><span class="string">"SourceAlpha"</span> <span class="identifier">operator</span><span class="neutral">=</span><span class="string">"in"</span>
|
||||
<span class="identifier">result</span><span class="neutral">=</span><span class="string">"inset_shadow"</span> <span class="neutral">/></span>
|
||||
<span class="neutral"><feMerge</span> <span class="identifier">result</span><span class="neutral">=</span><span class="string">"final"</span><span class="neutral">></span>
|
||||
<span class="neutral"><feMergeNode</span> <span class="identifier">in</span><span class="neutral">=</span><span class="string">"flooded"</span> <span class="neutral">/></span>
|
||||
<span class="neutral"><feMergeNode</span> <span class="identifier">in</span><span class="neutral">=</span><span class="string">"inset_shadow"</span> <span class="neutral">/></span>
|
||||
<span class="neutral"></feMerge></span>
|
||||
<span class="neutral"></filter></span></code></pre>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h2 id="notes">Notes</h2>
|
||||
<p>
|
||||
Because support for external SVG filters (using
|
||||
<code>url("filter.svg#filter-id")</code>) is still flaky, we instead
|
||||
opted to have two versions of each glow. One using SVG filters for
|
||||
use-cases which support it (like the logo), and one using CSS filters
|
||||
(as for this page's headings).
|
||||
</p>
|
||||
<p>
|
||||
In the SVG files we use two separate filters, because when combining
|
||||
shadows with the primary and the secondary color as can be seen in the
|
||||
logo, it is necessary to first add all drop-shadows to all paths using
|
||||
<code>style="mix-blend-mode: screen;"</code> and put them in an
|
||||
isolated group, so that the blend mode does not interfere with the
|
||||
background:<br />
|
||||
<code><g style="isolation: isolate;"></code><br />
|
||||
Then layer all inset-shadow filters on top of that - otherwise, one
|
||||
path's drop shadow might overlay another path's inset-shadow. Have a
|
||||
look at the
|
||||
<a
|
||||
href="https://git.hamburg.ccc.de/EH22/design-public/src/commit/c7eaf8b3bc7e9c6b462aada7685ed83bf36b8978/logo/logo_eventname_glow.svg?display=source#L167"
|
||||
>logo's source</a
|
||||
>
|
||||
for an example.
|
||||
</p>
|
||||
<p>
|
||||
Since inkscape, for example, cannot handle the ‘feDropShadow’ filter
|
||||
yet, we use it in its long form as a combination of 5 other filters,
|
||||
as described in the
|
||||
<a href="https://www.w3.org/TR/filter-effects-1/#feDropShadowElement"
|
||||
>SVG Filter Effects Module Level 1 (Working Draft)</a
|
||||
>.
|
||||
</p>
|
||||
</main>
|
||||
</div>
|
||||
<script
|
||||
src="assets/script/styleguide.js"
|
||||
type="text/javascript"
|
||||
></script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue