Snippet Zone

)

}

}

)

(

}

{

)

)

(

)

(

(

{

}

)

(

)

}

)

)

{

(

(

)

)

}

)

(

}

About All Posts Warning Random

Toggle a Class

```
// lazy hack for css
```
```
document.body.innerHTML = `
```
```
  <style> 
```
```
    button { 
```
```
      cursor: pointer; 
```
```
    }
```
```
    .red { 
```
```
      background-color: red; 
```
```
    } 
```
```
  </style>
```
```
`
```
```
 
```
```
const btn = document.body.appendChild(
```
```
  Object.assign(
```
```
    document.createElement('button'), 
```
```
    { innerText: 'click me' }
```
```
  )
```
```
)
```
```
 
```
```
btn.addEventListener('click', e => {
```
```
  e.target.classList.toggle('red')
```
```
})
```

classList.toggle brings back memories…

March 29, 2022

0

// css // dom // ui

Multiple Class Trick

```
.thing.thing.thing {
```
```
  color: green;
```
```
}
```
```
 
```
```
.thing.thing {
```
```
  color: red;
```
```
}
```
```
 
```
```
.thing {
```
```
  color: blue;
```
```
}
```

What color would p.thing be?

March 19, 2022

0

// css // tricks // ui

Odd Gradient Notation

```
// "Being clever is not clever"
```
```
// -- Bjarne Stroustrup
```
```
D = document
```
```
ang = {
```
```
  '|': 180,
```
```
  '-': 90,
```
```
  '\\': 135,
```
```
  '/': 225
```
```
}
```
```
 
```
```
box = def => {
```
```
  def = def.split(/\s+/)
```
```
  form = def.length
```
```
  I = i => parseInt(def[i], 16)
```
```
 
```

  ;[,,, _=>{x = y = I(0); w = h = I(1); c = def[2]},

    _=>{x = I(0), y = I(1); w = h = I(2);c = def[3]},

    _=>{x = I(0); y = I(1); w = I(2); h = I(3); c = def[4]}

```
  ][form]()
```
```
 
```
```
  c = c.split``
```
```
 
```
```
  ca = c[0]
```
```
  ca = ca+ca+ca
```
```
  cD = ang[c[1]]
```
```
  cb = c[2]
```
```
  cb = cb+cb+cb 
```
```
 
```
```
  D.body.appendChild(
```
```
    D.createElement`div`
```
```
  ).style = `
```

    position: absolute; left: ${x}px; top: ${y}px;

```
    width: ${w}px; height: ${h}px;
```

    background: linear-gradient(${cD}deg, #${ca}, #${cb})

```
  `
```
```
}
```
```
 
```
```
const parse = prog => prog.trim()
```
```
  .split(/\n+/m)
```
```
  .map(line => box(line.trim()))
```
```
 
```
```
parse(`
```
```
  0 64 0/f
```
```
  64 64 0\\f
```
```
  a0 f0 30 54 f\\0
```
```
  0 6f 20 60 0-c
```
```
  f 7f 20 60 0|c
```
```
  1f 8f 30 30 c/0
```
```
`)
```

Just playing around… odd micro-gradient notation:

```
'0 64 0/f'
```
```
// x=0 y=0 width=0x64 height=0x64
```

// 0/f = gradient black to white top right to bottom left

```
 
```
```
'64 64 0\\f'
```
```
// x=0 y=0 width=0x64 height=0x64
```

// 0\\f = black to to white gradient top left to bottom right

```
 
```
```
'0 6f 20 60 0-c'
```
```
// x=0 y=0x6f width=0x20 height=0x60
```

// 0-c = gradient black to grey (#ccc) left to right

```
 
```
```
// etc... ( | ) is top to bottom grad
```

February 27, 2022

0

// css // dom // golfed // graphics // hacks // humor // regex // speed-coded

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

0

// 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

0

// color // css

snippet.zone ~ 2021-23 /// {s/z}