CSS - web development

Change Scrollbar

selector::-webkit-scrollbar {
    width: 6px;
}
selector::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}
selector::-webkit-scrollbar-thumb {
    background: #888;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}
selector::-webkit-scrollbar-thumb:hover {
    background: #555;
}
        

Move scrollbar to left side

parent_selector {
    direction: rtl;
}

parent_selector child_selector {
    direction: ltr;
    padding-left: 20px; # obvi optional
}
        

Add Arrow to before/after element

selector::after {
    content: "";
    display: inline-block !important;
    position: absolute; /* or relative; */
    border-left: 8px solid #C8A962;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
}
        

Add image to before/after element

selector::before {
    content: url('{{ site.baseurl }}/assets/img/img.png');
    position: relative;
    left: -10px;
    top: 0px;
}
        

Make button flash

# Best used with dark mode; light mode might need more shadow (20 -> 40px?)

.btn {
    -webkit-animation: button_flash 1500ms infinite;
    -moz-animation: button_flash 1500ms infinite;
    -o-animation: button_flash 1500ms infinite;
    animation: button_flash 1500ms infinite;
    animation-timing-function: ease-in-out;
}

@-webkit-keyframes button_flash {
    0% { background-color: #9147ff; -webkit-box-shadow: 0 0 3px #9147ff; }
    50% { background-color: #9147ff; -webkit-box-shadow: 0 0 20px -5px #9147ff; }
    100% { background-color: #9147ff; -webkit-box-shadow: 0 0 3px #9147ff; }
  }
  @-moz-keyframes button_flash {
    0% { background-color: #9147ff; -moz-box-shadow: 0 0 3px #9147ff; }
    50% { background-color: #9147ff; -moz-box-shadow: 0 0 20px -5px #9147ff; }
    100% { background-color: #9147ff; -moz-box-shadow: 0 0 3px #9147ff; }
  }
  @-o-keyframes button_flash {
    0% { background-color: #9147ff; box-shadow: 0 0 3px #9147ff; }
    50% { background-color: #9147ff; box-shadow: 0 0 20px -5px #9147ff; }
    100% { background-color: #9147ff; box-shadow: 0 0 3px #9147ff; }
  }
  @keyframes button_flash {
    0% { background-color: #9147ff; box-shadow: 0 0 3px #9147ff; }
    50% { background-color: #9147ff; box-shadow: 0 0 20px -5px #9147ff; }
    100% { background-color: #9147ff; box-shadow: 0 0 3px #9147ff; }
  }
}