background-clip: text; を使ってグラデーションをアニメーションさせて、文字が光沢しているように見せる テクニック CSS Shimmer Text Effect

CODEPEN LOGO
このエントリーをはてなブックマークに追加
PR

CSS Shimmer Text Effect
By redouglas

http://codepen.io/redouglas/pen/gobsm

CSS Shimmer Text Effect

文字に背景画像を割り当てる background: text;を使い、文字に背景として設定してあるグラデーションを表示させています

それをアニメーションさせることで、光が走ったかのような演出をしています

残念ながらIEでは対応していので動作しません
IEではアニメーションの演出が無く、ただ単に見づらいコントラストの文字になってしまっているので実用には色の工夫などが必要そうです

PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)