Edited at

CSSでチラつき表現

More than 1 year has passed since last update.


背景

わざとちらつかせて古いテレビ的な表現とかかっこいいですよね。

CSSのみでざっくり作ってみました。


結論

こんな感じです。

See the Pen tiratuki tv by hashito (@hashito) on CodePen.


解説


  • 標準の動画はdogaで表現.

  • チラつき①はbefore要素で表現

  • チラつき②はafter要素で表現
    各チラつきは位置とFilterの値が少しずつ違う様になっていて、1%単位で表示したりしなかったりみたいになっています。
    ココらへんの値を変えればもう少しかっこよくなるのかなぁ…


もう少し簡単な書き方


概要

コメントでご指摘を頂いたので、inheritを利用したほうが簡素にかけるらしい…

inheritって?→親要素の計算値を引き継ぐ

親…要素…?そもそもbeforeとかって誰の子要素なんだろう…

ということで少し試してみました。

See the Pen inherit test by hashito (@hashito) on CodePen.

まず、クラスt1で普通の継承の動き。

親要素t1からt1-1t1-1::beforet1-1::afterに引き継がれています。

まず、クラスt2beforeafterへの継承の動き。

t2-1からt2-1::beforet2-1::afterに引き継がれています。

つまり、beforeafterは対象要素の子として動いているようです。

最後に、クラスt3beforeからの継承の動き。

どこにも引き継がれていないことが分かります。

つまり、beforeafterとかっていう親子関係はないということですね。


実装

下記の部分を継承するように変更。

  background-image: inherit;  

width:inherit;
height:inherit;

See the Pen tiratuki tv(inherit) by hashito (@hashito) on CodePen.

こうすると対象要素しか画像に関する情報を入力しなくてすむので、良いですよね!

コメントありがとうございました!