Index » Extras » Code » Style
Updated 3/28/23

Copyable code - Style

Last pixelated font in Windows

font-family: "MS PGothic", Serif;

Result: MS PGothic

Pixelated image rendering Won't work in Internet Explorer

img { image-rendering: pixelated; }

Result: demonstration

Resize picture on hover

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

Result: demonstration

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>


Text with a
goes here.

Gradient text Won't work in Internet Explorer

(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