多少複雑なデザインでも、画像や 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風グラフも、CSSだけで。ボタンをクリックすると、アニメーションしながらグラフの色や値が変わります。transformやperspectiveを駆使して描いています。変態ですね。

ちなみに縦バージョンもあります。こちらもかっこいい！