)
}
}
)
(
}
{
)
)
(
)
(
(
{
}
)
(
)
}
)
)
{
(
(
)
)
}
)
(
}
AboutAll PostsWarningRandom

Responsive Radial Gradient Background

  1. function rect(x1, y1, x2, y2, col) {
  2.   const dx = x1 - x2;
  3.   const dy = y1 - y2;
  4.   const dist = Math.sqrt(dx * dx + dy * dy);
  5.   return `radial-gradient(circle at ${x1}% ${y1}%, ${col} 0, ${col} ${dist}%, transparent ${dist +
  6.     0.1}%)`;
  7. }
  8.  
  9. const NUM = 90;
  10. const MAX_SIZE = 20;
  11.  
  12. const rects = [];
  13. const colors = ['rgba(0, 0, 0, 0.2)', 'white', 'black'];
  14.  
  15. for (let i = 0; i < NUM; i++) {
  16.   const x1 = Math.random() * 100; // %
  17.   const y1 = Math.random() * 100;
  18.   const size = Math.random() * Math.random() * MAX_SIZE;
  19.   const idx = Math.random() < 0.3 ? 1 + Math.round(Math.random()) : 0;
  20.   col = colors[idx];
  21.   rects.push(rect(x1, y1, x1 + size,  y1 + size, col));
  22. }
  23.  
  24. document.body.style.backgroundImage = rects.join(', ');
  25.  
  26. document.body.innerHTML += `
  27.   <style>
  28.     body, html {
  29.       height: 100%;
  30.       background-repeat: no-repeat;
  31.     }
  32.   </style>
  33. `;

Many circles with no divs or canvas, just radial-gradients…

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

Single Div Box Shadow CSS

  1. <div></div>
  2. <style>
  3.   div {
  4.     position: absolute;
  5.     left: 0; top: 0;
  6.     width: 1px; height: 1px;
  7.     box-shadow: 
  8.       140px 90px 0px 4px white,
  9.       140px 90px 0px 30px rgba(255, 0, 0, 0.2),
  10.       140px 90px 0px 10px teal,
  11.       90px 80px 0px 4px white,
  12.       90px 80px 0px 30px rgba(255, 0, 0, 0.2),
  13.       90px 80px 0px 10px teal,
  14.       70px 60px 0px 20px orange,
  15.       60px 50px 0px 20px blue,
  16.       50px 40px 0px 20px red,
  17.       40px 30px 0px 20px black;
  18.   }
  19. </style>

Many box shadows on a single div.

// css

Conic Gradient CSS

  1. <div></div>
  2. <style>
  3.   div {
  4.     width: 200px;
  5.     height: 200px;
  6.     background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
  7.   }
  8. </style>


CSS conic gradient. I got this snippet from CSS Tricks article… 😀

// css // gradients // graphics // html

CSS Color Picker Gradient

  1. const col = document.body.appendChild(
  2.   document.createElement('div')
  3. );
  4. Object.assign(col.style, {
  5.   position: 'absolute',
  6.   left: 0, top: 0,
  7.   width: '100%',
  8.   height: '200px',
  9.   background: 'linear-gradient(90deg, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000)'
  10. });

CSS gradient that cycles hue – useful for a colorpicker. This is the main part of the snippet:

linear-gradient(90deg, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000)
// color // css // dom // javascript

Local Mouse Click

  1. const RIGHT_BOUND = 200;
  2. const measureEl = document.createElement('div');
  3.  
  4. Object.assign(measureEl.style, {
  5.   position: 'absolute',
  6.   left: 0,
  7.   top: 0,
  8.   zIndex: 999
  9. });
  10.  
  11. function localPosition(e, element, w = 1, h = 1) {
  12.  
  13.   // normalize desktop and mobile
  14.   const touches = e.touches;
  15.   let x;
  16.   let y;
  17.   if (touches != null && touches.length > 0) {
  18.     x = touches[0].clientX;
  19.     y = touches[0].clientY;
  20.   } else {
  21.     x = e.clientX;
  22.     y = e.clientY;
  23.   }
  24.  
  25.   function location(width) {
  26.     let left = 0;
  27.     let right = RIGHT_BOUND;
  28.     let mid;
  29.  
  30.     while (right - left > 0.0001) {
  31.       mid = (right + left) / 2;
  32.  
  33.       measureEl.style[width ? 'width' : 'height'] = `${mid}%`;
  34.       measureEl.style[width ? 'height' : 'width'] = '100%';
  35.       element.appendChild(measureEl);
  36.       const el = document.elementFromPoint(x, y);
  37.  
  38.       element.removeChild(measureEl);
  39.       if (el === measureEl) {
  40.         right = mid;
  41.       } else {
  42.         if (right === RIGHT_BOUND) {
  43.           return null;
  44.         }
  45.         left = mid;
  46.       }
  47.     }
  48.  
  49.     return mid;
  50.   }
  51.  
  52.   const left = location(1);
  53.   const top = location(0);
  54.   return left != null && top != null
  55.     ? {
  56.         // percentage values
  57.         left,
  58.         top,
  59.         // pixel values
  60.         x: left * w * 0.01,
  61.         y: top * h * 0.01
  62.       }
  63.     : null;
  64. }
  65.  
  66. const div = document.body.appendChild(document.createElement('div'));
  67. div.innerHTML = 'click me';
  68. Object.assign(div.style, {
  69.   postition: 'absolute',
  70.   transform: 'translate(20px, 20px) rotate(45deg) scale(0.8)',
  71.   width: '120px',
  72.   height: '90px',
  73.   color: 'white',
  74.   fontFamily: 'sans-serif',
  75.   background: 'gray'
  76. });
  77.  
  78. document.addEventListener('touchstart', onClick);
  79. document.addEventListener('mousedown', onClick);
  80.  
  81. function onClick(e) {
  82.   const info = localPosition(e, e.target, 120, 90);
  83.   console.log(info);
  84. }

Find the local percentage and pixel values of the mouse/touch location.

I found this one on stackoverflow here by user 4esn0k.

This is an interesting alternative to semi-broken native browser solutions and custom matrix math 😉

// css // dom // html // javascript // math
Older Posts
Newer Posts

Recent

Archive

RSS
snippet.zone ~ 2021-24 /// {s/z}