TOWN Advent Calendar 2018 へ2回目の投稿です。
平成を少し振り返るようですが、かつてのFlash全盛期時代が大好きでした。その延長の感覚で、CSS/JSの変態表現をCodePenで見たり試したりするのが趣味です。
自分が試しているものは実用性との境目にいるような変態度がまだまだ低いものばかりですが、変態CSS入門な表現をいくつか紹介します。
3D表現
See the Pen CSS3D基本 by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.
初っ端からCSSでやる必要ある？って最たるものの3D表現です。CSSでやる必要性ゼロです。素直にJavaScriptの3D系ライブラリ使った方が自由度もパフォーマンスも高いです。
以下の記事で基礎的な解説をしています。
3Dギャラリー
See the Pen CSS only 3D Gallery by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.
3D表現を応用するとこんな感じです。 Minecraft的なボクセル表現なら力技でわりと簡単にできます。
JS不使用モーダルウィンドウ
See the Pen CSS Only Modal window by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.
隠れたチェックボックスの :checked で表示を切り替えてるモーダルウィンドウ。CSSだけでもちゃんと開閉できます。
一見実用的そうで、普通にJS使った方が楽だし便利。
変形iframe
See the Pen mobile demo by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.
iframe を transform させて遠近感を付けて実際のサイトをハメコミ合成。
表現的には実用性あると思うのですが他であまり見ません。とはいえ自分も業務で実践したこと無いし今どきiframeなんか使わんよ、という感じでしょうか。
画像の継承
See the Pen background inherit test 2 by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.
最近気づいたんですが背景画像は inherit で継承できます。
上記の例は、単にドロップシャドウをするのではなく :after 疑似要素に背景を inherit してボカした少し変わり種のビジュアル表現です。
かなり限定的な用途ですが、継承を正しく使えば :before :after 擬似要素に動的に背景を付けられることができます。 ビジュアル表現的に割と実用性あって変態度低め。
テキストマスク
See the Pen CSS3 Text Mask by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.
background-clip プロパティ一つでできちゃうので変態度ありません。
「テキストでマスクする」という用途の限定的なステータスをよく作ったもんだなと思います。
スポットライト
See the Pen CSS Spotlight by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.
CSSでページ全体を覆うレイヤーに透過する円形グラデーションを作り、その中心点をカーソルにするようJSで調整してます。
Webサービス初回利用時のチュートリアルでUIを注目させるのに使えそうなので結構実用的。
0件表示
See the Pen CSS :empty Test by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.
上記サンプルのxアイコンをクリックしてリストをすべて消してみてください。
リストが0件になると「List is Empty」と表示されます。これはCSS3のセレクタ :empty を使い表示しています。
一見実用性あるようで、実際のところ0件表示をCSSだけでやるかというと、まぁ…ね？
:empty もこうした機能的な用途ではなく、状況としてありえる空の状態で最低限崩れないよう対処するための要素だと思います。
まとめ
変態CSSというより実用性低いCSS表現サンプルみたいな一覧でしたが、自分としてはこうした制限ある中での表現の模索は結構楽しいです。
一部界隈で伝説の**JS不使用・CSSだけでワニワニパニックを作るようなド変態**には敵いませんが、こんな変態たちの世界があるんだなぁと心に留めて頂けたら幸いです。
メリークリスマス🎅 ＆ 良いお年を🌅