先日、海外製ツールの使い方を調べていたら、CSS Humorというサイトを見つけました。
このサイト、ある程度CSS知識が必要ですが、思わず笑ってしまうCSS大喜利サイトだったので紹介です。
photo by Andy Hay
CSSユーモアとは
CSS Humorは、HTML要素以外のものをスタイルシートのプロパティーと値で表すCSSジョークサイトです。
Twitterアカウント(@CSSHumor)でもツイートされています。
このサイトは、CSSを触ったことがない人なら、何のことかわからないかもしれません。けれど、ある程度CSSを使える人なら思わずクスっとしてしまうような、楽しいCSSがいろいろ掲載されています。
CSS Humor
CSS Humorには、様々なCSS設定が掲載されていますが、個人的に好きだったものを、いくつか紹介です。
ピサの斜塔
1 | #Pisa { font-style: italic; } |
From mohammed
ロンドン
1 2 3 | #london { background-color: gray; } |
From Funa
1 | #british.weather { clear: none; } |
From @kasperoo
珈琲
1 2 3 | .coffee { color: black; } .coffee + .cream { color: brown; } |
From @mikeleeorg
バットマン
1 2 3 4 | #Batman { background-color: #000; opacity: 0.3; } |
From @iiisoni
ハルク
1 2 3 4 5 | #hulk { height: 200%; width: 200%; color: green; } |
From pixeladdicted
スーパーマン
1 2 3 4 5 6 7 8 9 | #superman .pants { color: blue; z-index: 1; } #superman .underwear { color: red; z-index: 2; } |
From @shandusdu
忍者
1 2 3 4 5 | .ninja { visibility: hidden; color: #000; background: #000; } |
From Rune
マイケルジャクソン
1 | .michael-jackson { color: white !important; } |
From @szantogabor
タイタニック
1 | #titanic { float: none; } |
From rimantas
1 2 3 4 5 6 | #Titanic { vertical-align: bottom; z-index: -1000; padding-bottom: none; transform: rotate(-45deg); } |
From @logunoff
氷山
1 | .iceberg { overflow: hidden; } |
From Reallife CSS
1 | .iceberg { float: top; } |
From @koplowicznsons
1 2 3 | .iceberg { position: fixed; } .titanic { float: none; } |
From @jozef_kucera
頭髪
1 2 3 | .bald { border-top: none; } |
From Brendon Conradie
1 | #hair { visibility: inherit; } |
From Groxx
ヨガパンツ
1 2 3 4 | .yoga .pants { padding: 0; margin: 0; } |
From @afro_ian
プッシュアップブラ
1 2 3 4 5 | .push-up-bra { margin-top: –25%; overflow: visible; resize: none; } |
From @mkiranwd
トイレットペーパー
1 2 3 | .toilet-paper { overflow-y: scroll; } |
From Kristiyan Srebrev
ローラーブレード
1 | .rollerblade { display:inline; } |
From @aionsfx
鏡
1 | .mirror { transform: rotateY(180deg); } |
From Uddhab
電車
1 2 3 4 | .train { text-decoration: underline; text-underline-style: double; } |
From Groxx
レゴ
1 | .Lego { display: block; } |
From @folktrash
IKEA
1 | #ikea { display: table; } |
From @belafon87
SAMSUNG
1 | .samsung { @extend apple; } |
From @kasperoo
酔っぱらい
1 | .drunk { overflow: visible; } |
From @koplowicznsons
二日酔い
1 2 3 4 5 6 7 8 9 | .hangover { .self-respect { display: none; } .eyes { color: red; filter: blur; } } |
From @wigggins
1 | .hangover { position: fixed; bottom: 0; } |
From @jozef_kucera
1 | .hangover { vertical-align: bottom; } |
From Emil Ivanov
誕生日
1 2 3 4 | #Happy.Birthday { richness: 100 !important; stress: 0 !important; } |
From @mikeleeorg
クリスマス
1 2 3 | #Merry.Christmas { text-decoration: blink !important; } |
From @mikeleeorg
お気に入りのバンド
1 2 3 | .favoriteBand { background-repeat: repeat repeat; } |
From Shane
冬
1 | .winter { display: none !important; } |
From @raduchira
NSA(アメリカ国家安全保障局)
photo by Fry1989
1 | #nsa { opacity: 1; } |
From @svenassmann
1 | #NSA { visibility: hidden; } |
From @LaurenFortes
世界
1 | .USA + .Mexico { border: 1px dashed; } |
From trudesign
1 | .doctors { border: none; } |
From @Twtnman
1 | .worldPeace .countries { border: transparent; } |
From Impressive Webs
ビッグバン
1 2 3 4 5 6 7 | #BigBang:before { content: ''; } #BigBang:active { transition: width infinite, height infinite ease-out; } |
From Victor Zuydweg
政治(政治家)
1 2 3 4 5 6 7 8 | .politician { position: absolute; } .politician.elect { transform: rotate(180deg); opacity: .1; } |
1 | .politicians { position: relative; } |
From Brent Schneider
1 2 3 4 5 | .politician + .money-laundering { position: sticky; overflow: visible; speak: none; } |
From @SGoresht
1 | .politician .integrity { display: none; } |
From @wbenevides
1 2 3 4 | #United-States .politicians .brains { visibility: hidden; display: none; } |
From Wicksell Metellus
1 | .government { transition: all 4yr ease-out; } |
From Mike
1 2 3 4 5 | .democrat { float: left; } .republican { float: right; } .third-party { visibility: hidden; } |
From @phallstrom
神
1 2 3 4 | .God { position: absolute; display: none; } |
From Jp Malkrovi
まとめ
CSS Humorには、このほかにも思わず「うまい!」と唸ってしまうCSS設定が多数載っています。
WEB制作中、ちょっと疲れてしまった時などに、気晴らしにこういったCSSユーモアを考えてみるのも良いかもしれません。
おもしろいですね!