文字の部分をbackground-clip: text;を使って背景をGIF動画にして見せるテクニック

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

Gif Mask
By andrewgbaker

DEMO 表示

 

background-clip: text;を使って、文字を透かして背景を映し出すことが出来ます。背景に画像やパターンを置くことで、背景をうまく使ったテキストのデザインが出来ます。

今回のは、文字の背景にGIF動画を置くことで画像とは違った動きのある背景が効果的です。

ついつい文字のところを見てしまいます。

 

background-clip: text;はまだwebkit系でのみしか動作しません。

正しく見えていない時はChrome等を使って御覧ください

 

コードのダウンロード

DOWNLOAD
PR

COMMENT

コメントを残す

PR

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

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

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

Twitter Facebook Google+ Feedly RSS

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