This commit is contained in:
parent
939e3b58b4
commit
7c5aad7e21
SSH key fingerprint:
SHA256:WMHGS60rozMrHkA/VT+Ole85sPCLZ190yemdzY68WJo
1 changed files with 148 additions and 1 deletions
|
|
@ -108,7 +108,154 @@
|
|||
</div>
|
||||
|
||||
<h1>Glow</h1>
|
||||
<!-- TODO -->
|
||||
<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 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 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>
|
||||
filter:
|
||||
drop-shadow(0 0 0.03125em var(--color-white))
|
||||
drop-shadow(0 0 0.0625em var(--color-primary))
|
||||
drop-shadow(0 0 0.125em var(--color-primary));</pre
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
For SVG filters instead use the following two filters:
|
||||
<pre>
|
||||
<filter x="-150%" y="-150%" width="400%" height="400%"
|
||||
style="color-interpolation-filters:sRGB;" id="textBlurPrimary">
|
||||
<feDropShadow in="SourceGraphic" dx="0" dy="0" stdDeviation="16.25"
|
||||
style="flood-color: var(--color-white);" result="drop_shadow_0" />
|
||||
<feDropShadow in="drop_shadow_0" dx="0" dy="0" stdDeviation="32.5"
|
||||
style="flood-color: var(--color-primary);" result="drop_shadow_1" />
|
||||
<feDropShadow in="drop_shadow_1" dx="0" dy="0" stdDeviation="65"
|
||||
style="flood-color: var(--color-primary);" result="drop_shadow_2" />
|
||||
</filter>
|
||||
|
||||
<filter x="-150%" y="-150%" width="400%" height="400%"
|
||||
style="color-interpolation-filters:sRGB;" id="textInsetPrimary">
|
||||
<feFlood style="flood-color: var(--color-white);" result="flood-white"
|
||||
/>
|
||||
<feFlood style="flood-color: var(--color-primary);"
|
||||
result="flood-glow-color" />
|
||||
|
||||
<feComposite in="flood-glow-color" in2="SourceAlpha" operator="in"
|
||||
result="flooded" />
|
||||
<feGaussianBlur in="SourceAlpha" stdDeviation="8.125"
|
||||
result="inset_drop_shadow" />
|
||||
<feComposite in="flood-white" in2="inset_drop_shadow" operator="in"
|
||||
result="inset_drop_shadow_white" />
|
||||
<feComposite in="inset_drop_shadow_white" in2="SourceAlpha" operator="in"
|
||||
result="inset_shadow" />
|
||||
<feMerge result="final">
|
||||
<feMergeNode in="flooded" />
|
||||
<feMergeNode in="inset_shadow" />
|
||||
</feMerge>
|
||||
</filter></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 botha drop shadow as well as 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 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>
|
||||
filter: drop-shadow(0 0 0.03125em var(--color-argon-950));
|
||||
color: var(--color-argon-800);</pre
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
For SVG filters instead use the following two filters:
|
||||
<pre>
|
||||
<filter x="-25%" y="-150%" width="150%" height="400%"
|
||||
style="color-interpolation-filters:sRGB;" id="textBlurPrimary">
|
||||
<feDropShadow in="SourceGraphic" dx="0" dy="0" stdDeviation="16.25"
|
||||
style="flood-color: var(--color-argon-950);" result="drop_shadow_0" />
|
||||
</filter>
|
||||
|
||||
<filter x="-25%" y="-150%" width="150%" height="400%"
|
||||
style="color-interpolation-filters:sRGB;" id="textInsetPrimary">
|
||||
<feFlood style="flood-color: var(--color-primary);" result="flood_brighter"
|
||||
/>
|
||||
<feFlood style="flood-color: var(--color-argon-800);"
|
||||
result="flood_darker" />
|
||||
|
||||
<feComposite in="flood_darker" in2="SourceAlpha" operator="in"
|
||||
result="flooded" />
|
||||
<feGaussianBlur in="SourceAlpha" stdDeviation="8.125"
|
||||
result="inset_drop_shadow" />
|
||||
<feComposite in="flood_brighter" in2="inset_drop_shadow" operator="in"
|
||||
result="inset_drop_shadow_brighter" />
|
||||
<feComposite in="inset_drop_shadow_brighter" in2="SourceAlpha" operator="in"
|
||||
result="inset_shadow" />
|
||||
<feMerge result="final">
|
||||
<feMergeNode in="flooded" />
|
||||
<feMergeNode in="inset_shadow" />
|
||||
</feMerge>
|
||||
</filter></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
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue