CSSのみでテキストを「飾る・動かす」おしゃれなエフェクト10 - コムテブログ

TL;DR ここ最近画像や動画を使ったエフェクトも増えてきましたが、シンプルにテキストだけ動かしたりデコレーションすると結構洗練された見え方になります。もちろん画像や動画の上に動きのある文字を配置しても面白いです。ということで今回は CSS のみで実現するテキストを動かしたり飾り付けたりするコードをまとめました。 透過処理で文字のくり抜き background-clipプロパティは背景の範囲（ボックスモデル・ボーダーボックス・パディングボックス）に表示するか指定します。このプロパティは文字で背景を切り抜くことが可能ですが、-webkit-background-clip: text;と-webkit-text-fill-color: transparent; 指定することによって文字が透明になり、文字下の画像が見え、背景をくり抜いたような形を表現できます。 .foo { -webkit-ba

[o9ra]

css3 animation

[norando]

いい意味でキモい

[otchy210]

スモーキーは久々に「おおっ」ってなった。他はたぶん、類似品を何度もみてる。

[webskillup]

すご、そして実用できそ

[lui-kk]

これは使えそう

[daizo1117]

“使ってマスクをかけています。ちなみに”

[Erl]

やってみたいけど