![](https://res.cloudinary.com/zenn/image/upload/s--nKj-RuJL--/co_rgb:222%2Cg_south_west%2Cl_text:notosansjp-medium.otf_37_bold:Kite%2Cx_203%2Cy_98/c_fit%2Cco_rgb:222%2Cg_north_west%2Cl_text:notosansjp-medium.otf_70_bold:%25E5%258A%25A0%25E5%25B7%25A5%25E3%2581%25AA%25E3%2581%2597%2520CSS%2520%25E3%2581%25AE%25E3%2581%25BF%25E3%2581%25A7%25E7%2594%25BB%25E5%2583%258F%25E3%2581%25AB%25E3%2582%25B0%25E3%2583%25AA%25E3%2583%2583%25E3%2583%2581%25E3%2581%25A8%2520RGB%2520%25E3%2581%259A%25E3%2582%2589%25E3%2581%2597%25E5%258A%25B9%25E6%259E%259C%25E3%2582%2592%25E3%2581%258B%25E3%2581%2591%25E3%2582%258B%2Cw_1010%2Cx_90%2Cy_100/g_south_west%2Ch_90%2Cl_fetch:aHR0cHM6Ly9saDMuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2EtL0FPaDE0R2dVd0RFM2dGcXRNYjJpUmRMLWxEaHNwdjgzaVBjSG9ZZEpRX0hKWlE9czgwLWM=%2Cr_max%2Cw_90%2Cx_87%2Cy_72/v1627274783/default/og-base_z4sxah.png)
加工なし CSS のみで画像にグリッチと RGB ずらし効果をかける
ARANK
はじめに以下のツイートが500いいねを超えましたので解説記事を書きます。 に完成品のデモとソースコードを置いてあります。ずっと観ていると気分が悪くなる恐れがあるのでご注意ください。グリッチとは元々は「一過性の障害」という意味ですが、映像の世界ではしばしば「映像の乱れ」という意味で用いられます。ホラーやサイバーなどでよく見られる演出の一つです。 ずらしとは色収差、RGB シフト、RGB split (RGB 分割) など、さまざまな言い方がありますが、要するに本来光の三原色である Red、Green、Blue がズレることなく重なって映像を映し出すところ、それがズレた状態で表示されることです。グリッチエフェクトと一緒に用いたり、場合によっては色ズレも含めてグリッチと言ったりしますので、今回も合わせて実装することでよりグリッチ感が出ると思います。実装コンテナ要素html<div class="glitch" style="background-image: url(...);"> </div> 要素のインラインスタイルでグリッチ効果をかけたい画像を background-image として指定します。後述、画像を RGB に分割するときに何度も画像 URL を記述しないで済むために background-image を使います。CSS で背景…
2 comments
これすげー…
かっこいいな、こういうのも出来るんだCSSって
これやってみよ