Welcome to Rose's Playground

To see this in action check out my customize page 😄.

Step one: You can show a colour picker with this code:

<form id="colour-picker-form">
  <input type="color" id="color-picker" class="color-picker" />
</form>

Step two: Add this JavaScript to your site to respond to colour changes:

<script>
document.addEventListener("DOMContentLoaded", function() {
  var colorPicker = document.getElementById("color-picker");
  var root = document.querySelector(':root');

  if (colorPicker) {
    colorPicker.value = localStorage.getItem("custom-color") || window.getComputedStyle(root).getPropertyValue('--custom-color');

    colorPicker.addEventListener("change", function (event) {
      root.style.setProperty('--custom-color', event.target.value);
      localStorage.setItem("custom-color", event.target.value);
    });
  }
});
</script>

Step three: In CSS for the elements you want to have custom colour applied, use `var(--custom-color)`. Example with the body text below.

html {
   --custom-color: #000; /* this is the default value if the user doesn't select anything */
}

body {
   color: var(--custom-color);
}

Below is an example.

This is a fun item This is another fun item! You can have lots!

Step one: Where you want your checkboxes to be, set up the form element

<form>
  <label>
    <input name="checkItems" type="checkbox" />
    <span class="checkbox-ghost"></span>
    Item one
  </label>

  <label>
    <input name="checkItems" type="checkbox" />
    <span class="checkbox-ghost"></span>
    Item two
  </label>

  <label>
    <input name="checkItems" type="checkbox" />
    <span class="checkbox-ghost"></span>
    Item three
  </label>
</form>

Step two: In CSS set up the styles to make it happen!

@keyframes rightToLeftX {
0% {
background: linear-gradient(0deg, rgba(73, 62, 255,1) 0%, transparent 0%);
}

5% {
background: linear-gradient(0deg, rgba(73, 62, 255,1) 5%, transparent 5%);
}

10% {
background: linear-gradient(0deg, rgba(73, 62, 255,1) 10%, transparent 10%);
}

15% {
background: linear-gradient(0deg, rgba(73, 62, 255,1) 15%, transparent 15%);
}

20% {
background: linear-gradient(0deg, rgba(73, 62, 255,1) 20%, transparent 20%);
}

25% {
background: linear-gradient(0deg, rgba(73, 62, 255,1) 25%, transparent 25%);
}

30% {
background: linear-gradient(0deg, rgba(73, 62, 255,1) 30%, transparent 30%);
}

35% {
background: linear-gradient(0deg, rgba(73, 62, 255,1) 35%, transparent 35%);
}

40% {
background: linear-gradient(0deg, rgba(73, 62, 255,1) 40%, transparent 40%);
}

45% {
background: linear-gradient(0deg, rgba(73, 62, 255,1) 45%, transparent 45%);
}

50% {
background: linear-gradient(0deg, rgba(73, 62, 255,1) 50%, transparent 50%);
}

55% {
background: linear-gradient(0deg, rgba(73, 62, 255,1) 55%, transparent 55%);
}

60% {
background: linear-gradient(0deg, rgba(73, 62, 255,1) 60%, transparent 60%);
}

65% {
background: linear-gradient(0deg, rgba(73, 62, 255,1) 65%, transparent 65%);
}

70% {
background: linear-gradient(0deg, rgba(73, 62, 255,1) 70%, transparent 70%);
}

75% {
background: linear-gradient(0deg, rgba(73, 62, 255,1) 75%, transparent 75%);
}

80% {
background: linear-gradient(0deg, rgba(73, 62, 255,1) 80%, transparent 80%);
}

85% {
background: linear-gradient(0deg, rgba(73, 62, 255,1) 85%, transparent 85%);
}

90% {
background: linear-gradient(0deg, rgba(73, 62, 255,1) 90%, transparent 90%);
}

95% {
background: linear-gradient(0deg, rgba(73, 62, 255,1) 95%, transparent 95%);
}

100% {
background: linear-gradient(0deg, rgba(73, 62, 255,1) 100%, transparent 100%);
}
}

@keyframes leftToRightX {
0% {
background: linear-gradient(180deg, rgba(73, 62, 255,1) 0%, transparent 0%);
}

5% {
background: linear-gradient(180deg, rgba(73, 62, 255,1) 5%, transparent 5%);
}

10% {
background: linear-gradient(180deg, rgba(73, 62, 255,1) 10%, transparent 10%);
}

15% {
background: linear-gradient(180deg, rgba(73, 62, 255,1) 15%, transparent 15%);
}

20% {
background: linear-gradient(180deg, rgba(73, 62, 255,1) 20%, transparent 20%);
}

25% {
background: linear-gradient(180deg, rgba(73, 62, 255,1) 25%, transparent 25%);
}

30% {
background: linear-gradient(180deg, rgba(73, 62, 255,1) 30%, transparent 30%);
}

35% {
background: linear-gradient(180deg, rgba(73, 62, 255,1) 35%, transparent 35%);
}

40% {
background: linear-gradient(180deg, rgba(73, 62, 255,1) 40%, transparent 40%);
}

45% {
background: linear-gradient(180deg, rgba(73, 62, 255,1) 45%, transparent 45%);
}

50% {
background: linear-gradient(180deg, rgba(73, 62, 255,1) 50%, transparent 50%);
}

55% {
background: linear-gradient(180deg, rgba(73, 62, 255,1) 55%, transparent 55%);
}

60% {
background: linear-gradient(180deg, rgba(73, 62, 255,1) 60%, transparent 60%);
}

65% {
background: linear-gradient(180deg, rgba(73, 62, 255,1) 65%, transparent 65%);
}

70% {
background: linear-gradient(180deg, rgba(73, 62, 255,1) 70%, transparent 70%);
}

75% {
background: linear-gradient(180deg, rgba(73, 62, 255,1) 75%, transparent 75%);
}

80% {
background: linear-gradient(180deg, rgba(73, 62, 255,1) 80%, transparent 80%);
}

85% {
background: linear-gradient(180deg, rgba(73, 62, 255,1) 85%, transparent 85%);
}

90% {
background: linear-gradient(180deg, rgba(73, 62, 255,1) 90%, transparent 90%);
}

95% {
background: linear-gradient(180deg, rgba(73, 62, 255,1) 95%, transparent 95%);
}

100% {
background: linear-gradient(180deg, rgba(73, 62, 255,1) 100%, transparent 100%);
}
}
   
   
input[type="checkbox"] {
    position: absolute;
    opacity: 0;
} 
   
