多少複雑なデザインでも、画像や JavaScript には頼らず、CSS で実現させる。そこにはもはや手軽さなどは存在しない。あるのは男のロマン。
https://speakerdeck.com/ixkaito/bian-tai-de-css-torituku
ということで、「変態的CSSトリック」が流行っているようなので、JavaScriptや画像を使わない変態的なCSSテクニックを探してみました。何を持って変態的とするかは個人の性癖によるところが大きいので、あくまでも主観ですが。
CSS counterで数字を計算
実はCSS 2からあるcounter系のプロパティ。順番に番号を振れる便利なプロパティですが、意外とマイナーな存在では？ 次のデモは、リンクの数だけページネーション番号を自動的に付与するもの。うん、便利ですね。
え、でもこれだとノーマルっぽい？ じゃあこちらでどうでしょう。
ぽちぽちと選んでいくと値が足し算されて結果が表示されます。なぜCSSでやる必要があるのかよくわかりませんが、変態ですね。
参照：http://codersblock.com/blog/fun-times-with-css-counters/
CSSだけで縦列駐車
ページ下部のステッパーをクリックするとシルバーのクルマが動き出す、縦列駐車のアニメーション。とってもなめらかに動きますし、もちろんクルマ自体もCSSで描かれています。
なぜ縦列駐車？ だから何なの？ といわれればそれまでですが……変態ですね。
ここまで作れる！CSSローディングアイコン
ローディングアイコン（イメージローダー）はネタの宝庫です。趣味と実益を兼ね備えた変態的なコードが山ほどあります。
この指が動くアニメーションもすごいですが、個人的にかっこいいと思ったモノをいくつか。
おなじみのSlack風のもの。
ボックスがくるっとかっこよく回るアニメーション。レイヤー構造がかっこいい。
ローダーとはちょっと違いますが、ほぼ同じ原理で作れるタイマーもあります。
かっこよすぎる3D風グラフ
見た目にかっこいい3D風グラフ（正確にはプログレスバー）も、CSSのtransformやperspectiveで。ボタンをクリックすると、アニメーションしながらグラフの色や値が変わります。……変態ですね。
ちなみに縦バージョンもあります。こちらもかっこいい。
CSSで太陽系を描く
CSSで太陽系を描いたデモ。いや確かにスゴいけど、CanvasとかWebGL使えばいいのに…。変態ですね。
（おまけ）リンク切れ画像をおしゃれに変身
最後におまけ。ブラウザーによってはaltテキストを表示するだけでわかりにくい、リンク切れ画像をわかりやすくいい感じに表示するテクニック。なんだか実用的すぎるような気がするので、変態というよりはマニアックネタですかね。
あなたの知っているもっとすごいCSSトリック、@wpj_newsまたは#変態的CSSでぜひ教えてください！
▼こんな記事もよく読まれています▼
Flexboxよりも新しい！CSSレイアウトの最新仕様Grid Layout を先取りしよう
まだ手動でやってない？UIテストを爆速で自動化できるNightwatch.jsが便利すぎ
