@s9a/tape
v0.9.0
Published
vivid colors that stick to:ur gums
Downloads
42
Readme
tape
neon color
<html lang class="tape-blaq tape-flow">
<meta charset="utf-8">
<meta name="color-scheme" content="dark light">
<meta name="theme-color" content="#0e0e0e">
<title>play</title>
seek release~s~ aura wurmbath
tape.css
palette
.tape-watt
blaq on watt.tape-loud
blaq on loud.tape-play
blaq on play.tape-bluv
blaq on bluv.tape-luvu
blaq on luvu.tape-blaq
perm on blaq
compose
.tape-blaq.tape-watt
watt on blaq.tape-blaq.tape-loud
loud on blaq.tape-blaq.tape-play
play on blaq.tape-blaq.tape-bluv
bluv on blaq.tape-blaq.tape-luvu
luvu on blaq
distribute
.tape-flow
flow color within scope.tape-skip
skip color within flow.tape-flat
bordertransparent
.tape-flap
bordercurrentColor
.tape-erase
erase text for screenshot art
var
--tape-blaq
mesh--tape-watt
bulb--tape-play
warm--tape-loud
wind--tape-luvu
lush--tape-bluv
cull--tape-hex
is current neon--tape-mix
is current background color--tape-remix
imagine--tape-filter
hue
samples
tape flow
<html class="tape-flow tape-blaq">
having tape-flow
on your root or body to flow color thru the whole page
tape anywhere
<aside class="tape-loud">
<em>So</em> fresh!
</aside>
cool quote
<blockquote class="tape-bluv">
I said empty your mind.
Be formless.
Shapeless.
Like tape.
Now you put tape onto walls, it becomes the walls.
You put tape onto floors, it becomes the floors.
You put it in you, it becomes yours.
Now tape can flow or it can shred.
Be tape my friend.
</blockquote>
blaq link
<a class="tape-blaq" href="#sample">tape</a>
blaq play
<a class="tape-blaq tape-play" href="#sample">tape</a>
<aside class="tape-play">
Stick 4ever.
Apply <a class="tape-blaq" href="#sample">tape</a>
</aside>
neon link
<a class="tape-play" href="#sample">tape</a>
<aside class="tape-play tape-flow">
Stick 4ever.
Apply <a href="#sample">tape</a>
</aside>
<aside class="tape-play">
Stick 4ever.
Apply <a class="tape-flow" href="#sample">tape</a>
</aside>
freestyle
<a href="#sample" class="tape-play" style="--tape-hex:hotplay">hotplay</a>
<nav class="tape-flow" style="--tape-play:deepplay">
<a href="#sample" class="tape-play">deepplay</a>
</nav>
creative tone
<label class="tape-play">
<b>create name</b>
<input class="tape-watt">
<strong>imagine :)</strong>
</label>
sting tone
<label class="tape-loud">
<b>create name</b>
<input class="tape-watt">
<strong>taken :(</strong>
</label>
peace tone
<label class="tape-bluv">
<b>Create name</b>
<input class="tape-watt">
<strong>Yes =)</strong>
</label>
saving grace
<button class="tape-flap tape-luvu">Save</button>
<button class="tape-flap tape-flow">Cancel</button>
imagine
gradients
--tape-remix: linear-gradient(
var(--tape-play),
var(--tape-loud),
var(--tape-luvu),
var(--tape-bluv)
);
--tape-remix: radial-gradient(coral, violet);
--tape-remix: conic-gradient(plum, coral, pink);
filter
:focus {
--tape-filter: invert(100%);
}
:link:hover {
--tape-filter: hue-rotate(120deg);
}
trine
.twist {
--tape-filter: hue-rotate(120deg);
}
.shout {
--tape-filter: hue-rotate(240deg);
}
fill
<circle r="111" fill="var(--tape-play)" />
<circle r="333" class="tape-play" />