IpsumLorem16

let cssArray = [];

for (var i = 0; i < document.styleSheets.length; i++) {
    var styleSheet = document.styleSheets[i];
    for (var j = 0; j < 1; j++) {
        let cssRules = styleSheet.cssRules;
        for (var n = 0; n < cssRules.length; n++) {
            cssArray.push(cssRules[n].selectorText);
        }

IpsumLorem16

//should speak in a british voice
// https://developers.google.com/web/updates/2014/01/Web-apps-that-talk-Introduction-to-the-Speech-Synthesis-API
var msg = new SpeechSynthesisUtterance();
var voices = window.speechSynthesis.getVoices();
msg.voice = voices[4]; // Note: some voices don't support altering params
msg.voiceURI = 'native';
msg.volume = 1; // 0 to 1
msg.rate = 1; // 0.1 to 10
msg.pitch = 1; //0 to 2
msg.text = ' This is a test';

IpsumLorem16

Cyberpunk animated SVG logo {fork}

Using CSS and SVG filters to animate this Cyber punk logo.

Click, or hold down the mouse button.

A Pen by IpsumLorem16 on CodePen.

License.

IpsumLorem16

<div class="radio-wrapper">
  <fieldset>
  <legend>Select a maintenance drone:</legend>
  <div class="custom-radio">
    <input class="visually-hidden" type="radio" id="huey" name="drone" value="huey">
    <label for="huey">
      <span class="input-circle"></span>
      Huey
    </label>
  </div>

IpsumLorem16

Custom Radio buttons (emoji-dark)

A Pen by IpsumLorem16 on CodePen.

License.

IpsumLorem16

Custom Accessible Radio buttons (emoji)

Emoji radio buttons customized with css only. Also fully Accessible.

Made by visually hiding the input, and styling the radio label.

https://www.nickhart.co.uk/2020/09/29/making-accessible-custom-radio-inputs/

A Pen by IpsumLorem16 on CodePen.

IpsumLorem16

<fieldset>
  <legend>Select A Pokémon</legend>
  <div id="pokemon-selectors" class="pokemon-container">
  <div class="radio-container">
    <input type="radio" name="pokemon-select" id="pikachu" value="pikachu" class="visually-hidden">
    <label for="pikachu">
      <span class="selected-txt-container" aria-hidden="true">
        <span class="selected-txt">
          Selected
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">

IpsumLorem16

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <circle 
    class="ring-track" 
    fill="transparent"
    stroke-width="6px"
    stroke="#9c9c9c30"
    cx="50" cy="50" 
    r="44" 
  />
  <circle 

IpsumLorem16

<svg xmlns="http://www.w3.org/2000/svg" width="384" height="158" viewBox="0 0 384 158" fill="none">
  <g id="squares">
    <rect x="36" y="13" width="100" height="100" fill="#FF5555" />
    <rect x="10" y="46" width="100" height="100" fill="#DD3030" />
  </g>
  <circle id="circle" cx="209" cy="79" r="50" fill="#F29F21" />
  <path id="triangle" d="M319 36L370.962 126H267.038L319 36Z" fill="#1DCF8F"/>
</svg>

IpsumLorem16

<svg xmlns="http://www.w3.org/2000/svg" width="384" height="158" viewBox="0 0 384 158" fill="none">
  <g id="squares">
    <rect x="36" y="13" width="100" height="100" fill="#FF5555" />
    <rect x="10" y="46" width="100" height="100" fill="#DD3030" />
  </g>
  <circle id="circle" class="shape" cx="209" cy="79" r="50" fill="#F29F21" />
  <path id="triangle" class="shape" d="M319 36L370.962 126H267.038L319 36Z" fill="#1DCF8F"/>
</svg>