Skip to content

s9a/tape

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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 releases
aura wurmbath

tape.css

plug play CSS classes

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 border transparent
  • .tape-flap border currentColor
  • .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

:root {
  --tape-remix: radial-gradient(coral, violet);
}

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);
}

producing

hello tape
bye shame
lettuce remixit
lifeforce
lavatory

octopus moonchild