If you use one of my codes you dont necessarily have to credit me publicly but if someone asks for the code PLEASE redirect them to this rentry so they can find other codes too if needed

I'm @tabris on NS. I used to be I used to be a big Toyhouse user back in the day so I learned a lot of CSS from there. Don't judge the way I code Ok I'm a little rusty. if you have a specific thing in mind that you'd like coded you can send it to my inbox! Feel free to mess around with the codes and change the numbers used to your liking. It takes a bit of time for me to code these so all I ask is that if anyone asks you where the code is from you direct them here so they can find other codes if they need more.

A list of selectors you can apply CSS to on NS it is not an exhaustive list and the list was not created by me.


Example

Code:

/* Sidebar Section Styling */
#sidebar {
  display: flex;
  align-items: center;
  background-color: #HEXCODE; 
  border: 2px solid #HEXCODE; 
  box-shadow: 4px 4px 0 #HEXCODE; 
  padding: 10px 15px;
  color: #HEXCODE; 
  text-transform: uppercase; /* you can remove this if you want */
  letter-spacing: 2px;
  width: fit-content;
  cursor: pointer;
  position: relative;
}

/* PAUSE ICON SECTION */
#sidebar::before {
  content: "\25B6";
  background-color: #HEXCODE; 
  color: #HEXCODE; 
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  width: 25px;
  height: 25px;
  font-size: 16px;
  box-shadow: 2px 2px 0 #HEXCODE;
  transition: content 0.3s ease;
}

/* HOVERING OVER IT TURNS IT INTO A PLAY ICON. IF YOU DONT WANT IT TO DO THIS, REMOVE THIS */
#sidebar:hover::before {
  content: "\23F8"; 
}

/* SIDEBAR SONG TEXT */
#sidebar::after {
  content: "NAME OF YOUR SONG";
  font-size: NUMBERpx;
}

Example

This code may appear slightly different on your profile because other CSS that I have integrated on mine affects its look. Inbox me if you nees the code altered to look better or if you need me to input the colors for you if you don't understand what each string of code does.

Code:

.response {
  background-color: #HEXCODE; 
  border: 2px solid #HEXCODE;
  border-radius: 16px;
  color: #HEXCODE;
  padding: 5px;
  position: relative;
  margin: 30px auto;
  max-width: 700px; 
  box-shadow: 5px 7px 5px rgba(0, 0, 0, 0); 
}          /*REPLACE THE 0S WITH YOUR RGBA CODE*/

.response:after {
  content: '';
  position: absolute;
  bottom: -30px;
  right: 20px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 30px 30px 0 0;
  border-color: #HEXCODE transparent transparent transparent;
}

.response:before {
  content: '';
  position: absolute;
  bottom: -28px; 
  right: 21px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 28px 28px 0 0;
  border-color: #HEXCODE transparent transparent transparent;
}

Result

This code does repeat. If you don't want it to, then delete the "infinite".

Code:

h3.username {
  overflow: hidden;
  white-space: nowrap;
  display: inline-block;
  border-right: 3px solid #000;
  animation: typing 3s steps(30) 1s forwards, blink 0.75s step-end infinite;
}

@keyframes typing {
  from { width: 0; } 
  to { width: 100%; } 

@keyframes blink {
  50% {
    border-color: transparent;
  }
}

Result (it will look and type slightly different depending on the font used)

Keep in mins if you use this code, the text cursor ( | ) will keep blinking even after its finished typing. if you dont want that, see the next code instead! This code doesn't repeat, here is the version that does repeat

Code:

h3.username {
  overflow: hidden;
  white-space: nowrap;
  display: inline-block;
  border-right: 3px solid #000;
  animation: typing 3s steps(30) 1s forwards, blink 0.75s step-end infinite;
}

@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

@keyframes blink {
  50% {
    border-color: transparent;
  }
}

Result (it will look and type slightly different depending on the font used)

If you’d like for the text cursor to disappear after its finished typing, use this code.! This code doesn't repeat, please ask me in my inbox for a version that does repeat once the animation is finished for the sake of not making this too cluttered

h3.username {
  overflow: hidden;
  white-space: nowrap;
  display: inline-block;
  border-right: 3px solid #000; 
  animation: typing 3s steps(30) 1s forwards, blink 0.75s step-end infinite, cursorDisappear 0s 3s forwards;
}

@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

@keyframes blink {
  50% {
    border-color: transparent; 
  }
}

@keyframes cursorDisappear {
  100% {
    border-right: 3px solid transparent;
  }
}
Edit

Pub: 06 Dec 2024 00:19 UTC

Edit: 26 Dec 2024 02:58 UTC