---

Greased 1.18.1A - Reference

December 24th, 2015

Alright ladies and gentlemen, here's the quick reference guide for all those font tricks we went over. The first column has the name of the effect, followed by text before the effect (pertinent in some cases), then the text after the effect has been applied, and finally the raw HTML/inline CSS necessary to make it happen. Enjoy!

---

Effect	Before	After	Raw Code	Notes
background color	before	after	<span style="background: blue;">after</span>	see notes for color
background gradient	before	after	<span style="background: linear-gradient(cyan, magenta, pink);">after</span>	background: linear-gradient(direction (optional), color1, color2, etc.)
background gradient (radial)	before	after	<span style="background: radial-gradient(yellow, orange, red);">after</span>	background: radial-gradient(color1, color2, etc.)
bold	before	after	<strong>after</strong> <span style="font-weight: bold;">after</span>	-
box shadow	before	after	<span style="box-shadow: 5px 3px 2px 5px pink;">after</span>	box-shadow: horizontal offeset (required), vertical offset (required), blur (optional), spread (optional), color (optional); multiple uses possible
border	before	after	<span style="border: 4px outset #00ff7f;">after</span>	border: thickness (required), style (required), color (required); style can include 1 of 8 values: solid, double, dashed, dotted, inset, outset, groove, ridge
border radius	before before	after after	<span style="background: #c0c0c0; border-radius: 0.5em;">after</span <span style="border: 3px solid #c0c0c0; border-radius: 0.5em;">after</span>	element must have a border or background color for this to have an effect
capitalize	before	after	<span style="text-transform: capitalize;">after</span>	-
code	before	after	<code>after</code>	-
color	before	after	<span style="color: red;">after</span>	any time a color is called for in any effect, it can be expressed as a hex code (#ff0000), hex shorthand (if applicable; #f00), color name (if applicable; "red"), RGB values (rgb(255,0,0)), RGB percentages (rgb(100&,0%,0%)), RGBA values (rgba(255,0,0,1.0)), RGBA percentages (rgba(100%,0%,0%,1.0)), HSL (hsl(0,100%,50%)), or HSLA (hsla(0,100%,50%,1.0))
font family	before	after after after after after	<span style="font-family: serif;">after</span> <span style="font-family: sans-serif;">after</span> <span style="font-family: monospace;">after</span> <span style="font-family: cursive;">after</span> <span style="font-family: fantasy;">after</span>	actual font names and generic font families can be used; multiple values can be specified in case initial choices are not available to the end user
font size	before	after after	<span style="font-size: small;">after</span> <span style="font-size: x-large;">after</span>	several values can be used: names (xx-small, x-small, small, medium, large, x-large, xx-large), "em's" (em), pixels (px), points (pt), or percentages (%)
highlight	before	after	see mark	-
italics	before	after	<em>after</em> <span style="font-style: italic;">after</span>	-
letter spacing	before	after after after	<span style="letter-spacing: -1px;">after</span> <span style="letter-spacing: .25em;">after</span> <span style="letter-spacing: .5em;">after</span>	multiple values can be used, typically in units of pixels (px) or "em's" (em), including negative values, which will first push the letters into each other and then create space in the opposite direction
line-through	before	after	<del>after</del> <span style="text-decoration: line-through;">after</span>	-
lowercase	BEFORE	AFTER	<span style="text-transform: lowercase;">AFTER</span>	-
mark	before	after	<mark>after</mark>	-
oblique	before	after	<span style="font-style: oblique;">after</span>	-
overline	before	after	<span style="text-decoration: overline;">after</span>	-
reversed italics (pseudo)	before	after	<span class="rev-em">after</span>	CSS "hack" using transform; see original explanation for more info
reversed oblique	before	after	<span class="rev">after</span>	CSS "hack" using transform; see original explanation for more info
small	before	after	<small>after</small>	-
small caps	Before	After	<span style="font-variat: small-caps;">After</span>	-
strike-through	before	after	see line-through	-
subscript	before sub	after sub	after <sub>sub</sub>	-
superscript	before sup	after sup	after <sup>sup</sup>	-
text shadow	before	after	<span style="text-shadow: 2px 2px 1px blue;">after</span>	text-shadow: horizontal offset (required), vertical offset (required), blur (optional), color (optional); multiple uses possible
underline	before	after	<u>after</u> <insert>after</insert> <span style="text-decoration: underline;">after</span>	-
underline - dashed	before	after	<span class="dash-u">after</span>	CSS "hack" using border-bottom; see original explanation for more info
underline - dotted	before	after	<span class="dot-u">after</span>	CSS "hack" using border-bottom; see original explanation for more info
underline - double	before	after after	<span class="dbl">after</span> <span class="dbl2">after</span>	CSS "hack" using border-bottom; see original explanation for more info
uppercase	before	after	<span style="text-transform: uppercase;">after</span>	-
upright italics	before	after	<span class="up-em">after</span>	CSS "hack" using transform; see original explanation for more info
word spacing	be fore	af ter	<span style="word-spacing: 2em;">af ter</span>	any measurement can be used, "em's" and pixels (px) being the most common

---

There you have it! A quick and easy reference for all those cool "font tricks!" I tried to stick to the big stuff and keep it short and simple here. If something is a little ambiguous or unclear, chances are I went into way more detail back in 1.18.1. If you have any trouble, take a look at the corresponding section, and if you're still having issues, let me know and I'll be glad to help. Until next time!

---

NerdBerry NerdBerry@NerdBacon.com	The Cubist TheCubist@NerdBacon.com
Doc Croc DocCroc@NerdBacon.com