260 lines
22 KiB
HTML
260 lines
22 KiB
HTML
<!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="stylesheet"
|
|
type="text/css"
|
|
href="../assets/style/styleguide.css"
|
|
/>
|
|
<title>Glow</title>
|
|
</head>
|
|
|
|
<body>
|
|
<header>
|
|
<a href="/" 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="/"><i data-icon="arrow-left"></i>Back to Wiki</a>
|
|
</li>
|
|
<li>
|
|
<a href="../"><i data-icon="home"></i>Overview</a>
|
|
</li>
|
|
<li>
|
|
<a href="../colors"><i data-icon="info"></i>Colors</a>
|
|
</li>
|
|
<li>
|
|
<a href="../typography"><i data-icon="info"></i>Typography</a>
|
|
</li>
|
|
<li>
|
|
<a href="../iconography"><i data-icon="info"></i>Iconography</a>
|
|
</li>
|
|
<li>
|
|
<a href="../logo"><i data-icon="info"></i>Logo</a>
|
|
</li>
|
|
<li class="active">
|
|
<a href=""><i data-icon="info"></i>Glow</a>
|
|
</li>
|
|
<li>
|
|
<a href="../demopage"><i data-icon="info"></i>Demopage</a>
|
|
</li>
|
|
<li>
|
|
<a href="../generator"><i data-icon="info"></i>Image Generator</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="light"></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="light"></i>
|
|
</label>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
<main>
|
|
<div class="alert">
|
|
<i data-icon="warning"></i>
|
|
<p>
|
|
<strong>Work in progress</strong>
|
|
This style guide is still under development.<br />
|
|
Not all resources may be available yet, explanations and examples
|
|
may be missing and things may change without notice.
|
|
</p>
|
|
</div>
|
|
|
|
<h1>Glow</h1>
|
|
<p><b>Very rough draft!</b></p>
|
|
<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. But
|
|
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). Below you'll find implementation
|
|
examples using the primary color CSS variable for the glow color as
|
|
specified in our (S)CSS stylesheets. Simply replace
|
|
<code>--color-primary</code> with <code>--color-secondary</code> to
|
|
use the secondary color.
|
|
</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="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">style</span><span class="neutral">=</span><span class="string">"color-interpolation-filters:sRGB;"</span> <span class="identifier">id</span><span class="neutral">=</span><span class="string">"textBlurPrimary"</span><span class="neutral">></span>
|
|
<span class="neutral"><feDropShadow</span> <span class="identifier">in</span><span class="neutral">=</span><span class="string">"SourceGraphic"</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">stdDeviation</span><span class="neutral">=</span><span class="string">"16.25"</span>
|
|
<span class="identifier">style</span><span class="neutral">=</span><span class="string">"flood-color: var(--color-white);"</span> <span class="identifier">result</span><span class="neutral">=</span><span class="string">"drop_shadow_0"</span> <span class="neutral">/></span>
|
|
<span class="neutral"><feDropShadow</span> <span class="identifier">in</span><span class="neutral">=</span><span class="string">"drop_shadow_0"</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">stdDeviation</span><span class="neutral">=</span><span class="string">"32.5"</span>
|
|
<span class="identifier">style</span><span class="neutral">=</span><span class="string">"flood-color: var(--color-primary);"</span> <span class="identifier">result</span><span class="neutral">=</span><span class="string">"drop_shadow_1"</span> <span class="neutral">/></span>
|
|
<span class="neutral"><feDropShadow</span> <span class="identifier">in</span><span class="neutral">=</span><span class="string">"drop_shadow_1"</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">stdDeviation</span><span class="neutral">=</span><span class="string">"65"</span>
|
|
<span class="identifier">style</span><span class="neutral">=</span><span class="string">"flood-color: var(--color-primary);"</span> <span class="identifier">result</span><span class="neutral">=</span><span class="string">"drop_shadow_2"</span> <span class="neutral">/></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">style</span><span class="neutral">=</span><span class="string">"color-interpolation-filters: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">style</span><span class="neutral">=</span><span class="string">"flood-color: var(--color-white);"</span> <span class="identifier">result</span><span class="neutral">=</span><span class="string">"flood-white"</span>
|
|
<span class="neutral">/></span>
|
|
<span class="neutral"><feFlood</span> <span class="identifier">style</span><span class="neutral">=</span><span class="string">"flood-color: var(--color-primary);"</span>
|
|
<span class="identifier">result</span><span class="neutral">=</span><span class="string">"flood-glow-color"</span> <span class="neutral">/></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>
|
|
We use two separate filters here, 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 then layer all
|
|
inset-shadow filters ontop of that. Otherwise one path's drop-shadow
|
|
could layer over another path's inset-shadow. Have a look at the
|
|
logo's source for an example.
|
|
</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. But support for
|
|
external SVG filters (using
|
|
<code>url("filter.svg#filter-id")</code>) is still flaky, we instead
|
|
opted to have to 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). Below you'll find implementation
|
|
examples. They specify tones of the primary color using their
|
|
respective CSS variable in our stylesheet. You can simply replace each
|
|
occurence of "primary" with "secondary" and "argon" with "krypton" to
|
|
get a glow of the secondary color.
|
|
</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="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">style</span><span class="neutral">=</span><span class="string">"color-interpolation-filters:sRGB;"</span> <span class="identifier">id</span><span class="neutral">=</span><span class="string">"textBlurPrimary"</span><span class="neutral">></span>
|
|
<span class="neutral"><feDropShadow</span> <span class="identifier">in</span><span class="neutral">=</span><span class="string">"SourceGraphic"</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">stdDeviation</span><span class="neutral">=</span><span class="string">"16.25"</span>
|
|
<span class="identifier">style</span><span class="neutral">=</span><span class="string">"flood-color: var(--color-argon-950);"</span> <span class="identifier">result</span><span class="neutral">=</span><span class="string">"drop_shadow_0"</span> <span class="neutral">/></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">style</span><span class="neutral">=</span><span class="string">"color-interpolation-filters: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">style</span><span class="neutral">=</span><span class="string">"flood-color: var(--color-primary);"</span> <span class="identifier">result</span><span class="neutral">=</span><span class="string">"flood_brighter"</span>
|
|
<span class="neutral">/></span>
|
|
<span class="neutral"><feFlood</span> <span class="identifier">style</span><span class="neutral">=</span><span class="string">"flood-color: var(--color-argon-800);"</span>
|
|
<span class="identifier">result</span><span class="neutral">=</span><span class="string">"flood_darker"</span> <span class="neutral">/></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"><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_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>
|
|
We use two separate filters here, 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 then layer all
|
|
inset-shadow filters ontop of that. Otherwise one path's drop-shadow
|
|
could layer over another path's inset-shadow. Have a look at the
|
|
logo's source for an example.
|
|
</li>
|
|
</ul>
|
|
</main>
|
|
</div>
|
|
<script
|
|
src="../assets/script/styleguide.js"
|
|
type="text/javascript"
|
|
></script>
|
|
</body>
|
|
</html>
|