.checkbox-ghost {
    position: relative;
    display: block;
    width: 15px;
    height: 15px;
    border-radius: 5px;
    border: 3px solid rgba(73, 62, 255,1);
    margin-right: 10px;
    transition: all 200ms ease-in;
}

input[type="checkbox"]:checked + .checkbox-ghost::before {
    animation: leftToRightX 100ms linear forwards;
    transform: rotate(-45deg);
    display: block;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    border-radius: 4px;
    height: 15px;
    margin-left: 6px;
}
   
input[type="checkbox"]:checked + .checkbox-ghost::after {
    animation: rightToLeftX 100ms linear forwards;
    animation-delay: 100ms;
    transform: rotate(45deg);
    display: block;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    border-radius: 4px;
    height: 15px;
    margin-left: 6px;
} 

You can try this out by Hovering on this and Hovering on this.

Step one: Any time you want your link to have a tooltip, set it by adding `data-text` to it, like this:

<a href="https://google.com" data-text="Visit google">This is a link</a>

Step two: In your CSS, use this code:

@keyframes tooltip {
  0% {
    transform: scale(0) translateY(-110%);
    opacity: 0;
  }

  100% {
    transform: scale(1) translateY(-110%);
    opacity: 1;
  }
}

a[data-text] {
  position: relative;
}

a[data-text]:hover::after {
  animation: tooltip 100ms ease-in forwards;
  transform: translateY(-110%);
  position: absolute;
  content: attr(data-text);
  background: rgba(185, 48, 123, 0.9);
  top: 0;
  left: 0;
  right: 0;
  width: fit-content;
  margin: auto;
  color: white;
  padding: 2px 4px;
  border-radius: 2px;
  font-size: .7em;
}

Try out some rainbow text! Everything you type will be rainbowy! This could be especially fun for rainbow links!

Step one: wrap rainbow text in a span with a class of rainbow-text

<span class="rainbow-text">this text will be rainbow</span>

Step two: In your CSS, use this code:

.rainbow-text {
  background-image: linear-gradient(to right, #6e436b 0%, #6e436b 16.6%, #4295b6 16.6%, #4295b6 33.2%, #469a46 33.2%, #469a46 49.8%, #d8c91d 49.8%, #d8c91d 66.4%, #cc7905 66.4%, #cc7905 83%, #FF6663 83%, #FF6663 100%);
  background-size: 30%;
  background-repeat: repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

You can check out a few examples: Bouncy

... and you can easily have lots of bouncy text.

Step one: wrap bouncy text in a span with a class of bouncy-text

<span class="bouncy-text">this text will be bouncy</span>

Step two: add this javascript to your site

<script>
document.addEventListener("DOMContentLoaded", function() {
   var bouncy = document.getElementsByClassName("bouncy-text");
   Array.from(bouncy || []).forEach(function (text) {
       var textArray = text.textContent.trim().split("");
       text.innerHTML = "";
       textArray.forEach(function (letter, index) {
           var span = document.createElement("span");
           span.style['animation-delay'] = (100 * index) + 'ms';
           span.textContent = letter.replace(" ",'\xa0');

           // Optional: The next few lines can be deleted if you don't want randomly generated colors             const r = parseInt(Math.random() * 255);
            const g = parseInt(Math.random() * 255);
            const b = parseInt(Math.random() * 255);
            span.style.color = "rgb(" + r + "," + g + "," + b + ")";

            // Keep this line though
            text.appendChild(span);
        });
    });
});
</script>

Step three: In your CSS, use this code:

@keyframes letter-animation {
0% {
transform: rotate(-10deg) translateY(-15px) scale(1);
opacity: 1;
}

5% {
transform: rotate(-10deg) translateY(-25px) scale(1.2);
}

12% {
transform: rotate(0deg) translateY(0) scale(1);
opacity: 1;
}

100% {
transform: rotate(0deg) translateY(0) scale(1);
opacity: 1;
}
}

.bouncy-text > span {
display: inline-block;
animation-name: letter-animation;
animation-duration: 2s;
animation-timing-function: ease-in;
animation-fill-mode: forwards;
transform: rotate(-10deg) translateY(-20px);
animation-iteration-count: infinite;
opacity: 0;
font-weight: bold;
letter-spacing: 2px;
color: var(--link-underline-color);
}