Karp wallpaper

css CSS
View 
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background-color: #FFFFFF;
  background-image: url("http://i.imgur.com/Q5xm8nd.gif");
  background-position: 0 0;
}

Css transform origine

css CSS
View 
#cube {
  background-color: red;
  height: 200px;
  width: 200px;
  display: inline-block;
  top: 100px;
  left: 100px;
  position: absolute;
  animation-delay: 10s;
  animation-duration: 10s;
  transform: rotate(20deg);
  transform-origin: -50% -50%;
}

Hexagone

html CSS
View 
<!-- https://ninjarockstar.dev/css-hex-grids/ -->
<style>
.hexagone {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: yellow;
  clip-path: polygon(75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%, 25% 0);
  padding: 2rem 25%;
  text-align: center;
}
.cube {
  position: relative;
  display: inline-block;
  height: 100px;
  width: 100px;
  margin: 28px;
}
</style>
<div class="cube">
  <div class="hexagone">toto</div>
</div>
<div class="cube">
  <div class="hexagone">toto</div>
</div><!-- https://ninjarockstar.dev/css-hex-grids/ -->
<style>
.hexagone {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: yellow;
  clip-path: polygon(75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%, 25% 0);
  padding: 2rem 25%;
  text-align: center;
}
.cube {
  position: relative;
  display: inline-block;
  height: 100px;
  width: 100px;
  margin: 28px;
}
</style>
<div class="cube">
  <div class="hexagone">toto</div>
</div>
<div class="cube">
  <div class="hexagone">toto</div>
</div>
toto
toto

CSS dark mode auto

css CSS
View 
:root {
  --color-background: #eee;
  --color-border: #cacfd5;
  --color-text-default: #0b1016;
  --color-base: #f4f5f6;
  --color-accent: #ba0d37; }

  @media (prefers-color-scheme: dark) {
  :root {
  --color-background: #38444c;
  --color-border: #697278;
  --color-text-default: #f0f2f3;
  --color-base: #293238;
  --color-accent: #ec1a62; }
}

body {
  background-color: var(--color-background);
  color: var(--color-text-default);
}
Text for test text color

Keyframes loop in css

css CSS
View 
.obj{
  width: 80px;
  height: 80px;
  background-color: red;
  margin: 8px;
  -webkit-animation: anim 5s infinite;
  -moz-animation: anim 5s infinite;
  -o-animation: anim 5s infinite;
  animation: anim 5s infinite;
}
@keyframes anim {
  0% {background-color: red;}
  10% {background-color: orange;}
  20% {background-color: yellow;}
  40% {background-color: green;}
  60% {background-color: blue;}
  80% {background-color: indigo;}
  100% {background-color: purple;}
}

Mosaic css

html CSS
View 
<style>
  .mosaic {
    position: relative;
    background-color: blue;
    height: 402px;
    width: 402px;
    margin: auto;
  }

  .mosaic img {
    position: absolute;
    z-index: 2;
    background-color: red;
    display: block;
  }

  .mosaic img:nth-child(1) {
    width: 100px;
    height: 200px;
    top: 0;
    right: 0;
  }

  .mosaic img:nth-child(2) {
    width: 300px;
    height: 200px;
    top: 0;
    left: 0;
  }

  .mosaic img:nth-child(3) {
    width: 200px;
    height: 200px;
    bottom: 0;
    right: 0;
  }

  .mosaic img:nth-child(4) {
    width: 200px;
    height: 200px;
    bottom: 0;
    left: 0;
  }
</style>
<div class="mosaic">
  <img src="">
  <img src="">
  <img src="">
  <img src="">
</div>

Flip 3D

html CSS
View 
<style>
  .flip3D {
    width: 240px;
    height: 200px;
    margin: 10px;
    float: left;
  }

  .flip3D>.front {
    position: absolute;
    transform: perspective(600px) rotateY(0deg);
    background: #FC0;
    width: 240px;
    height: 200px;
    border-radius: 7px;
    backface-visibility: hidden;
    transition: transform .5s linear 0s;
  }

  .flip3D>.back {
    position: absolute;
    transform: perspective(600px) rotateY(180deg);
    background: #80BFFF;
    width: 240px;
    height: 200px;
    border-radius: 7px;
    backface-visibility: hidden;
    transition: transform .5s linear 0s;
  }

  .flip3D:hover>.front {
    transform: perspective(600px) rotateY(-180deg);
  }

  .flip3D:hover>.back {
    transform: perspective(600px) rotateY(0deg);
  }
</style>
<div class="flip3D">
  <div class="back">Box 1 - Back</div>
  <div class="front">Box 1 - Front</div>
</div>
Box 1 - Back
Box 1 - Front

Scss chat UI

scss CSS
View 
.chat {
  width: 500px;
  height: 334px;
  padding: 8px;
  position: relative;
  box-shadow: 1px 0 5px 0 rgba(0, 0, 0, 0.2), 1px 0 5px 0 rgba(0, 0, 0, 0.2), 1px 0 5px 0 rgba(0, 0, 0, 0.2);

  .messagebox {
    width: 500px;
    height: 300px;
    overflow: auto;
    box-shadow: inset 1px 0 5px 0 rgba(0, 0, 0, 0.2), inset 1px 0 5px 0 rgba(0, 0, 0, 0.2), inset 1px 0 5px 0 rgba(0, 0, 0, 0.2);

    .message {
      margin: 8px;
    }
  }

  .newmessage {
    margin-top: 8px;
    display: flex;

    #newmessagefeild {
      width: 455px;
      height: 22px;
      border-top-left-radius: 8px;
      border-bottom-left-radius: 8px;
      resize: none;
    }

    button {
      width: 40px;
      height: 28px;
      line-height: 0px;
      font-size: 30px;
      border-top-right-radius: 8px;
      border-bottom-right-radius: 8px;
    }
  }

  ::-webkit-scrollbar {
    height: 4px;
    width: 4px;
  }

  ::-webkit-scrollbar:hover {
    height: 15px;
    width: 15px;
  }

  ::-webkit-scrollbar-track {
    background: #D2D2D2;
  }

  ::-webkit-scrollbar-thumb {
    background: #4f4f4f;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: #111;
  }

  .messagebox:hover::-webkit-scrollbar {
    width: 15px;
  }
}

Reduced motion

css CSS
View 
/* https://dev.to/alvaromontoro/consider-reducing-motions-1a13 */
/* disable all animations and transitions if reduced motion */
@media (prefers-reduced-motion: reduce) { /* no-preference */
  * {
    animation: none !important;
    transition: none !important;
  }
}

Text outline

css CSS
View 
/* https://dev.to/alvaromontoro/color-contrast-text-3l29 */
.text-with-outline-1 {
  color: #fff;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #000;
}

.text-with-outline-2 {
  color: #fff;
  text-shadow:  0px -1px #000,
                1px -1px #000,
                1px  0px #000, 
                1px  1px #000,
                0px  1px #000,
               -1px  1px #000,
               -1px  0px #000,
               -1px -1px #000;
}

Create circle hole in image with clip-path

js CSS
View 
  let precision = 64;
  let radius = 25;
  let c = [...Array(precision)].map((_, i) => {
    let a = -i/(precision-1)*Math.PI*2;
    let x = Math.cos(a)*radius + 50;
    let y = Math.sin(a)*radius + 50;
    return `${x}% ${y}%`
  })

  console.log(`clip-path: polygon(100% 50%, 100% 100%, 0 100%, 0 0, 100% 0, 100% 50%, ${c.join(',')})`);

CSS color scheme auto

css CSS
View 
/* only use default color */
:root {
  color-scheme: normal;
}

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
  }
}

color-scheme select and save

html CSS
View 
<!-- only use default color -->
<style>
  :root {
    color-scheme: normal;
  }

  @media (prefers-color-scheme: light) {
    :root {
      color-scheme: light;
    }
  }

  @media (prefers-color-scheme: dark) {
    :root {
      color-scheme: dark;
    }
  }
</style>
<script>
  window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", event => {
    const newColorScheme = event.matches ? "dark" : "light";
    if (!localStorage.colorScheme || localStorage.colorScheme == "auto") {
      document.querySelector(":root").style.setProperty("color-scheme", newColorScheme);
    }
  });

  function initColorSchemeSelect(colorSchemeSelect) {
    if (!localStorage.colorScheme || localStorage.colorScheme == "auto") {
      colorSchemeSelect.value = "auto";
    } else if (localStorage.colorScheme == "dark" || localStorage.colorScheme == "light") {
      colorSchemeSelect.value = localStorage.colorScheme
    } else {
      colorSchemeSelect.value = "auto";
    }
    colorSchemeSelect.addEventListener("change", event => {
      switch (event.target.value) {
        case "auto":
          if (window.matchMedia) {
            if(window.matchMedia("(prefers-color-scheme: dark)").matches) {
              document.querySelector(":root").style.setProperty("color-scheme", "dark");
            } else {
              document.querySelector(":root").style.setProperty("color-scheme", "light");
            }
          } else {
            document.querySelector(":root").style.setProperty("color-scheme", "normal");
          }
          localStorage.removeItem("colorScheme")
          break;
        default:
          document.querySelector(":root").style.setProperty("color-scheme", event.target.value);
          localStorage.colorScheme = event.target.value;
          return;
      }
    });
  }
</script>

color-scheme toggle

js CSS
View 
function toggleColorScheme() {
  let cs = getComputedStyle(document.querySelector(":root")).getPropertyValue("color-scheme")
  switch (cs) {
    case "light": // light => dark
      document.querySelector(":root").style.setProperty("color-scheme", "dark");
      break;
    case "dark": // dark => light
      document.querySelector(":root").style.setProperty("color-scheme", "light");
      break;
    default: // normal or other
      if (window.matchMedia) {
        if(window.matchMedia("(prefers-color-scheme: dark)").matches) { // normal (probably light) => dark
          document.querySelector(":root").style.setProperty("color-scheme", "dark");
        } else { // light => dark
          document.querySelector(":root").style.setProperty("color-scheme", "dark");
        }
      } else { // default (probably light) => dark
        document.querySelector(":root").style.setProperty("color-scheme", "dark");
      }
  }
}