cheatsheet

code snippets

decay shift animation

                @keyframes decayShift {
  0%   { filter: grayscale(100%) brightness(0.8); transform: rotate(0deg); }
  50%  { filter: grayscale(30%) brightness(0.7) sepia(37%) hue-rotate(75deg); transform: rotate(-3deg); }
  100% { filter: grayscale(100%) brightness(0.8); transform: rotate(0deg); }
                
                /* add this line of code to where you want the animation to be */
                animation: decayShift 8s ease-in-out infinite;
                
                /* you can change the speed by changing the 8s to whatever you want it to be! */

scrollbars

                *::-webkit-scrollbar {
    width: 8px;
  }

  *::-webkit-scrollbar-track {
    background: #8f8f8f;
  }

  *::-webkit-scrollbar-thumb {
    background-color: #6b6b6b;
    border-radius: 10px;
  }

image filters

                mix-blend-mode: difference;
                filter: saturate(55%);
                filter: invert(100%);
                /* tip: make your images with just black and white to have some parts of it showing and some not. this also works good when using invert filter */

html skeleton

                <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page Title</title>
</head>
<body>

<!-- Content goes here -->

</body>
</html>

custom font css

                @font-face {
  font-family: 'fontname';
  src: url(PATH HERE);
}