[CSS Snippets] Useful CSS snippets #CSS

custom-scrollbar.css

::-webkit-scrollbar {
    height: 2.2em;
    width: .6em;
}

::-webkit-scrollbar-track {
    background: hsl(218, 22%, 14%);
}

::-webkit-scrollbar-thumb {
    border-radius: 0em;
    background: hsl(207, 31%, 94%);
    cursor: pointer;
}

custom-view-transition-animation.css

::view-transition-group(root) {
    --t1: 300ms;
    --t2: 1000ms;
    --t3: 500ms;
}
        
::view-transition-old(root) {
    animation: var(--t1) cubic-bezier(0.4, 0, 1, 1) both fade-out,
    var(--t2) cubic-bezier(0.4, 0, 0.2, 1) both flip-left;
}
        
::view-transition-new(root) {
    animation: var(--t3) cubic-bezier(0, 0, 0.2, 1) var(--t1) both fade-in,
    var(--t2) cubic-bezier(0.4, 0, 0.2, 1) both flip-right;
}

@keyframes fade-in {
    from { opacity: 0; }
}

@keyframes fade-out {
    to { opacity: 0; }
}

@keyframes flip-right {
    from { transform: rotateY(90deg); }
}

@keyframes flip-left {
    to { transform: rotateY(1turn); }
}

hide-scrollbar.css

.hide-scrollbar {
            scrollbar-width: none;
        }

        .hide-scrollbar::-webkit-scrollbar {
            display: none;
        }

reset.css

/*
  Josh's Custom CSS Reset
  https://www.joshwcomeau.com/css/custom-css-reset/
*/
*, *::before, *::after {
  box-sizing: border-box;
}
* {
  margin: 0;
}
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}
input, button, textarea, select {
  font: inherit;
}
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}
#root, #__next {
  isolation: isolate;
}