「HTML要素以外のものをCSSで設定したら？」を集めた「CSSユーモア」がクスっときて楽しい

先日、海外製ツールの使い方を調べていたら、CSS Humorというサイトを見つけました。

このサイト、ある程度CSS知識が必要ですが、思わず笑ってしまうCSS大喜利サイトだったので紹介です。

photo by Andy Hay

CSSユーモアとは

CSS Humorは、HTML要素以外のものをスタイルシートのプロパティーと値で表すCSSジョークサイトです。

Twitterアカウント（@CSSHumor）でもツイートされています。

このサイトは、CSSを触ったことがない人なら、何のことかわからないかもしれません。けれど、ある程度CSSを使える人なら思わずクスっとしてしまうような、楽しいCSSがいろいろ掲載されています。

CSS Humor

CSS Humorには、様々なCSS設定が掲載されていますが、個人的に好きだったものを、いくつか紹介です。

ピサの斜塔

#Pisa { font-style: italic; }

1	#Pisa { font-style: italic; }

From mohammed

ロンドン

#london {
  background-color: gray;
}

#london {

background-color: gray;

}

From Funa

#british.weather { clear: none; }

1	#british.weather { clear: none; }

From @kasperoo

珈琲

.coffee { color: black; }

.coffee + .cream { color: brown; }

.coffee { color: black; }

.coffee + .cream { color: brown; }

From @mikeleeorg

バットマン

#Batman {
  background-color: #000;
  opacity: 0.3;
}

#Batman {

background-color: #000;

opacity: 0.3;

}

From @iiisoni

ハルク

#hulk {
  height: 200%;
  width: 200%;
  color: green;
}

#hulk {

height: 200%;

width: 200%;

color: green;

}

From pixeladdicted

スーパーマン

#superman .pants {
  color: blue;
  z-index: 1;
}

#superman .underwear {
  color: red;
  z-index: 2;
}

#superman .pants {

color: blue;

z-index: 1;

}

#superman .underwear {

color: red;

z-index: 2;

}

From @shandusdu

忍者

.ninja {
  visibility: hidden;
  color: #000;
  background: #000;
}

.ninja {

visibility: hidden;

color: #000;

background: #000;

}

From Rune

マイケルジャクソン

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

1	.michael-jackson { color: white !important; }

From @szantogabor

タイタニック

#titanic { float: none; }

1	#titanic { float: none; }

From rimantas

#Titanic {
  vertical-align: bottom;
  z-index: -1000;
  padding-bottom: none;
  transform: rotate(-45deg);
}

#Titanic {

vertical-align: bottom;

z-index: -1000;

padding-bottom: none;

transform: rotate(-45deg);

}

From @logunoff

氷山

.iceberg { overflow: hidden; }

1	.iceberg { overflow: hidden; }

From Reallife CSS

.iceberg { float: top; }

1	.iceberg { float: top; }

From @koplowicznsons

.iceberg { position: fixed; }

.titanic { float: none; }

.iceberg { position: fixed; }

.titanic { float: none; }

From @jozef_kucera

頭髪

.bald {
  border-top: none;
}

.bald {

border-top: none;

}

From Brendon Conradie

#hair { visibility: inherit; }

1	#hair { visibility: inherit; }

From Groxx

ヨガパンツ

.yoga .pants {
  padding: 0;
  margin: 0; 
}

.yoga .pants {

padding: 0;

margin: 0;

}

From @afro_ian

プッシュアップブラ

.push-up-bra {
  margin-top: –25%;
  overflow: visible;
  resize: none;
}

.push-up-bra {

margin-top: –25%;

overflow: visible;

resize: none;

}

From @mkiranwd

トイレットペーパー

.toilet-paper {
  overflow-y: scroll;
}

.toilet-paper {

overflow-y: scroll;

}

From Kristiyan Srebrev

ローラーブレード

.rollerblade { display:inline; }

1	.rollerblade { display:inline; }

From @aionsfx

鏡

.mirror { transform: rotateY(180deg); }

1	.mirror { transform: rotateY(180deg); }

