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

PR

Gif Mask
By andrewgbaker

DEMO 表示

 

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

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

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

 

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

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

 

コードのダウンロード

DOWNLOAD
PR

COMMENT

コメントを残す

PR

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

WDG WEB DESIGN GALLERY ウェブデザインギャラリー