加工なし CSS のみで画像にグリッチと RGB ずらし効果をかける

はじめに 以下のツイートが500いいねを超えましたので解説記事を書きます。 デモ＆ソースコード CodePen に完成品のデモとソースコードを置いてあります。 グリッチとは 元々は「一過性の障害」という意味ですが、映像の世界ではしばしば「映像の乱れ」という意味で用いられます。ホラーやサイバーなどでよく見られる演出の一つ。 https://www.google.com/search?q=glitch&tbm=isch RGB ずらしとは 色収差、RGB シフト、RGB split (RGB 分割) など、さまざまな言い方がありますが、要するに本来光の三原色である Red、Green、Blue がズレることなく重なって映像を映し出すところ、それがズレた状態で表示されることです。 グリッチエフェクトと一緒に用いたり、場合によっては色ズレも含めてグリッチと言ったりしますので、今回も合わせて実装する

[youichirou]

CSSでこんなことまでできるように規格作ってその通り実装してバグらせないブラウザ開発者すげーっていつも思う。

[otchy210]

background: inherit; で画像を増殖させる(？)の目から鱗だった。ʕ•̫͡•ʕ•̫͡•ʔ•̫͡•ʔ•̫͡•ʕ•̫͡•ʔ•̫͡•ʕ•̫͡•ʕ•̫͡•ʔ•̫͡•ʔ

[kuzumaji]

ほへー、なんかもうAfterEffectsとかの映像ソフトのタイムライン処理をそのままCSS上で再現するためのコードみたいだなぁ。やってることExpression制御だし。

[mumei-0]

「グリッチ」という言葉を学んだ。

[Nyoho]

こんなことができるのか……すごい

[ys0000]

いいのか悪いのかはおいといてすげーなと思う。悪いの意味は誰がやるべき（プログラマー or デザイナー）が曖昧になるのはよろしくないなという意味で。誰でも簡単に出来るならいいけどね。

[pero_pero]

解説読むと理解できるけど、こういうのができそうじゃね？ってひらめくのがすごい

[raimon49]

面白いなぁ。

[UDONCHAN]

へー面白い

[side_tana]

すげ

[t_motooka]

こういう発想、素晴らしい。

[casm]

良いなこれ。チャンネル分け応用したらブラウン管作れそう。／乱数？と思ったらSCSSというのがあるのね。不勉強だった…。

[miragestlike]

すごい

[iku-sawa11]

天才だな

[mayumayu_nimolove]

すごい。新しい。

[rizenback000]

すんげえ

[spark7]

#f00と乗算すればrチャンネル取り出せるのか。svgフィルタに意識が行ってシンプルに気づかんかった。

[onesplat]

これはすごい

[bboy_kanon]

“つ。 ”

[AKIMOTO]

面白いなあ

[kijtra]

個人的には使うことはないと思うけど、すごくいいじゃない。

[mohritaroh]

グリッチした画像をずっと見てると、その下にあるシンタックスハイライトされたソースコードまでグリッチして見えてくる