おいでませ変態CSSの入り口へ

**[TOWN Advent Calendar 2018](https://qiita.com/advent-calendar/2018/town)** へ2回目の投稿です。

平成を少し振り返るようですが、かつてのFlash全盛期時代が大好きでした。その延長の感覚で、CSS/JSの変態表現を[CodePen](https://codepen.io/)で見たり試したりするのが趣味です。

自分が試しているものは実用性との境目にいるような変態度がまだまだ低いものばかりですが、変態CSS入門な表現をいくつか紹介します。

## 3D表現

<p data-height="600" data-theme-id="5973" data-slug-hash="YGQrOd" data-default-tab="result" data-user="KazuyoshiGoto" data-pen-title="CSS3D基本" class="codepen">See the Pen <a href="https://codepen.io/KazuyoshiGoto/pen/YGQrOd/">CSS3D基本</a> by Kazuyoshi Goto (<a href="https://codepen.io/KazuyoshiGoto">@KazuyoshiGoto</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

初っ端からCSSでやる必要ある？って最たるものの3D表現です。CSSでやる必要性ゼロです。素直にJavaScriptの3D系ライブラリ使った方が自由度もパフォーマンスも高いです。

以下の記事で基礎的な解説をしています。

- [CSSだけで作る3D表現入門](https://qiita.com/KazuyoshiGoto/items/72905b62c9a56807d892)


## 3Dギャラリー

<p data-height="450" data-theme-id="5973" data-slug-hash="sbgwv" data-default-tab="result" data-user="KazuyoshiGoto" data-pen-title="CSS only 3D Gallery" class="codepen">See the Pen <a href="https://codepen.io/KazuyoshiGoto/pen/sbgwv/">CSS only 3D Gallery</a> by Kazuyoshi Goto (<a href="https://codepen.io/KazuyoshiGoto">@KazuyoshiGoto</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

3D表現を応用するとこんな感じです。 Minecraft的な[ボクセル表現](https://codepen.io/KazuyoshiGoto/details/PGjmdp)なら力技でわりと簡単にできます。

## JS不使用モーダルウィンドウ

<p data-height="400" data-theme-id="5973" data-slug-hash="eygjpV" data-default-tab="result" data-user="KazuyoshiGoto" data-pen-title="CSS Only Modal window" class="codepen">See the Pen <a href="https://codepen.io/KazuyoshiGoto/pen/eygjpV/">CSS Only Modal window</a> by Kazuyoshi Goto (<a href="https://codepen.io/KazuyoshiGoto">@KazuyoshiGoto</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

隠れたチェックボックスの `:checked` で表示を切り替えてるモーダルウィンドウ。CSSだけでもちゃんと開閉できます。
一見実用的そうで、普通にJS使った方が楽だし便利。

## 変形iframe

<p data-height="500" data-theme-id="5973" data-slug-hash="kHIpz" data-default-tab="result" data-user="KazuyoshiGoto" data-pen-title="mobile demo" class="codepen">See the Pen <a href="https://codepen.io/KazuyoshiGoto/pen/kHIpz/">mobile demo</a> by Kazuyoshi Goto (<a href="https://codepen.io/KazuyoshiGoto">@KazuyoshiGoto</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

iframe を transform させて遠近感を付けて実際のサイトをハメコミ合成。

表現的には実用性あると思うのですが他であまり見ません。とはいえ自分も業務で実践したこと無いし今どきiframeなんか使わんよ、という感じでしょうか。

## 画像の継承

<p data-height="386" data-theme-id="5973" data-slug-hash="roxZPB" data-default-tab="result" data-user="KazuyoshiGoto" data-pen-title="background inherit test 2" class="codepen">See the Pen <a href="https://codepen.io/KazuyoshiGoto/pen/roxZPB/">background inherit test 2</a> by Kazuyoshi Goto (<a href="https://codepen.io/KazuyoshiGoto">@KazuyoshiGoto</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

最近気づいたんですが背景画像は `inherit` で継承できます。

上記の例は、単にドロップシャドウをするのではなく `:after` 疑似要素に背景を `inherit` してボカした少し変わり種のビジュアル表現です。

かなり限定的な用途ですが、継承を正しく使えば `:before` `:after` 擬似要素に動的に背景を付けられることができます。　ビジュアル表現的に割と実用性あって変態度低め。

## テキストマスク

<p data-height="300" data-theme-id="5973" data-slug-hash="XMQMdP" data-default-tab="result" data-user="KazuyoshiGoto" data-pen-title="CSS3 Text Mask" class="codepen">See the Pen <a href="https://codepen.io/KazuyoshiGoto/pen/XMQMdP/">CSS3 Text Mask</a> by Kazuyoshi Goto (<a href="https://codepen.io/KazuyoshiGoto">@KazuyoshiGoto</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

`background-clip` プロパティ一つでできちゃうので変態度ありません。
「テキストでマスクする」という用途の限定的なステータスをよく作ったもんだなと思います。

## スポットライト

<p data-height="400" data-theme-id="5973" data-slug-hash="gvzMZK" data-default-tab="result" data-user="KazuyoshiGoto" data-pen-title="CSS Spotlight" class="codepen">See the Pen <a href="https://codepen.io/KazuyoshiGoto/pen/gvzMZK/">CSS Spotlight</a> by Kazuyoshi Goto (<a href="https://codepen.io/KazuyoshiGoto">@KazuyoshiGoto</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

CSSでページ全体を覆うレイヤーに透過する円形グラデーションを作り、その中心点をカーソルにするようJSで調整してます。

Webサービス初回利用時のチュートリアルでUIを注目させるのに使えそうなので結構実用的。

## 0件表示

<p data-height="400" data-theme-id="5973" data-slug-hash="GXaVqE" data-default-tab="result" data-user="KazuyoshiGoto" data-pen-title="CSS :empty Test" class="codepen">See the Pen <a href="https://codepen.io/KazuyoshiGoto/pen/GXaVqE/">CSS :empty Test</a> by Kazuyoshi Goto (<a href="https://codepen.io/KazuyoshiGoto">@KazuyoshiGoto</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

上記サンプルのxアイコンをクリックしてリストをすべて消してみてください。

リストが0件になると「List is Empty」と表示されます。これはCSS3のセレクタ `:empty` を使い表示しています。

一見実用性あるようで、実際のところ0件表示をCSSだけでやるかというと、まぁ…ね？
`:empty` もこうした機能的な用途ではなく、状況としてありえる空の状態で最低限崩れないよう対処するための要素だと思います。

## まとめ

変態CSSというより実用性低いCSS表現サンプルみたいな一覧でしたが、自分としてはこうした制限ある中での表現の模索は結構楽しいです。

一部界隈で伝説の**[JS不使用・CSSだけでワニワニパニックを作るようなド変態](https://codepen.io/geckotang/pen/wLXZvr)**には敵いませんが、こんな変態たちの世界があるんだなぁと心に留めて頂けたら幸いです。

メリークリスマス🎅 ＆ 良いお年を🌅