logo.svg

CSS for Sarcasm

Communication on the internet is great, but sometimes it is hard to get your tone across. Ever since @gf3 proposed it to the @W3C I wanted a way to do it.

Today I am suggesting some CSS to help clear this up. This morning I woke up and thought of the solution, why don't we just use Backslant or "Contra Italics". Just add the following to your stylesheet and feel free to use when needed.

The CSS:

.sarcasm {
	display:inline-block;
	-moz-transform: scale(1) rotate(0deg) translate(0px, 0px) skew(15deg, 0deg);
	-webkit-transform: scale(1) rotate(0deg) translate(0px, 0px) skew(15deg, 0deg);
	-o-transform: scale(1) rotate(0deg) translate(0px, 0px) skew(15deg, 0deg);
	-ms-transform: scale(1) rotate(0deg) translate(0px, 0px) skew(15deg, 0deg);
	transform: scale(1) rotate(0deg) translate(0px, 0px) skew(15deg, 0deg);
}

Example:

Sarcasm is the ability to insult idiots without them realizing it.

<span class="sarcasm">insult idiots</span>

Please join the conversation on Hacker News.