loveberry ♡ a berry small site

The Resources

Boxes and Borders
Text Effects
Snippets

Boxes and borders

View Code

CSS:

.bg, .inner { box-sizing: border-box;}
    
.bg {
    /* for plain background */
    background: #FE82B624;
        
    /* vv for image background. remove if want plain */
    background-image:url(https://i.imgur.com/Wy0Pm6R.jpg);
    background-size:cover;
       
    padding:12px; /* make number bigger/smaller for a bigger/smaller border */
    width:100%;
    border:1px solid black;
}
        
.inner {
    background: #FFF;
    color: #000;
    padding:5px;
    border:1px solid black;
    height:200px; /* set height to "height:fit-content;" to expand with text size */
    overflow-y:auto; /* remove overflow if you don't want a scroll */
}

HTML:

<div class="bg"><div class="inner">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fringilla urna vitae massa egestas tincidunt. Nunc vel felis velit. Aliquam varius mauris vel elit consectetur, ut varius nisi dapibus. Etiam at nibh eu nulla fermentum tristique. Mauris ultricies nisi quis odio molestie tempor. Duis a dolor risus. Pellentesque sed quam vel dolor euismod bibendum quis sed augue. Vivamus urna tellus, iaculis a luctus a, dapibus quis nisl. In eget enim ultricies, accumsan tortor vitae, facilisis libero. Donec massa leo, porta sit amet nisl nec, semper ullamcorper elit. Aenean luctus vel purus ut scelerisque. Suspendisse commodo luctus tortor. Fusce mi mi, varius in iaculis non, eleifend et nunc. Phasellus facilisis nibh sodales felis ultrices, sit amet consequat tortor dapibus. Curabitur quis nulla sed est efficitur malesuada. Aliquam facilisis ultricies felis, fermentum consectetur leo mattis sit amet.
</div></div>

A Window With Stuff In It

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fringilla urna vitae massa egestas tincidunt. Nunc vel felis velit. Aliquam varius mauris vel elit consectetur, ut varius nisi dapibus. Etiam at nibh eu nulla fermentum tristique. Mauris ultricies nisi quis odio molestie tempor. Duis a dolor risus. Pellentesque sed quam vel dolor euismod bibendum quis sed augue. Vivamus urna tellus, iaculis a luctus a, dapibus quis nisl. In eget enim ultricies, accumsan tortor vitae, facilisis libero. Donec massa leo, porta sit amet nisl nec, semper ullamcorper elit. Aenean luctus vel purus ut scelerisque. Suspendisse commodo luctus tortor. Fusce mi mi, varius in iaculis non, eleifend et nunc. Phasellus facilisis nibh sodales felis ultrices, sit amet consequat tortor dapibus. Curabitur quis nulla sed est efficitur malesuada. Aliquam facilisis ultricies felis, fermentum consectetur leo mattis sit amet.

Duis pharetra malesuada fermentum. Donec pellentesque metus id lectus imperdiet tristique. In semper, velit et porta vulputate, ex neque aliquam lacus, nec lacinia magna est sit amet est. Vestibulum sit amet lacinia nisl. Aliquam erat volutpat. Integer pulvinar lectus id turpis pretium, non convallis urna pharetra. Nulla pulvinar quam non risus lobortis, non faucibus orci elementum. Nullam sed justo mi. Cras posuere, velit sed tincidunt placerat, justo ex gravida sem, ut viverra mi tellus sed erat. Proin sollicitudin felis dolor. Phasellus et arcu molestie, blandit diam scelerisque, fermentum elit. Sed et lectus non est dignissim gravida ut sed mauris.

Phasellus sit amet lacus nulla. Quisque scelerisque lacus vel quam dapibus, scelerisque faucibus nisl auctor. Donec gravida molestie nisl, et aliquam est suscipit id. Maecenas a porta magna. Nulla at condimentum lacus. Vivamus ultricies sem vel dolor imperdiet porttitor. Suspendisse orci odio, molestie in augue sed, bibendum interdum urna. Mauris maximus nisi et sapien pharetra, sed consequat enim convallis. Aenean dictum ligula at auctor laoreet. Donec elementum dui vitae tortor venenatis, sed pretium eros semper. Morbi semper malesuada ipsum sit amet tincidunt. Donec iaculis iaculis pretium.

View Code

CSS:

/*A vast majority of this styling comes from 98.css code, if you're making a full windows 98 theme, I suggest you use the stylesheet this is sourced from - https://jdan.github.io/98.css/ */

.title-bar-controls button {
        border:none;
        border-radius:0;
        box-sizing:border-box;
        color:transparent;
        min-height:23px;
        min-width:75px;
        padding:0 12px;
        text-shadow:0 0 #222;
    }

.title-bar-controls button {
    background:silver;
    box-shadow:inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf;
}
        
.title-bar-controls button:not(:disabled):active {
    box-shadow:inset -1px -1px #fff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px grey;
    text-shadow:1px 1px #222;
}
        
@media (not(hover)){
    button:not(:disabled):hover {
    box-shadow:inset -1px -1px #fff,inset 1px 1px #0a0a0a,inset -2px -2px #dfdfdf,inset 2px 2px grey}
}
        
.title-bar-controls button:focus {
    outline:1px dotted #000;
    outline-offset:-4px;
}

.title-bar-controls button::-moz-focus-inner { border:0 }
                
@font-face {
    font-family: "Pixelated MS Sans Serif";
    src: url("https://files.catbox.moe/1za99g.woff") format("woff");
    src: url("https://files.catbox.moe/8fwbkl.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
}   

.window, .title-bar {
    font-family: "Pixelated MS Sans Serif", Arial;
    -webkit-font-smoothing: none;
    font-size: 11px;
}
        
.window {
    box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px #808080, inset 2px 2px #ffffff;
    background: #c0c0c0;
    color:#000;
    padding: 3px;
    width:100%;
}
        
.title-bar {
    background:linear-gradient(90deg, purple, orchid, pink);
    padding: 3px 2px 3px 3px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
        
.title-bar-text {
    font-weight: bold;
    color: white;
    letter-spacing: 0;
    margin-right: 24px;
}
        
.title-bar-controls {
    display: flex;
}
        
.title-bar-controls button {
    padding: 0;
    display: block;
    min-width: 16px;
    min-height: 14px;
}
        
.title-bar-controls button:active {
    padding: 0;
}
        
.title-bar-controls button:focus {
    outline: none;
}
        
.title-bar-controls button[aria-label=Minimize]{
    background-image:url("https://raw.githubusercontent.com/jdan/98.css/main/icon/minimize.svg");
    background-position:bottom 3px left 4px;
    background-repeat:no-repeat
}
        
.title-bar-controls button[aria-label=Maximize]{
    background-image:url("https://raw.githubusercontent.com/jdan/98.css/4a2282dd9170cabf730fb5803d1153d86b2e94e3/icon/maximize.svg");
    background-position:top 2px left 3px;
    background-repeat:no-repeat;
}

.title-bar-controls button[aria-label=Close]{
    background-image:url("https://raw.githubusercontent.com/jdan/98.css/main/icon/close.svg");
    background-position:top 3px left 4px;
    background-repeat:no-repeat;
    margin-left:2px;
}

.window-body {
    margin: 8px;
}
        
        /* literally only part ive custom coded so it scrolls . i also like the effect the fieldset adds */
.fieldset {
    border:1px gray solid;
    box-shadow: white 1px 1px 0px inset, white 1px 1px 0px, white 0px 1px 0px, white 1px 0px 0px;
    margin:0;
    padding:10px;
    overflow-y:auto; 
    height: 190px;
}

HTML:

<div class="window">
        <div class="title-bar">
          <div class="title-bar-text">A Window With Stuff In It</div>
          <div class="title-bar-controls">
            <button aria-label="Minimize"></button>
            <button aria-label="Maximize"></button>
            <button aria-label="Close"></button>
          </div>
        </div>
        <div class="window-body">
          <div class="fieldset">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fringilla urna vitae massa egestas tincidunt. Nunc vel felis velit. Aliquam varius mauris vel elit consectetur, ut varius nisi dapibus. Etiam at nibh eu nulla fermentum tristique. Mauris ultricies nisi quis odio molestie tempor. Duis a dolor risus. Pellentesque sed quam vel dolor euismod bibendum quis sed augue. Vivamus urna tellus, iaculis a luctus a, dapibus quis nisl. In eget enim ultricies, accumsan tortor vitae, facilisis libero. Donec massa leo, porta sit amet nisl nec, semper ullamcorper elit. Aenean luctus vel purus ut scelerisque. Suspendisse commodo luctus tortor. Fusce mi mi, varius in iaculis non, eleifend et nunc. Phasellus facilisis nibh sodales felis ultrices, sit amet consequat tortor dapibus. Curabitur quis nulla sed est efficitur malesuada. Aliquam facilisis ultricies felis, fermentum consectetur leo mattis sit amet.<br><br>
      
      Duis pharetra malesuada fermentum. Donec pellentesque metus id lectus imperdiet tristique. In semper, velit et porta vulputate, ex neque aliquam lacus, nec lacinia magna est sit amet est. Vestibulum sit amet lacinia nisl. Aliquam erat volutpat. Integer pulvinar lectus id turpis pretium, non convallis urna pharetra. Nulla pulvinar quam non risus lobortis, non faucibus orci elementum. Nullam sed justo mi. Cras posuere, velit sed tincidunt placerat, justo ex gravida sem, ut viverra mi tellus sed erat. Proin sollicitudin felis dolor. Phasellus et arcu molestie, blandit diam scelerisque, fermentum elit. Sed et lectus non est dignissim gravida ut sed mauris.<br><br>
      
      Phasellus sit amet lacus nulla. Quisque scelerisque lacus vel quam dapibus, scelerisque faucibus nisl auctor. Donec gravida molestie nisl, et aliquam est suscipit id. Maecenas a porta magna. Nulla at condimentum lacus. Vivamus ultricies sem vel dolor imperdiet porttitor. Suspendisse orci odio, molestie in augue sed, bibendum interdum urna. Mauris maximus nisi et sapien pharetra, sed consequat enim convallis. Aenean dictum ligula at auctor laoreet. Donec elementum dui vitae tortor venenatis, sed pretium eros semper. Morbi semper malesuada ipsum sit amet tincidunt. Donec iaculis iaculis pretium.
      </div>
        </div>
      </div>

View Code

CSS:

.popbox {
    box-shadow: inset 13px 0px 6px -10px rgb(66 66 66 / 56%), inset -13px 0px 6px -10px rgb(66 66 66 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(66 66 66 / 38%);
    filter: drop-shadow(0px 0px 1px #424242);
    -webkit-filter: drop-shadow(0px 0px 1px #424242);
    background:white;
    color:black;
    width:calc(100% - 20px);
    height:fit-content;
    max-height:190px;
    overflow-y:auto;
    border-radius:10px;
    padding:8px 10px 10px 10px;
    box-sizing:border box;
    margin:0 auto;
}

HTML:

<div class="popbox">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fringilla urna vitae massa egestas tincidunt. Nunc vel felis velit. Aliquam varius mauris vel elit consectetur, ut varius nisi dapibus. Etiam at nibh eu nulla fermentum tristique. Mauris ultricies nisi quis odio molestie tempor. Duis a dolor risus. Pellentesque sed quam vel dolor euismod bibendum quis sed augue. Vivamus urna tellus, iaculis a luctus a, dapibus quis nisl. In eget enim ultricies, accumsan tortor vitae, facilisis libero. Donec massa leo, porta sit amet nisl nec, semper ullamcorper elit. Aenean luctus vel purus ut scelerisque. Suspendisse commodo luctus tortor. Fusce mi mi, varius in iaculis non, eleifend et nunc. Phasellus facilisis nibh sodales felis ultrices, sit amet consequat tortor dapibus. Curabitur quis nulla sed est efficitur malesuada. Aliquam facilisis ultricies felis, fermentum consectetur leo mattis sit amet.
</div>

View Code

CSS:

.whitecloudybox {
    height: 140px;
    width: 100%;
    border: 10px solid transparent;
    box-sizing: border-box;
    border-image: url(https://i.postimg.cc/QM9dMFhq/cloud.png) 50 round;
}

.whitecloudyfull { 
    width:100%;
    height:100%;
    overflow-y:auto;
    background:#fff;
    color:black;
}

HTML:

<div class="whitecloudybox"><div class="whitecloudyfull">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fringilla urna vitae massa egestas tincidunt. Nunc vel felis velit. Aliquam varius mauris vel elit consectetur, ut varius nisi dapibus. Etiam at nibh eu nulla fermentum tristique. Mauris ultricies nisi quis odio molestie tempor. Duis a dolor risus. Pellentesque sed quam vel dolor euismod bibendum quis sed augue. Vivamus urna tellus, iaculis a luctus a, dapibus quis nisl. In eget enim ultricies, accumsan tortor vitae, facilisis libero. Donec massa leo, porta sit amet nisl nec, semper ullamcorper elit. Aenean luctus vel purus ut scelerisque. Suspendisse commodo luctus tortor. Fusce mi mi, varius in iaculis non, eleifend et nunc. Phasellus facilisis nibh sodales felis ultrices, sit amet consequat tortor dapibus. Curabitur quis nulla sed est efficitur malesuada. Aliquam facilisis ultricies felis, fermentum consectetur leo mattis sit amet.
    </div></div>

no scroll for this one

View Code

CSS:

.circlehold {
    width:100%;
    height:155px;
}
    
.circletext {
    text-align:center;
    display: flex;
    justify-content: center;
    align-items: center;
    color:black;
    padding:2px;
    position:relative;
    bottom:150px;
    width:300px;
    height:140px;
    margin:0 auto;
    z-index:2;
    text-shadow: rgb(255, 255, 255) 2px 0px 0px, rgb(255, 255, 255) 1.75517px 0.958851px 0px, rgb(255, 255, 255) 1.0806px 1.68294px 0px, rgb(255, 255, 255) 0.141474px 1.99499px 0px, rgb(255, 255, 255) -0.832294px 1.81859px 0px, rgb(255, 255, 255) -1.60229px 1.19694px 0px, rgb(255, 255, 255) -1.97999px 0.28224px 0px, rgb(255, 255, 255) -1.87291px -0.701566px 0px, rgb(255, 255, 255) -1.30729px -1.51361px 0px, rgb(255, 255, 255) -0.421592px -1.95506px 0px, rgb(255, 255, 255) 0.567324px -1.91785px 0px, rgb(255, 255, 255) 1.41734px -1.41108px 0px, rgb(255, 255, 255) 1.92034px -0.558831px 0px;
    font-weight:bold;
}
    
.circle { 
    margin:0 auto;
    background:#FFC0CB;
    opacity:50%; /* feel free to remove this line if needed */
    position:relative;
    top:2px;
    width:300px;
    height:150px;
    transform: rotate(-10deg);
    border-radius:100%;
}

HTML:

<div class="circlehold">
        <div class="circle"></div>
        <div class="circletext"> no scroll for this one </div>
</div>

View Code

CSS:

.glowpad { margin: 0 auto; padding:10px; width:100%; box-sizing:border-box; }

.glow {
  margin: 0 auto;
  width:100%;
  height:150px;
  border:3px solid pink;
  background:pink;
  border-radius:10px;
  box-shadow: 0px 0px 10px pink, 0px 0px 10px pink, 0px 0px 10px pink, 0px 0px 10px pink, 0px 0px 14px pink;
  color:black;
  overflow-y:auto;
}

HTML:

<div class="glowpad"><div class="glow">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fringilla urna vitae massa egestas tincidunt. Nunc vel felis velit. Aliquam varius mauris vel elit consectetur, ut varius nisi dapibus. Etiam at nibh eu nulla fermentum tristique. Mauris ultricies nisi quis odio molestie tempor. Duis a dolor risus. Pellentesque sed quam vel dolor euismod bibendum quis sed augue. Vivamus urna tellus, iaculis a luctus a, dapibus quis nisl. In eget enim ultricies, accumsan tortor vitae, facilisis libero. Donec massa leo, porta sit amet nisl nec, semper ullamcorper elit. Aenean luctus vel purus ut scelerisque. Suspendisse commodo luctus tortor. Fusce mi mi, varius in iaculis non, eleifend et nunc. Phasellus facilisis nibh sodales felis ultrices, sit amet consequat tortor dapibus. Curabitur quis nulla sed est efficitur malesuada. Aliquam facilisis ultricies felis, fermentum consectetur leo mattis sit amet.


</div></div>

View Code

CSS:

.brackets {
    border: 3px hotpink solid;
    border-width: 0 3px 0 3px;
    border-radius:10px;
    padding: 0px 4px 0px 4px;
    width:100%; /* change number if needed */
    height:100px; /* change number if needed */
    overflow-y:auto;
    }

HTML:

<div class="brackets">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fringilla urna vitae massa egestas tincidunt. Nunc vel felis velit. Aliquam varius mauris vel elit consectetur, ut varius nisi dapibus. Etiam at nibh eu nulla fermentum tristique. Mauris ultricies nisi quis odio molestie tempor. Duis a dolor risus. Pellentesque sed quam vel dolor euismod bibendum quis sed augue. Vivamus urna tellus, iaculis a luctus a, dapibus quis nisl. In eget enim ultricies, accumsan tortor vitae, facilisis libero. Donec massa leo, porta sit amet nisl nec, semper ullamcorper elit. Aenean luctus vel purus ut scelerisque. Suspendisse commodo luctus tortor. Fusce mi mi, varius in iaculis non, eleifend et nunc. Phasellus facilisis nibh sodales felis ultrices, sit amet consequat tortor dapibus. Curabitur quis nulla sed est efficitur malesuada. Aliquam facilisis ultricies felis, fermentum consectetur leo mattis sit amet.
</div>

View Code

CSS:

/* scrolling version*/
      .lacescr {
      border-width:7px;
      border-style:solid;
      border-image: url("https://i.imgur.com/NJa4bp2.png") 8 fill round;
      width:100%;
      height:100px;
      overflow-y:auto;
      }

HTML:

<div class="lacescr">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fringilla urna vitae massa egestas tincidunt. Nunc vel felis velit. Aliquam varius mauris vel elit consectetur, ut varius nisi dapibus. Etiam at nibh eu nulla fermentum tristique. Mauris ultricies nisi quis odio molestie tempor. Duis a dolor risus. Pellentesque sed quam vel dolor euismod bibendum quis sed augue. Vivamus urna tellus, iaculis a luctus a, dapibus quis nisl. In eget enim ultricies, accumsan tortor vitae, facilisis libero. Donec massa leo, porta sit amet nisl nec, semper ullamcorper elit. Aenean luctus vel purus ut scelerisque. Suspendisse commodo luctus tortor. Fusce mi mi, varius in iaculis non, eleifend et nunc. Phasellus facilisis nibh sodales felis ultrices, sit amet consequat tortor dapibus. Curabitur quis nulla sed est efficitur malesuada. Aliquam facilisis ultricies felis, fermentum consectetur leo mattis sit amet.
</div>

View Code

CSS:

.pinkcloudybox {
  height: 139px;
  width: 100%;
  border: 10px solid transparent;
  box-sizing: border-box;
  border-image: url(https://i.postimg.cc/GmzyDT0w/BAM.png) 50 round;
}

.pinkcloudyfull {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  background: #feb6dc;
  color: black;
}

HTML:

<div class="pinkcloudybox"><div class="pinkcloudyfull">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fringilla urna vitae massa egestas tincidunt. Nunc vel felis velit. Aliquam varius mauris vel elit consectetur, ut varius nisi dapibus. Etiam at nibh eu nulla fermentum tristique. Mauris ultricies nisi quis odio molestie tempor. Duis a dolor risus. Pellentesque sed quam vel dolor euismod bibendum quis sed augue. Vivamus urna tellus, iaculis a luctus a, dapibus quis nisl. In eget enim ultricies, accumsan tortor vitae, facilisis libero. Donec massa leo, porta sit amet nisl nec, semper ullamcorper elit. Aenean luctus vel purus ut scelerisque. Suspendisse commodo luctus tortor. Fusce mi mi, varius in iaculis non, eleifend et nunc. Phasellus facilisis nibh sodales felis ultrices, sit amet consequat tortor dapibus. Curabitur quis nulla sed est efficitur malesuada. Aliquam facilisis ultricies felis, fermentum consectetur leo mattis sit amet.
  </div></div>

Text Effects

tumblr wobble

View Code

CSS:

.tumblrwob {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  white-space:pre;
  font-size: 2em;
  font-family: Arial;
}

.wobble:nth-child(4n+1) {
  -webkit-animation:tumblrwobble 4s ease-in-out -.5s infinite;
  animation:tumblrwobble 4s ease-in-out -.5s infinite
}

@keyframes tumblrwobble{
  0%  { transform:translateY(5%) skew(3deg) }
  25% { transform:translateY(-5%) }
  50% { transform:translateY(5%) skew(-3deg) }
  75% { transform:translateY(-5%) }
  to { transform:translateY(5%) skew(3deg) }
}

@-webkit-keyframes tumblrwobble{
  0%  { transform:translateY(5%) skew(3deg) }
  25% { transform:translateY(-5%) }
  50% { transform:translateY(5%) skew(-3deg) }
  75% { transform:translateY(-5%) }
  to { transform:translateY(5%) skew(3deg) }
}

.wobble:nth-child(4n+2){
  -webkit-animation:tumblrwobble 4s ease-in-out -1s infinite;
  animation:tumblrwobble 4s ease-in-out -1s infinite;
}

.wobble:nth-child(4n+3){
  -webkit-animation:tumblrwobble 4s ease-in-out -1.5s infinite;
  animation:tumblrwobble 4s ease-in-out -1.5s infinite;
}

.wobble:nth-child(4n){
  -webkit-animation:tumblrwobble 4s ease-in-out 0s infinite;
  animation:tumblrwobble 4s ease-in-out 0s infinite;
}

HTML:

<div class="tumblrwob"><span class="wobble">t</span><span class="wobble">u</span><span class="wobble">m</span><span class="wobble">b</span><span class="wobble">l</span><span class="wobble">r</span><span class="wobble"> </span><span class="wobble">w</span><span class="wobble">o</span><span class="wobble">b</span><span class="wobble">b</span><span class="wobble">l</span><span class="wobble">e</span></div>

text stroke

View Code

CSS:

.tsb {
  font-family:arial;
  font-size:2em;
  color:white;
  filter: drop-shadow(0px 1px black) drop-shadow(0 -1px black) drop-shadow(1px 0 black) drop-shadow(-1px 0 black);
}

HTML:

<div class="tsb">
  text stroke
</div>

princess

View Code

CSS:

.prinzessin mark { 
  font-family: arial;
  font-size:2em;
  font-weight:bold;
  background: none;
  color:black;
  animation: princess 2s infinite;
  animation-timing-function: cubic-bezier(0.25, 0.85, 0.4, 1);
}
         
  .prinzessin mark:nth-child(1) { animation-delay:0s; display:inline-block;}
  .prinzessin mark:nth-child(2) { animation-delay:0.2s; display:inline-block;}
  .prinzessin mark:nth-child(3) { animation-delay:0.4s; display:inline-block; }
  .prinzessin mark:nth-child(4) { animation-delay:0.6s; display:inline-block;}
  .prinzessin mark:nth-child(5) { animation-delay:0.8s; display:inline-block;}
  .prinzessin mark:nth-child(6) { animation-delay:1s; display:inline-block;}
  .prinzessin mark:nth-child(7) { animation-delay:1.2s; display:inline-block;}
  .prinzessin mark:nth-child(8) { animation-delay:1.4s; display:inline-block;}
  .prinzessin mark:nth-child(9) { animation-delay:1.6s; display:inline-block;}
  .prinzessin mark:nth-child(10) { animation-delay:1.8s; display:inline-block;}
         
@-webkit-keyframes princess {
  from { transform:scale(0.90); color:black; }
  50% { transform:scale(1); color:hotpink; }
  to { transform:scale(0.90); color:black; }
}
        
@keyframes princess {
  from { transform:scale(0.90); color:black; }
  50% { transform:scale(1); color:hotpink; }
  to { transform:scale(0.90); color:black; }
}

HTML:

<div class="prinzessin"><mark>p</mark><mark>r</mark><mark>i</mark><mark>n</mark><mark>c</mark><mark>e</mark><mark>s</mark><mark>s</mark></div>

two outlines

View Code

CSS:

.twooutline {
  color: white;
  font-size: 2em;
  font-family:arial;
  font-weight:bold;
  filter: drop-shadow(0px 1px black) drop-shadow(0 -1px black) drop-shadow(1px 0 black) drop-shadow(-1px 0 black) drop-shadow(0px 1px hotpink) drop-shadow(0 -1px hotpink) drop-shadow(1px 0 hotpink) drop-shadow(-1px 0 hotpink);
}

HTML:

<div class="twooutline">
  two outlines
</div>

gradient mask

View Code

CSS:

.gradmask {
  background: linear-gradient(pink 50%, hotpink);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 2em;
  font-weight:bold;
  filter: drop-shadow(0px 1px black) drop-shadow(0 -1px black) drop-shadow(1px 0 black) drop-shadow(-1px 0 black);
}

HTML:

<div class="gradmask">
  gradient mask
</div>

glowing

View Code

CSS:

.glowtext {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #000;
  -webkit-animation: glow 2.0s linear infinite;
  animation: glow 2.0s linear infinite;
  font-size:2em;
  font-weight:bold;
}

@keyframes glow {
  0% { text-shadow: 0 0 15px pink; }
  50% { text-shadow: none; }
  100% { text-shadow: 0 0 15px pink; }
}

@-webkit-keyframes glow {
  0% { text-shadow: 0 0 15px pink; }
  50% { text-shadow: none; }
  100% { text-shadow: 0 0 15px pink; }
}

HTML:

<div class="glowtext">
    glowing
</div>

tilting

View Code

CSS:

.tilty {
  text-align: center;
  font-size:2em;
  animation: tilt 1s infinite alternate;
}

@keyframes tilt {
  from { transform: rotate(5deg); }
  to { transform: rotate(-5deg); }
}

@-webkit-keyframes tilt {
  from { transform: rotate(5deg); }
  to { transform: rotate(-5deg); }
}

HTML:

<div class="tilty">
    tilting
</div>

rise on hover

View Code

CSS:

.rise {
  width:fit-content;
  transition: .2s ease; 
  font-size:2em;
}

.rise:hover {
  transform: translateY(-20%);
}

HTML:

<div class="rise">
    rise on hover
</div>

colour change on hover

View Code

CSS:

.colchange {
  width:fit-content;
  transition: .2s ease; 
  color:black;
  font-size:2em;
}

.colchange:hover {
  color:hotpink;
}

HTML:

<div class="colchange">
    colour change on hover
</div>

css bubble

View Code

CSS:

.bubbler {
  font-size:2em;
  font-family:arial;
}
  
.bubbler mark { 
  animation: bubble 2s infinite;
  animation-timing-function: ease-in-out;
  background: none;
  color:black;
}
   
.bubbler mark:nth-child(1) { animation-delay:0s; display:inline-block;}
.bubbler mark:nth-child(2) { animation-delay:0.8s; display:inline-block;}
.bubbler mark:nth-child(3) { animation-delay:1.6s; display:inline-block; }
.bubbler mark:nth-child(4) { animation-delay:2.4s; display:inline-block;}
.bubbler mark:nth-child(5) { animation-delay:3.2s; display:inline-block;}
.bubbler mark:nth-child(6) { animation-delay:4s; display:inline-block;}
.bubbler mark:nth-child(7) { animation-delay:4.8s; display:inline-block;}
.bubbler mark:nth-child(8) { animation-delay:5.6s; display:inline-block;}
.bubbler mark:nth-child(9) { animation-delay:6.4s; display:inline-block;}
.bubbler mark:nth-child(10) { animation-delay:7.2s; display:inline-block;}
.bubbler mark:nth-child(11) { animation-delay:8s; display:inline-block;}
.bubbler mark:nth-child(12) { animation-delay:8.8s; display:inline-block;}
.bubbler mark:nth-child(13) { animation-delay:9.6s; display:inline-block;}
.bubbler mark:nth-child(14) { animation-delay:10.4s; display:inline-block;}
.bubbler mark:nth-child(15) { animation-delay:11.2s; display:inline-block;}
.bubbler mark:nth-child(16) { animation-delay:12s; display:inline-block;}

/* if you need more characters than 16 do this:
    - copy the line above
    - change the nth-child 16 to 17
    - add 0.8 to the animation delay number */
   
@keyframes bubble {
  from { color:black; }
  50% { color:hotpink; }
  to { color:black; }
}
   
@-webkit-keyframes bubble {
  from { color:black; }
  50% { color:hotpink; }
  to { color:black; }
}

HTML:

<div class="bubbler">
  <mark>l</mark><mark>a</mark><mark>y</mark><mark>e</mark><mark>r</mark><mark>c</mark><mark>a</mark><mark>k</mark><mark>e</mark>
</div>

WAVE

how to change wave colour

View Code

CSS:

.pinkwave {
  font-size: 2em;
  font-weight: bold;
  font-family: arial;
  
  color: transparent;
  background: url("https://files.catbox.moe/db8ne8.png") repeat-x #fff;
  background-clip: border-box;
  background-size: 200% 100%;
  
  background-clip: text;
  -webkit-background-clip: text;
  transition: background-position-y 0.6s ease;
  -webkit-transition: background-position-y 0.6s ease;
  animation: waveAnimation 4s infinite linear;
  -webkit-animation: waveAnimation 4s infinite linear;
  
  -webkit-animation-play-state: running;
  animation-play-state: running;
  
  /* below just adds the outlines */
  filter: drop-shadow(1px 1px white) drop-shadow(-1px 1px white) drop-shadow(1px -1px white) drop-shadow(-1px -1px white)
  drop-shadow(1px 1px black) drop-shadow(-1px 1px black) drop-shadow(1px -1px black) drop-shadow(-1px -1px black);
}

@-webkit-keyframes waveAnimation{
  from { background-position-x: 0%; }
  to { background-position-x: 200%; }
}

@keyframes waveAnimation{
  from { background-position-x: 0%; }
  to { background-position-x: 200%; }
}

HTML:

<div class="pinkwave">
  wave
</div>

gradient outline

View Code

CSS:

.gradoutline {
  background: -webkit-linear-gradient(pink, hotpink);
  -webkit-background-clip: text;
  -webkit-text-stroke: 4px transparent;
  color: black;
  font-size: 2em;
  font-family:arial;
}

HTML:

<div class="gradoutline">
    gradient outline
</div>

image mask

View Code

CSS:

.imagemask {
  background-image: url("https://64.media.tumblr.com/53c150a227ddcde4594fe65c54c009d7/fd75870c69147eae-67/s540x810/27604414e7ec6f144196ae64cc196b75aec6cc8f.gif");
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 2em;
  font-weight:bold;
  width:fit-content;
  margin:0 auto; /* this is to center, if needed */
  /* add below if you want an outline, if not remove */
  filter: drop-shadow(0px 1px black) drop-shadow(0 -1px black) drop-shadow(1px 0 black) drop-shadow(-1px 0 black);
}

HTML:

<div class="imagemask">
    image mask
</div>

floating

View Code

CSS:

.float {
  font-size:2em;
  color: #000;
  animation-name: floating;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

@keyframes floating {
  0% { transform: translate(0, 0px); }
  50% { transform: translate(0, 15px); }
  100% { transform: translate(0, -0px); }
}

HTML:

<div class="float">
    floating
</div>

popping

View Code

CSS:

.pop {
 font-size:2em;
 color: #000;
 text-align:center; /* looks weird often if not aligned in center */
 -webkit-animation: pop 1s ease-in-out infinite alternate;
 -moz-animation: pop 1s ease-in-out infinite alternate;
 animation: pop 1s ease-in-out infinite alternate;
}

@keyframes pop {
  from { transform:scale(0.95) }
  50% { transform:scale(1) }
  to { transform:scale(0.95) }
}
   
@-webkit-keyframes pop {
  from { -webkit-transform:scale(0.95) }
  50% { -webkit-transform:scale(1) }
  to { -webkit-transform:scale(0.95) }
}

HTML:

<div class="pop">
    popping
</div>

rotating gradient

View Code

CSS:

.rotategrad {
  background-size: 100vw 100vw;
  margin: 0;
  position: relative;
  text-align: -webkit-center;
  font-size: 2em;
  background: repeating-linear-gradient(-45deg, hotpink 0%, lightblue 25%, hotpink 50%);
  -webkit-animation: 'slide' 30s infinite linear forwards;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}

@keyframes slide {
  0% { background-position-x: 0%; }
  100% { background-position-x: 200vw; }
}

HTML:

<div class="rotategrad">
    rotating gradient
</div>

bold italics on hover

View Code

CSS:

.boldtal { 
  transition: .2s ease; 
  font-size:2em;
} 
  
  .boldtal:hover { 
  font-weight:bold;
  font-style:italic;  
}

HTML:

<div class="boldtal">
  bold italics on hover
</div>

Snippets

CD player

00:00

0:00

View Code

CSS:

/* stuff you can probably edit easily */
.title-bar {
    background:linear-gradient(90deg, purple, orchid, pink);
}
  
.player {
    width:fit-content;
    border: black solid 1px;
    border-width: 1px 0px 0px 1px;
    margin-left:auto;
    margin-right:auto;
}
 
.controlimg:hover {
    cursor:help;
}

.songtitlewindow {
  background-color:#fff;
  box-shadow:inset -1px -1px #fff,inset 1px 1px grey,inset -2px -2px #dfdfdf,inset 2px 2px #0a0a0a;
}
  
#musicplayer {
  border:2px solid silver; /* border around player */
  border-width: 2px 0px 0px 0px;
  width:160px; /* width of the player */
}
  
#imagestyle {
  background:silver; /* background color of player */
  border:2px solid silver; /* border around player */
  width:95px; /* width of the player */
  height:95px;
  box-shadow:inset -1px -1px #fff,inset 1px 1px grey,inset -2px -2px #dfdfdf,inset 2px 2px #0a0a0a;
}
  
.ic {
  width:95px;
  position:relative;
  bottom:1px;
  right:1px;
  overflow:hidden;
  padding:2px;
  border:2px solid transparent;
}
  
.songtitlearrow {
  background-size:100%;
  background-repeat:no-repeat;
  background-image:url(https://i.imgur.com/Gt4fzFB.png);
  height:21px;
  width:21px;
  position:relative;
  top:2px;
  left:-2px;
  border:0px solid transparent;
  border-width:0px 0px 0px 0px;
}
  
.songtitle {
  padding:5px; /* padding around song title */
  border-bottom:0px; /* border under song title */
  display:block;
  font-family:Pixelated MS Sans Serif;
}
  
.controls {
  font-size:18px !important; /* size of controls */
  text-align:center;
  width:100%;
  position:relative;
  bottom:10px;
}
  
.controls td {
  padding:8px 5px 0px 5px; /* padding around controls */
}
  
button {
  min-width:40px;
}
  
.seeking {
  background-color:#c0c0c0; /* background color of seeking bar */
  display:flex;
  justify-content: space-evenly;
  padding:14px; /* padding around seeking bar */
}
  
.current-time {
  padding-right:5px;
}
  
.total-duration {
  padding-left:5px;
}
  
.controlimg {
  height:15px;
  width:15px;
}
  
  /* below is styling to get windows 98 effect. from 98.css [https://jdan.github.io/98.css/] */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  background: transparent;
}
  
input[type="range"]:focus {
  outline: none;
}
  
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 21px;
  width: 11px;
  background: svg-load("https://raw.githubusercontent.com/jdan/98.css/main/icon/indicator-horizontal.svg");
  transform: translateY(-8px);
  box-shadow: none;
  border: none;
}
  
input[type="range"].has-box-indicator::-webkit-slider-thumb {
  background: svg-load("https://raw.githubusercontent.com/jdan/98.css/main/icon/indicator-rectangle-horizontal.svg");
  transform: translateY(-10px);
}
  
input[type="range"]::-moz-range-thumb {
  height: 21px;
  width: 11px;
  border: 0;
  border-radius: 0;
  background: svg-load("https://raw.githubusercontent.com/jdan/98.css/main/icon/indicator-horizontal.svg");
  transform: translateY(2px);
}
  
input[type="range"]::-moz-range-thumb {
  background: url("https://raw.githubusercontent.com/jdan/98.css/main/icon/indicator-horizontal.svg");
  border: 0;
  border-radius: 0;
  height: 21px;
  transform: translateY(2px);
  width: 11px;
}
  
input[type="range"].has-box-indicator::-moz-range-thumb {
  background: svg-load("https://raw.githubusercontent.com/jdan/98.css/main/icon/indicator-rectangle-horizontal.svg");
  transform: translateY(0px);
}
  
input[type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  height: 2px;
  box-sizing: border-box;
  background: black;
  border-right: 1px solid grey;
  border-bottom: 1px solid grey;
  box-shadow: 1px 0 0 white, 1px 1px 0 white, 0 1px 0 white, -1px 0 0 darkgrey,
  -1px -1px 0 darkgrey, 0 -1px 0 darkgrey, -1px 1px 0 white, 1px -1px darkgrey;
}
  
input[type="range"]::-moz-range-track {
  width: 100%;
  height: 2px;
  box-sizing: border-box;
  background: black;
  border-right: 1px solid grey;
  border-bottom: 1px solid grey;
  box-shadow: 1px 0 0 white, 1px 1px 0 white, 0 1px 0 white, -1px 0 0 darkgrey,
  -1px -1px 0 darkgrey, 0 -1px 0 darkgrey, -1px 1px 0 white, 1px -1px darkgrey;
}
  
button {
  -webkit-font-smoothing:none;
  font-family:"Pixelated MS Sans Serif",Arial;
  font-size:11px;
}
  
button {
  border:none;
  border-radius:0;
  box-sizing:border-box;
  color:transparent;
  min-height:23px;
  min-width:75px;
  padding:0 12px;
  text-shadow:0 0 #222;
  background:silver;
  box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px grey,inset 2px 2px #dfdfdf
}
  
button:not(:disabled):active {
  box-shadow:inset -1px -1px #fff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px grey;
  text-shadow:1px 1px #222;
}
  
@media (not(hover)){
  button:not(:disabled):hover {
    box-shadow:inset -1px -1px #fff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px grey;
  }
}
  
button:focus {
  outline:1px dotted #000;
  outline-offset:-4px
}
  
button::-moz-focus-inner {border:0}
  
.title-bar-controls button {
  border:none;
  border-radius:0;
  box-sizing:border-box;
  color:transparent;
  min-height:23px;
  min-width:75px;
  padding:0 12px;
  text-shadow:0 0 #222;
}
  
.title-bar-controls button {
  background:silver;
  box-shadow:inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf;
}
  
.title-bar-controls button:not(:disabled):active {
  box-shadow:inset -1px -1px #fff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px grey;
  text-shadow:1px 1px #222;
}
  
@media (not(hover)) {
  button:not(:disabled):hover {
    box-shadow:inset -1px -1px #fff,inset 1px 1px #0a0a0a,inset -2px -2px #dfdfdf,inset 2px 2px grey
  }
}
  
  .title-bar-controls button:focus {outline:1px dotted #000; outline-offset:-4px}
  .title-bar-controls button::-moz-focus-inner {border:0}
  
  
@font-face {
  font-family: "Pixelated MS Sans Serif";
  src: url("https://files.catbox.moe/1za99g.woff") format("woff");
  src: url("https://files.catbox.moe/8fwbkl.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}
  
  @font-face {
  font-family: "Pixelated MS Sans Serif";
  src: url("https://files.catbox.moe/z7csle.woff") format("woff");
  src: url("https://files.catbox.moe/moqhx6.woff2") format("woff2");
  font-weight: bold;
  font-style: normal;
  }
  
  
.window, .title-bar {
  font-family: "Pixelated MS Sans Serif", Arial;
  -webkit-font-smoothing: none;
  font-size: 11px;
}
  
.window {
  box-shadow: inset -1px -1px #0a0a0a,
  inset 1px 1px #dfdfdf, inset -2px -2px #808080,
  inset 2px 2px #ffffff;
  background: #c0c0c0;
  padding: 3px;
  width:260px;
}
  
.title-bar {
  padding: 3px 2px 3px 3px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
  
.title-bar-text {
  font-weight: bold;
  color: white;
  letter-spacing: 0;
  margin-right: 24px;
}
  
.title-bar-controls {
  display: flex;
}
  
.title-bar-controls button {
  padding: 0;
  display: block;
  min-width: 16px;
  min-height: 14px;
}
  
.title-bar-controls button:active {
  padding: 0;
}
  
.title-bar-controls button:focus {
  outline: none;
}
  
.title-bar-controls button[aria-label=Minimize]{
  background-image:url("https://raw.githubusercontent.com/jdan/98.css/main/icon/minimize.svg");
  background-position:bottom 3px left 4px;
  background-repeat:no-repeat;
}
  
.title-bar-controls button[aria-label=Maximize]{
  background-image:url("https://raw.githubusercontent.com/jdan/98.css/4a2282dd9170cabf730fb5803d1153d86b2e94e3/icon/maximize.svg");
  background-position:top 2px left 3px;
  background-repeat:no-repeat;
}
  
.title-bar-controls button[aria-label=Close]{
  background-image:url("https://raw.githubusercontent.com/jdan/98.css/main/icon/close.svg");
  background-position:top 3px left 4px;
  background-repeat:no-repeat;
  margin-left:2px;
}
  
.window-body { margin:0px; height:98px; }
  
input[type=range] {
  -webkit-appearance: none;
  appearance:none;
  width: 100%;
}
  
input[type=range]:focus {
  outline: none;
}
  
  /* settings for chrome browsers */
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 2px; /* thickness of seeking track */
  cursor: help;
}  
  
  /* settings for firefox browsers */
input[type=range]::-moz-range-track {
  width: 100%;
  height: 2px; /* thickness of seeking track */
  cursor: help;
}
  
.flex {display: flex;}
  
.titlebaricon { height:14px; width:14px;}

HTML:

<div class="player">
  <div class="window">
    <div class="title-bar">
      <div class="title-bar-text"><sub><img class="titlebaricon" src="https://i.imgur.com/5r8E7vB.png" alt=""></sub> CD player</div>
      <div class="title-bar-controls">
        <button aria-label="Minimize"></button>
        <button aria-label="Maximize"></button>
        <button aria-label="Close"></button>
      </div>
    </div>
    <div class="window-body">
      <div class="flex">
  <div id="imagestyle"><img class="ic" src="https://i.imgur.com/GU3dJjn.jpeg" alt=""></div>
      <div id="musicplayer">
          <div class="songtitlewindow">
              <div class="flex"><marquee scrollamount="4" class="songtitle"></marquee><div class="songtitlearrow"></div></div>
          </div>
   
   <div class="seeking">
              <div class="current-time">00:00</div>
   
              <input type="range" min="1" max="100" value="0" class="seek_slider" onchange="seekTo()">
   
              <div class="total-duration">0:00</div>
          </div>
   
          <table class="controls">
              <tr>
                  <td>
                      <div class="prev-track" onclick="prevTrack()"><button><img src="https://i.imgur.com/smNRLfT.png" class="controlimg"></button></div>
                  </td>
                  <td>
                      <div class="playpause-track" onclick="playpauseTrack()" ><button><img src="https://i.imgur.com/lvaNTua.png" class="controlimg"></button></div>
                  </td>
                  <td>
                      <div class="next-track" onclick="nextTrack()"><button><img src="https://i.imgur.com/ihIsZGK.png" class="controlimg"></button></div>
                  </td>
              </tr>
          </table>
   
          <audio id="music" src=""></audio> 
      </div>
      </div>
    </div>
  </div>
  </div>

JS:

// initiate variables
  let track_name = document.querySelector(".songtitle");

  let playpause_btn = document.querySelector(".playpause-track");
  let next_btn = document.querySelector(".next-track");
  let prev_btn = document.querySelector(".prev-track");

  let seek_slider = document.querySelector(".seek_slider");
  let curr_time = document.querySelector(".current-time");
  let total_duration = document.querySelector(".total-duration");

  let track_index = 0;
  let isPlaying = false;
  let updateTimer;

  // create new audio element
  let curr_track = document.getElementById("music");

  //
  // DEFINE YOUR SONGS HERE!!!!!
  // MORE THAN FOUR SONGS CAN BE ADDED!!
  // JUST ADD ANOTHER BRACKET WITH NAME AND PATH
  // CATBOX.MOE IS RECOMMENDED FOR UPLOADING MP3 FILES
  let track_list = [
      {
          name:"One Shot One Kill - The Cat's Whiskers",
          path:"https://files.catbox.moe/fegzmf.mp3"
      },
      {
          name:"Shooting Arrows - The Cat's Whiskers",
          path:"https://files.catbox.moe/zj81lr.mp3"
      },
      {
          name:"4 REAL - The Cat's Whiskers",
          path:"https://files.catbox.moe/fxd8fo.mp3"
      },
      {
          name:"My Sweetest Love - The Cat's Whiskers ft. Kazuma Mitchell",
          path:"https://files.catbox.moe/qe4he5.mp3"
      },
      {
          name:"Mercy On Me - The Cat's Whiskers",
          path:"https://files.catbox.moe/w7nnf9.mp3"
      }
  ];
  //
  //
  //
  //
  //

  function loadTrack(track_index) {
      clearInterval(updateTimer);
      resetValues();

      // load a new track
      curr_track.src = track_list[track_index].path;
      curr_track.load();

      // update details of the track
      track_name.textContent = "playing " + (track_index + 1) + " of " + track_list.length + ": " + track_list[track_index].name;

      // set an interval of 1000 milliseconds for updating the seek slider
      updateTimer = setInterval(seekUpdate, 1000);

      // move to the next track if the current one finishes playing 
      curr_track.addEventListener("ended", nextTrack);
  }

  // reset values
  function resetValues() {
      curr_time.textContent = "0:00";
      total_duration.textContent = "0:00";
      seek_slider.value = 0;
  }

  // checks if song is playing
  function playpauseTrack() {
      if (!isPlaying) playTrack();
      else pauseTrack();
  }

  // plays track when play button is pressed
  function playTrack() {
      curr_track.play();
      isPlaying = true;

      // replace icon with the pause icon
      playpause_btn.innerHTML = '<button><img src="https://i.imgur.com/xfIvKgS.png" class="controlimg"></i></button>';
  }

  // pauses track when pause button is pressed
  function pauseTrack() {
      curr_track.pause();
      isPlaying = false;

      // replace icon with the play icon
      playpause_btn.innerHTML = '<button><img src="https://i.imgur.com/lvaNTua.png" class="controlimg"></button>';
  }

  // moves to the next track
  function nextTrack() {
      if (track_index < track_list.length - 1)
          track_index += 1;
      else track_index = 0;
      loadTrack(track_index);
      playTrack();
  }

  // moves to the previous track
  function prevTrack() {
      if (track_index > 0)
          track_index -= 1;
      else track_index = track_list.length;
      loadTrack(track_index);
      playTrack();
  }

  // seeker slider
  function seekTo() {
      seekto = curr_track.duration * (seek_slider.value / 100);
      curr_track.currentTime = seekto;
  }

  function seekUpdate() {
      let seekPosition = 0;

      // check if the current track duration is a legible number
      if (!isNaN(curr_track.duration)) {
          seekPosition = curr_track.currentTime * (100 / curr_track.duration);
          seek_slider.value = seekPosition;

      // calculate the time left and the total duration
      let currentMinutes = Math.floor(curr_track.currentTime / 60);
      let currentSeconds = Math.floor(curr_track.currentTime - currentMinutes * 60);
      let durationMinutes = Math.floor(curr_track.duration / 60);
      let durationSeconds = Math.floor(curr_track.duration - durationMinutes * 60);

      // adding a zero to the single digit time values
      if (currentSeconds < 10) { currentSeconds = "0" + currentSeconds; }
      if (durationSeconds < 10) { durationSeconds = "0" + durationSeconds; }
      if (currentMinutes < 10) { currentMinutes = currentMinutes; }
      if (durationMinutes < 10) { durationMinutes = durationMinutes; }

      curr_time.textContent = currentMinutes + ":" + currentSeconds;
      total_duration.textContent = durationMinutes + ":" + durationSeconds;
    }
  }

  // load the first track in the tracklist
  loadTrack(track_index);

View Code

CSS:

@font-face {
	font-family: ndsbios;
	src: url(https://dl.dropbox.com/s/5dkx1amr2yqmoda/ndsbios_memesbruh03.ttf);
}

.calendar-container,
.calendar-weekdays,
.calendar-header,
.calendar-current-date,
.calendar-body,
.calendar-dates {
	margin: 0;
	padding: 0;
}

.calendar-container {
	width: 210px;
	font-family: ndsbios;
	font-size: 22px;
}

.calendar-container header {
	margin: 0 auto;
	text-align: center;
	border-bottom:black 1px solid;
}

header .calendar-navigation {
	display: flex;
}

header .calendar-navigation span {
	display: none;
}

header .calendar-current-date {
	font-weight: 500;
	font-size: 24px;
}

.calendar-body ul {
	list-style: none;
	flex-wrap: wrap;
	display: flex;
	text-align: center;
}

.calendar-body .calendar-dates {
	margin-bottom: 0px;
}

.calendar-body li {
	width: calc(100% / 7);
	aspect-ratio: 1 / 1;
	font-size: 1.07rem;
	color: #414141;
	background:white;
	border: 1px solid black;
	border-width: 0px 1px 1px 0;
}

.calendar-body .calendar-weekdays li {
	cursor: default;
	font-weight: 500;
	font-family: ndsbios;
	font-size: 22px;
}

.calendar-body .calendar-dates li {
	position: relative;
	z-index: 1;
	font-family: ndsbios;
	font-size: 22px;
}

.calendar-dates li.inactive {
	color: #aaa !important;
}

.calendar-dates li::before {
	position: absolute;
	content: "";
	z-index: -1;
	top: 50%;
	left: 50%;
	width: 21px;
	height: 21px;
	transform: translate(-50%, -50%);
}

.calendar-dates li.active {
	color: #000;
}

.calendar-dates li.active::before {
	background: #c0e0f5;
	border: 1px dashed #326c7a;
}

.calendar-weekdays li:first-child {
	background: #d30000;
	color: white;
	border-width: 0 1px 1px 1px;
}

.calendar-weekdays li:last-child {
	background: #0041c3;
	color: white;
}

.calendar-weekdays li {
	background: #696969;
	color: white;
}

/* make squares pink*/
.calendar-dates li:first-child,
.calendar-dates li:nth-child(7n + 1) {
	background: #fba2eb;
	color: #5f022f;
	border: 1px solid black;
	border-width: 0 1px 1px 1px;
}

/*make squares blue*/
.calendar-dates li:nth-child(7n + 0) {
	background: #82aafb;
	color: #00116e;
}

HTML:

<div class="calendar-container">
  <header class="calendar-header">
      <p class="calendar-current-date"></p>
  </header>

  <div class="calendar-body">
      <ul class="calendar-weekdays">
          <li>Su</li>
          <li>Mo</li>
          <li>Tu</li>
          <li>We</li>
          <li>Th</li>
          <li>Fr</li>
          <li>Sa</li>
      </ul>
      <ul class="calendar-dates"></ul>
  </div>
</div>

JS:

let date = new Date();
  let year = date.getFullYear();
  let month = date.getMonth();
   
  const day = document.querySelector(".calendar-dates");
   
  const currdate = document
      .querySelector(".calendar-current-date");
   
  const prenexIcons = document
      .querySelectorAll(".calendar-navigation span");
   
  // Array of month names
  const months = [
      "1 /",
      "2 /",
      "3 /",
      "4 /",
      "5 /",
      "6 /",
      "7 /",
      "8 /",
      "9 /",
      "10 /",
      "11 /",
      "12 /"
  ];
   
  // Function to generate the calendar
  const manipulate = () => {
   
      // Get the first day of the month
      let dayone = new Date(year, month, 1).getDay();
   
      // Get the last date of the month
      let lastdate = new Date(year, month + 1, 0).getDate();
   
      // Get the day of the last date of the month
      let dayend = new Date(year, month, lastdate).getDay();
   
      // Get the last date of the previous month
      let monthlastdate = new Date(year, month, 0).getDate();
   
      // Variable to store the generated calendar HTML
      let lit = "";
   
      // Loop to add the last dates of the previous month
      for (let i = dayone; i > 0; i--) {
          lit +=
              `${monthlastdate - i + 1}`;
      }
   
      // Loop to add the dates of the current month
      for (let i = 1; i <= lastdate; i++) {
   
          // Check if the current date is today
          let isToday = i === date.getDate()
              && month === new Date().getMonth()
              && year === new Date().getFullYear()
              ? "active"
              : "";
          lit += `${i}`;
      }
   
      // Loop to add the first dates of the next month
      for (let i = dayend; i < 6; i++) {
          lit += `${i - dayend + 1}`
      }
   
      // Update the text of the current date element 
      // with the formatted current month and year
      currdate.innerText = `${months[month]} ${year}`;
   
      // update the HTML of the dates element 
      // with the generated calendar
      day.innerHTML = lit;
  }
   
  manipulate();
   
  // Attach a click event listener to each icon
  prenexIcons.forEach(icon => {
   
      // When an icon is clicked
      icon.addEventListener("click", () => {
   
          // Check if the icon is "calendar-prev"
          // or "calendar-next"
          month = icon.id === "calendar-prev" ? month - 1 : month + 1;
   
          // Check if the month is out of range
          if (month < 0 || month > 11) {
   
              // Set the date to the first day of the 
              // month with the new year
              date = new Date(year, month, new Date().getDate());
   
              // Set the year to the new year
              year = date.getFullYear();
   
              // Set the month to the new month
              month = date.getMonth();
          }
   
          else {
   
              // Set the date to the current date
              date = new Date();
          }
   
          // Call the manipulate function to 
          // update the calendar display
          manipulate();
      });
  });