Copyable code - Style

Last pixelated font in Windows


  font-family: "MS PGothic", Serif;

Result: MS PGothic

Pixelated image rendering


img {
  image-rendering: pixelated;
}

Result:

Resize picture on hover


.grow {
  transition: transform .15s;
}
.grow:hover {
  transform: scale(2);
}

Result:

Drop caps

Ever notice how bloated the code for news sites is? This is all they really had to do.


article::first-letter {
  font-size:250%;
  float: left;
  line-height: 1;
  margin-right:4px;
}


<article>
<!--I heard semantic HTML is good but I don't know why-->
Text with a<br>
dropcap<br>
goes here.</article>

Result:

Text with a
dropcap
goes here.

Gradient text

(text will look blurrier when you do this)


.scanlines {
  background: repeating-linear-gradient(0deg, greenyellow, greenyellow 1px, black 1px, black 2px);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}


<p class="scanlines">Text with gradient-generated scanlines</p>

Result: Text with gradient-generated scanlines

Gradient border


.rainbow {
  border-bottom: 8px solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(to right, #5B0F08, #851B03, #A82C00, #DB7A08, #EAB111, #BFB239, #74A34B, #568F6B, #4487B0, #3C469C, #271470, #20144C);
}


<p class="rainbow">Rainbow underlined text</p>

Result: Rainbow underlined text

Parallax effect

Vanilla JavaScript Parallax with just a Few Lines of Code

Result: Space