Snippet Zone

CSS Checkbox

```
<div class="toggle">
```

  <input class="check" type="checkbox" tabindex="0">

```
  <label></label>
```
```
</div>
```
```
 
```
```
<style>
```
```
  .toggle {
```
```
    position: relative;
```
```
  }
```
```
  .check {
```
```
    position: absolute;
```
```
    width: 3rem;
```
```
    height: 3rem;
```
```
    margin: 0;
```
```
    opacity: 0;
```
```
    cursor: pointer;
```
```
  }
```
```
  label {
```
```
    position: absolute;
```
```
    pointer-events: none;
```
```
    content: '';
```
```
    width: 3rem;
```
```
    height: 3rem;
```
```
    background: black;
```
```
    cursor: pointer
```
```
  }
```
```
  .check:checked + label {
```
```
    background: red;
```
```
  }
```
```
</style>
```

Quick css checkbox. I used to do this all the time and feel like maybe there was a better way… anyway, this is what I did to get it working fast…

February 16, 2022

// css // html // ui

HWB Colors

// Safari and Firefox only... no Chrome support at time of this post

```
Object.assign(document.body.style, { 
```
```
  margin: 0,
```
```
  display: 'grid',
```

  'grid-template-columns': '1fr 1fr 1fr',

```
});
```
```
 
```
```
const hwbBlock = () => {
```

  const hue = Math.round(Math.random() * 360)

```
  const white = Math.round(
```

    Math.random() * Math.random() * 100)

```
  const black = Math.round(
```

    Math.random() * Math.random() * 100)

  const col = `hwb(${hue} ${white}% ${black}%)`

```
  document.body.innerHTML += `
```
```
    <div 
```
```
      style="
```
```
        width: 100%;
```
```
        height: 4em;
```
```
        font-family: sans-serif;
```
```
        text-align: center;
```
```
        line-height: 2.3;
```
```
        color: white;
```
```
        text-shadow: 1px 1px 5px black;
```
```
        background:${col}">${col}</div>
```
```
  `
```
```
}
```
```
 
```
```
Array(102).fill(0).map(hwbBlock);
```

HWB color format… Looking forward to better support on this CSS color format…

February 6, 2022

// color // css

Gray Gradient Texture

function rect(x1, y1, x2, y2, col, blur = 0.1) {

```
  const dx = x1 - x2;
```
```
  const dy = y1 - y2;
```

  const dist = Math.sqrt(dx * dx + dy * dy);

  return `radial-gradient(circle at ${x1}% ${y1}%, ${col} 0, ${col} ${dist}%, transparent ${dist +

```
    blur}%)`;
```
```
}
```

const blends = 'multiply,screen,overlay,darken,lighten,color-dodge,color-burn,hard-light,soft-light,difference,exclusion,hue'.split(

```
  ','
```
```
);
```
```
const cols = ['black', 'white'];
```
```
 
```
```
function gen() {
```

  [...document.querySelectorAll('div')].forEach(d =>

```
    d.parentNode.removeChild(d)
```
```
  );
```
```
  for (let j = 0; j < 4; j++) {
```
```
    const rects = [];
```
```
    for (let i = 0; i < 10; i++) {
```
```
      const x = Math.random() * 100;
```
```
      const y = Math.random() * 100;
```

      const s = Math.random() * Math.random() * Math.random() * 30 + 3;

      const col = cols[~~(Math.random() * cols.length)];

      rects.push(rect(x, y, x + s, y + s, col, Math.random() * 10));

```
    }
```

    const el = document.body.appendChild(document.createElement('div'));

    el.style.backgroundImage = rects.join(', ');

    el.style.mixBlendMode = blends[~~(Math.random() * blends.length)];

```
  }
```
```
}
```
```
gen();
```
```
 
```
```
document.body.innerHTML += `
```

  <button id="regen">Regenerate</button>

```
  <style>
```
```
    body, html {
```
```
      height: 100%;
```
```
      background: #ccc;
```
```
      margin: 0;
```
```
      background-repeat: no-repeat;
```
```
      width: 100%;
```
```
    }
```
```
    div {
```
```
      position: absolute;
```
```
      top: 0; left: 0;
```
```
      width: 100%;
```
```
      height: 100%;
```
```
    }
```
```
    #regen {
```
```
      position: absolute;
```
```
      width: 100px;
```
```
      height: 30px;
```
```
      background: #ccc;
```
```
      border: 1px solid white;
```
```
      margin: 1em;
```
```
      cursor: pointer;
```
```
      transition: all 250ms ease-out;
```
```
      z-index: 999;
```
```
    }
```

    #regen:hover { background: #333; color: white; }

```
  </style>
```
```
`;
```
```
 
```
```
regen.onclick = gen;
```

Playing around some more with lots of linear gradients.

December 9, 2021

// color // css // gradients // graphics // hacks // javascript // speed-coded

Conic Accident

```
conicBtn.onclick = () => {
```
```
  document.body.innerHTML += `
```
```
  <style>
```
```
    div {
```

      background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);

```
    }
```
```
  </style>
```
```
  `
```
```
}
```

get ready….

When I created the gradient conic snippet from a few days ago – I accidentally applied the rule to the entire page…. thought it was funny enough to be worth making a snippet out of 😀

December 8, 2021

// css // gradients // graphics // hacks // javascript

Responsive Radial Gradient Animation

function rect(x1, y1, x2, y2, col, blur=.1) {

```
  const dx = x1 - x2;
```
```
  const dy = y1 - y2;
```

  const dist = Math.sqrt(dx * dx + dy * dy);

  return `radial-gradient(circle at ${x1}% ${y1}%, ${col} 0, ${col} ${dist}%, transparent ${dist +

```
    blur}%)`;
```
```
}
```
```
 
```
```
const NUM = 8; 
```
```
 
```
```
let rects = [];
```

const colors = ['rgba(0, 0, 0, 0.2)', 'white', 'black'];

```
 
```
```
let x = 0;
```
```
let y = 0;
```
```
let t = 8;
```
```
function loop() { 
```
```
  rects = [];
```
```
 
```
```
  for (let i = 0; i < NUM; i++) { 
```
```
    x = 50 + 30 * Math.sin(t + i / 2);
```

    y = 50 + 30 * Math.cos(t * 1.5 * i / 10);

    rects.push(rect(x, y, x + 5, y + 5, 'rgba(255, 255, 255, 1)', 1));

    rects.push(rect(x, y, x + 5, y + 5, 'rgba(0, 0, 0, 0.4)',

```
      8 + 6 * Math.cos(y / 10)));
```
```
  }
```
```
  t += .04;
```

  document.body.style.backgroundImage = rects.join(', ');

```
  window.requestAnimationFrame(loop);
```
```
}
```
```
loop()
```
```
 
```
```
document.body.innerHTML += `
```
```
  <style>
```
```
    body, html {
```
```
      height: 100%;
```
```
      background: #ccc;
```
```
      margin: 0;
```
```
      background-repeat: no-repeat;
```
```
      width: 100%;
```
```
    }
```
```
  </style>
```
```
`;
```

Animated variation on yesterdays post – many animating circles with no divs or canvas, just radial-gradients…

December 7, 2021

// animation // css // dom // graphics // hacks // javascript // math

Older Posts

Newer Posts

CSS Checkbox

HWB Colors

Gray Gradient Texture

Conic Accident

Responsive Radial Gradient Animation

Recent

Archive