Pinned Loading

1. A versatile keyframe animation confi... A versatile keyframe animation configured using css variables #css

   1

   @keyframes fadeInX {

   2

       from {

   3

           opacity: 0;

   4

           transform: translateX(var(--fadeInDist, 1rem));

   5

       }

2. Makes the 'No new emails' text prett... Makes the 'No new emails' text pretty in gmail when you reach inbox zero

   1

   .TC:not(:empty) {

   2

       height:60vh;

   3

       position: relative; /* for positioning other stuff*/

   4

       border-bottom: 1px solid white; /* no grey border*/

   5

3. Responsively sizing clip-path using ... Responsively sizing clip-path using SVG #svg #html #css

   1

   # How to do it

   2

   1. Export your SVG

   3

   2. Chuck it inline on your page somewhere

   4

   3. Add `width="0px" height="0px" style="position:absolute;pointer-events:none"` to the svg element to make it not visible on the page.

   5

   4. Put the <path> element within a <clipPath> element

4. Creates an HTML element at the curso... Creates an HTML element at the cursor location on click #js #css

   1

   .clicker {

   2

       position: absolute;

   3

   4

       width: 2rem;

   5

       height: 2rem;

5. Rounded comment box #css #scss #php Rounded comment box #css #scss #php

   1

   // ╭─────────―╮

   2

   // │ hello    │

   3

   // ╰──────────╯