CSS you use on every site?

[Melooon]

There are a few CSS snippets I use on almost every site Iv made; I figured Id share a few of the best here! Feel free to share your CSS snippets! 

Spin! Makes things spin!

Code

.spin {
  animation-name: spin;
  animation-duration: 10000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

Hover Twist (like the MK Nav Bar)

Code

.twist {
  transition: 1s;
}
.twist:hover {
  transform: rotate(360deg);
}

Blink! Simulates the old <blink> tag!

Code

.blink {
  animation: blink-animation 0.95s steps(2, start) infinite;
}
@keyframes blink-animation {
  to {
    visibility: hidden;
  }
}

Center: Forces text centering on something (you can also make left right variants)

Code

.center {
  text-align: center !important;
}

Scrollbar styling - basic scrollbar styling on Chrome, Firefox and Safari

Code

* {
	scrollbar-color: #cd7c00 #000020;
}
::-webkit-scrollbar {
	background: #000020;
	width: 8px;
	height: 8px;
}
::-webkit-scrollbar-track {
	background: #000020;
}
::-webkit-scrollbar-thumb {
	background: #cd7c00;
	border-radius: 10px;
}

Bobbing: The bobbing animation used on MelonLand homepage!

Code

.bobbing {
  animation: bobbing 2s ease-in-out infinite;
  animation-direction: alternate;
}
@keyframes bobbing {
  0% {
    transform: translateY(10px);
  }
  100% {
    transform: translateY(-10px);
  }
}

[RodFireProductions]

This one snippet always ends up on all of my sites. It makes things tremble in fear or excitement! It's the only animation I tend to implement.

Code

.scared {
  animation: an_shake .2s linear infinite;
}
.scared_h:hover {
  animation: an_shake .2s linear infinite;
}
@keyframes an_shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

[Cele]

Thanks for those. I have a very simple thing everywhere, image align to right so text can still be next to it. And caption under it if wanna.

Code

figure {
  float: right;
  display: flex;
  flex-flow: column;
  margin: auto;
  max-width:450px;
  padding:5px;
}

figcaption {
  color: #000000;
  padding: 3px;
  text-align: center;
}

[brisray]

Another spinny thing. This is used on one of my pages to demonstrate moire patterns. A spinnning grid on top of a static one - https://brisray.com/computers/halftone.htm

Code

<style>
#rotate-div {
	position: relative;
	top: 0;
	left: 0;
	margin: auto;
	width: 400px;
	text-align:center;
	padding-top:50px;
	padding-bottom:50px;
}
#steady-img {
	left:0;
	top:0;
}

#rotate-img {
	position: absolute;
	left:50px;
	top:50px;
	-webkit-animation: rotation 15s infinite linear; 
	animation: rotation 15s infinite linear; 
}

 @-webkit-keyframes rotation { 
	from {
		-webkit-transform: rotate(0deg);
	}	to {
		-webkit-transform: rotate(359deg);
	}
}

@keyframes rotation { 
	from {
		transform: rotate(0deg);
	}	to {
		transform: rotate(359deg);
	}
}
</style>

<div id="rotate-div">
	<img src="images/moire-vert.gif" id="steady-img">
	<img src="images/moire-vert.gif" id="rotate-img">
</div>

[HayleyMulch]

*bookmarks this topic*

Thanks for sharing these!

[myrrhdoll]

Code

* { box-sizing: border-box;}

no more math when it comes to margins, paddings and borders...

Code

.tilde::before, .tilde::after {
  content: ' ~ ';
}

~ It's cute and it doesn't mess with screen readers ~

[Melooon]

This is a handy snippet you can add to your body tag if your site uses very small text - it stops iPhones from making the text bigger and breaking your layout!

Code

-webkit-text-size-adjust: 100%;

[BinaryDigit]

Thank you for these cool snippets!

I love this typewriter effect, originally from this Codepen: https://codepen.io/geoffgraham/pen/jrWwWM (edit: wow I didn't realize it would embed instead of link!)

Code

/* GLOBAL STYLES */
body {
  background: #333;
  padding-top: 5em;
  display: flex;
  justify-content: center;
}

/* DEMO-SPECIFIC STYLES */
.typewriter h1 {
  color: #fff;
  font-family: monospace;
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-right: .15em solid orange; /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  letter-spacing: .15em; /* Adjust as needed */
  animation: 
    typing 3.5s steps(30, end),
    blink-caret .5s step-end infinite;
}

/* The typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: orange }
}

Then assign the class "typewriter" to the text you want to use this on in your HTML.


And I know this isn't a retro web thing, more a modern thing, but If I build in light/dark mode, I always use this:

Code

:root {
  --color-bg: #000000;
  --color-fg: #ffffff;
}

@media (prefers-color-scheme: light) {
  :root {
    --color-bg: #ffffff;
    --color-fg: #000000;
  }
}

body {
  background-color: var(--color-bg);
  color: var(--color-fg);
}