From Uddhab

電車

.train {
  text-decoration: underline;
  text-underline-style: double;
}

.train {

text-decoration: underline;

text-underline-style: double;

}

From Groxx

レゴ

.Lego { display: block; }

1	.Lego { display: block; }

From @folktrash

IKEA

#ikea { display: table; }

1	#ikea { display: table; }

From ‏@belafon87

SAMSUNG

.samsung { @extend apple; }

1	.samsung { @extend apple; }

From @kasperoo

酔っぱらい

.drunk { overflow: visible; }

1	.drunk { overflow: visible; }

From @koplowicznsons

二日酔い

.hangover {
  .self-respect {
    display: none;
  }
  .eyes {
    color: red;
    filter: blur;
  }
}

.hangover {

.self-respect {

display: none;

}

.eyes {

color: red;

filter: blur;

}

From @wigggins

.hangover { position: fixed; bottom: 0; }

1	.hangover { position: fixed; bottom: 0; }

From @jozef_kucera

.hangover { vertical-align: bottom; }

1	.hangover { vertical-align: bottom; }

From Emil Ivanov

誕生日

#Happy.Birthday {
  richness: 100 !important;
  stress: 0 !important;
}

#Happy.Birthday {

richness: 100 !important;

stress: 0 !important;

}

From @mikeleeorg

クリスマス

#Merry.Christmas {
  text-decoration: blink !important;
}

#Merry.Christmas {

text-decoration: blink !important;

}

From @mikeleeorg

お気に入りのバンド

.favoriteBand {
  background-repeat: repeat repeat;
}

.favoriteBand {

background-repeat: repeat repeat;

}

From Shane

冬

.winter { display: none !important; }

1	.winter { display: none !important; }

From @raduchira

NSA（アメリカ国家安全保障局）

photo by Fry1989

#nsa { opacity: 1; }

1	#nsa { opacity: 1; }

From @svenassmann

#NSA { visibility: hidden; }

1	#NSA { visibility: hidden; }

From @LaurenFortes

世界

.USA + .Mexico { border: 1px dashed; }

1	.USA + .Mexico { border: 1px dashed; }

From trudesign

.doctors { border: none; }

1	.doctors { border: none; }

From @Twtnman

.worldPeace .countries { border: transparent; }

1	.worldPeace .countries { border: transparent; }

From Impressive Webs

ビッグバン

#BigBang:before {
  content: '';
}

#BigBang:active {
  transition: width infinite, height infinite ease-out;
}

#BigBang:before {

content: '';

}

#BigBang:active {

transition: width infinite, height infinite ease-out;

}

From Victor Zuydweg

政治（政治家）

.politician {
  position: absolute;
}

.politician.elect {
  transform: rotate(180deg);
  opacity: .1;
}

.politician {

position: absolute;

}

.politician.elect {

transform: rotate(180deg);

opacity: .1;

}

.politicians { position: relative; }

1	.politicians { position: relative; }

From Brent Schneider

.politician + .money-laundering {
  position: sticky;
  overflow: visible;
  speak: none;
}

.politician + .money-laundering {

position: sticky;

overflow: visible;

speak: none;

}

From @SGoresht

.politician .integrity { display: none; }

1	.politician .integrity { display: none; }

From @wbenevides

#United-States .politicians .brains {
  visibility: hidden;
  display: none;
}

#United-States .politicians .brains {

visibility: hidden;

display: none;

}

From Wicksell Metellus

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

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

From Mike

.democrat { float: left; }

.republican { float: right; }

.third-party { visibility: hidden; }

.democrat { float: left; }

.republican { float: right; }

.third-party { visibility: hidden; }

From @phallstrom

神

.God {
  position: absolute;
  display: none;
}

.God {

position: absolute;

display: none;

}

From Jp Malkrovi

まとめ

CSS Humorには、このほかにも思わず「うまい！」と唸ってしまうCSS設定が多数載っています。

WEB制作中、ちょっと疲れてしまった時などに、気晴らしにこういったCSSユーモアを考えてみるのも良いかもしれません。