Hilarious CSS

A curated list of CSS puns and jokes.

The list is based on this Reddit thread, this DesignerNews thread and the awesome website created by Saijo George.

Contributions are more than welcome.

All jokes and puns are also found in the hilarious.css file in this repository.

Visitor stats

Puns

#titanic {
	float: none;
}

#bermuda-triangle {
	display: none;
}

.invisibility-cloak + #harry-potter {
	visibility: hidden;
}

.invisibility-cloak + #mad-eye-moody {
	visibility: visible !important;
}

#usa + #mexico {
	border: 1px dashed;
}

#usa[data-president~='Trump'] + #mexico {
	border: 30ft solid;
}

#europe .country:not(#uk) {
	border: none;
}

#china {
	border-top-style: solid;
}

.sniper-mode-engaged {
	cursor: crosshair;
}

#bambis-mom {
	cursor: crosshair;
	orphans: 1;
}

#periodic {
	display: table;
}

#big-bang::before {
	content: '';
}

#chuck-norris {
	color: #bada55;
}

#nsa {
	opacity: 1;
}

#tower-of-pisa {
	font-style: italic;
}

/* or */

#tower-of-pisa {
	transform: rotate(3.99deg);
}

#australia {
  transform: rotateY180deg);
}

#bruce-banner {
	color: pink;
	transition: color 10s;
}

#bruce-banner.the-hulk {
	color: green;
}

#oliver-queen {
	cursor: arrow;
}

.ninja {
	visibility: hidden;
	color: black;
}

.leprechaun {
	height: 20%;
	color: green;
	display: none;
}

.infinity-edge-pools {
	overflow: hidden;
}

.obese {
	width: 200%;
	overflow: visible;
}

.muscles {
	display: flex;
}

.religious-upbringing {
	perspective: inherit;
}

.yamama,
.yomama,
.yourmom,
.yourmomma,
.yourmother {
	/* Because she is a classy lady. */
	width: 99999999px;
}

#wife {
	right: 100%;
	margin: 0%;
}

#lego {
	display: block;
}

.hobbit {
	height: 50%;
}

.hobbit .foot {
	width: 200%;
}

.delorean {
	z-index: -1955;
}

#fear {
	display: none;
}

#usa > .marijuana-laws {
	.federal {
		cursor: not-allowed !important;

		.state {
			cursor: wait;

			&#AK,
			&#CA,
			&#CO,
			&#ME,
			&#MA,
			&#NV,
			&#OR,
			&#WA {
				cursor: progress;
			}
		}
	}
}

.single-lane-road {
	width: auto;
}

#samsung {
	@extend apple;
}

#rip {
	bottom: -6912px; /* 6912px = 6 feet */
}

.defibrillator {
	clear: both;
}

.illuminati {
	position: absolute;
	visibility: hidden;
}

.government {
	transition: all 4yr ease-out;
}

#autobots {
	transform: translate3d();
}

#ikea {
	display: table;
}

#moses > #sea {
	column-count: 2;
}

.gangsta-rap {
	word-spacing: 0;
}

.rich-people {
	top: 1%;
}

.working-class {
	bottom: 99%;
}

.monarch {
	position: inherit;
}

.ghost {
	opacity: 0.1;
	pointer-events: none;
}

.glasses-lenses {
	clear: both;
	animation: wipe 5s;
}

.glasses-lenses::after {
	image-rendering: optimizeQuality;
}

.internet-explorer {
	break-inside: auto;
}

.kkk {
	color: white !important;
}

.fat-woman .child {
	width: inherit;
}

.thumbs {
	vertical-align: top;
}

.egg::before {
	content: 'chicken';
}

/* or */

.chicken::before {
	content: 'egg';
}

.concert {
	white-space: nowrap;
}

#berlin .wall {
	height: 0;
}

._1961-1989 #berlin .wall {
	height: 100%;
}

.cat {
	box-sizing: content-box;
}

.table {
	transform: rotate(180deg);
	animation: \(╯°□°）╯︵ ┻━┻ 1s;
}

.table.is--adjusted {
	transform: rotate(0deg);
	animation-name: ┬─┬ノ(ಠ_ಠノ);
}

.jackson {
	color: black;
}

.jackson#janet {
	color: inherit;
}

.jackson#michael {
	color: white !important;
}

.dragon-ball {
	z-index: 9001;
}

.moonwalk {
	transition: 0.2s ease-in-out;
	transform: translateX(-300px);
}

.quiet {
	font-size: 0 !important;
}

#neo {
	transform: matrix(0, 1, 0, 1, 0, 1);
}

LICENSE

MIT

---

Connect with me:

                     

---

Support and sponsor my work: