Egg/cyberpink
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

OnClick chroma

Browse source
This commit is contained in:
Nox Sluijtman 2023-08-11 00:10:47 +02:00
parent 6db60fa38a
commit e8bdece431
2 changed files with 29 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
layouts/partials/chroma.html
View file

@ -1,5 +1,6 @@
<!-- Chromatic abaration effect --> <!-- Chromatic abaration effect -->
<svg width="0" height="0"> <svg width="0" height="0">
<filter id="chroma"> <filter id="chroma">
<feColorMatrix type="matrix" <feColorMatrix type="matrix"
result="red_" result="red_"
@ -18,4 +19,24 @@
<feOffset in="blue_" dx="-3" dy="0" result="blue"/> <feOffset in="blue_" dx="-3" dy="0" result="blue"/>
<feBlend mode="screen" in="red" in2="blue"/> <feBlend mode="screen" in="red" in2="blue"/>
</filter> </filter>
<filter id="chromaClick">
<feColorMatrix type="matrix"
result="red_"
values="4 0 0 0 0
0 0 0 0 0
0 0 0 0 0
0 0 0 1 0"/>
<feOffset in="red_" dx="4" dy="0" result="red"/>
<feColorMatrix type="matrix"
in="SourceGraphic"
result="blue_"
values="0 0 0 0 0
0 3 0 0 0
0 0 10 0 0
0 0 0 1 0"/>
<feOffset in="blue_" dx="-5" dy="0" result="blue"/>
<feBlend mode="screen" in="red" in2="blue"/>
</filter>
</svg> </svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 519 B

After

Width:  |  Height:  |  Size: 976 B

10
static/style.css
View file

@ -14,16 +14,22 @@ body {
summary{cursor:pointer;} summary{cursor:pointer;}
summary:hover{ summary:hover{
-webkit-filter: url(#chroma); filter: url(#chroma);
color: black; color: black;
background-color: #E60073; background-color: #E60073;
} }
summary:hover:active{ filter: url(#chromaClick) }
a{ a{
color: #E60073; color: #E60073;
text-decoration: none; text-decoration: none;
} }
a:hover:active{
filter:url(#chromaClick);
}
a::after{ content: ']'; } a::after{ content: ']'; }
a::before{ content: '['; } a::before{ content: '['; }
@ -32,7 +38,7 @@ a:hover{
color: black; color: black;
background-color: #E60073; background-color: #E60073;
position:relative; position:relative;
-webkit-filter: url(#chroma); filter: url(#chroma);
} }
a:hover::selection{ a:hover::selection{