無料Web素材置場 MATERIAL CREATE

画像にマウスを置くと、表示されている画像が別の画像に切り替わるイメージの無料Web素材です。１つの画像表示領域に実質２つの画像を表示することができるので、サイトページのデザインやレイアウトがしやすくなると思います。CSSのみで表現しているため、手軽に実装できるのもこの素材の魅力の１つです。

メニューアイコンをクリックでオシャレにデザインが変化するアイコンの無料Web素材です。３つのバーのうち真ん中のバーが消え、残りの上下のバーで「×」となるアニメーションをします。オシャレにデザインが変化するメニューアイコンで、サイトメニューにアクセントを入れることができます。

ホバーエフェクトによりボックスがひっくり返る演出するオシャレなレイアウトの無料Web素材です。表には記事のタイトルとアイキャッチ画像、裏には日付と記事の概要や抜粋を表示するデザインとなっております。たくさんの情報を限られたスペースに一度に表示できるため、サイト閲覧者にも優しいWeb素材となっております。

メニュー項目にマウスを置くと、それ以外の項目が薄くぼやけるようなエフェクトがかかるナビゲーションの無料Web素材です。CSSのホバーエフェクトを使用し表現しています。ぼんやりと薄くなるエフェクトでサイト訪問者に優しい印象を与えることができます。

文字が浮いたり沈んだりを繰り返すテキストの無料Web素材です。ゆっくりと上下にアニメーションを繰り返し、サイトのページに動きをもたらします。ページのタイトルやコンテンツの見出しなどに使用すると、訪問者の目を引くことができると思います。

ボタンにマウスを置くと背景のデザインが変化し、文字と文字の間隔が広がるボタンの無料Web素材です。ボタンは丸みを帯びたデザインに変化し、背景の色も変化します。文字と文字の間隔も広がる印象的な演出をいたします。シンプルながらもアクセントの効いたエフェクトボタン素材となっております。

当サイトの「束ねた写真をズラしたように表示するイメージカード」の素材を使用した、オシャレなイメージギャラリーの無料web素材です。アクセントの効いたギャラリーページを作成することができます。またレスポンシブ対応で、画像の並び方が各端末に対応した並びとなります。

ホバーエフェクトでコンテンツ内容をオシャレに表示するボックスレイアウトの無料web素材です。表側のデザインが変形しながら下側に移動し、裏側に記載の内容が見えるようになっております。画像使用一切なしのWebパフォーマンスとSEOに効果的なコンテンツボックス素材となっております。

アイコンをクリックするとオシャレなアニメーションで出現するするサイドメニューの無料Web素材です。左側から単に出現するのではなく、左上部分から斜めにシュッと出現するようなアニメーションとなっております。サイトのメニュー(またはサブメニュー)をオシャレに演出いたします。

フェードイン＆アウトのアニメーションを常にしながら表示されるスクロールアイコンの無料Web素材です。画像は使用しておらず、CSSアニメーションのみで表現してあります。オシャレなアニメーションのスクロールアイコンで、ページのスクロール率をあげましょう。

ホバーすると文字と文字の間隔が広がる演出をするテキストの無料Web素材です。シンプルながらもテキストに動きをもたらします。ページのタイトルや項目の見出しにちょっとしたアクセントを加えることができます。

ホバーすると下からキューブ状に回転し、背景と文字の色が変化するボタンの無料Web素材です。全てCSSアニメーションのみで表現しています。シンプルなデザインながら、立体的にアニメーションするので、ちょっとしたインパクトとアクセントを与えることができるボタン素材でございます。

メニュー項目をホバーすると、ホバーしている項目が濃く表示されるナビゲーションの無料Web素材です。CSSのホバーエフェクトのみで表現しています。マウスが乗っていない項目が薄く表示されるため、どの項目を選んでいるのかがわかりやすくなります。フルスクリーン表示の見やすいナビゲーション素材です。

画像の上にマウスを置くと画像が回転し、新たな別の画像が表示されるイメージの無料Web素材です。CSSのホバーエフェクトのみで表現しています。シンプルながらも動きのあるエフェクトで画像や写真をを表示することが可能です。

マウスを置くとボックス全体がズームし、背景色が変化するレイアウトの無料Web素材です。ボックス自体がズームされるため、サイト訪問者にどのコンテンツを見ているかをわかりやすく伝えることができます。画像を使用していないためWebパフォーマンスやSEOにも効果的なレイアウト素材となっております。

ボタンの上にマウスを置くと、フェードイン＆アウトをしながら新たな文字が表示され、全体の色が変化するボタンの無料Web素材です。マウスを離しても同じような演出で元のボタンに戻ります。シンプルながらもアクセントの効いた演出をするため、サイト訪問者に印象を与えることができます。

アイコンの上にマウスを置くと、アイコンが縦の軸を中心にクルクルと回転し、裏側が表になるユニークなアニメーションのアイコンの無料Web素材です。アイコン部分には 「FontAwesome」 を使用しています。目的に沿ったアイコンで任意のページにアクセスさせることができると思います。

文章が右から左へ流れていくティッカーテキストの無料Web素材です。画像は使用しておらず、CSSのみで表現しているので手軽に実装でき、WebパフォーマンスやSEOにも優しい素材となっております。限られたスペースに項目の見出しやページのタイトルを一行で表示することができます。

メニュー項目をホバーで、項目の上下部分に左右からラインが出現するナビゲーションの無料Web素材です。レスポンシブ対応なので、タブレット、スマホでもご使用可能となっております。シンプルながらもちょっとしたアクセントが欲しい…。そんなナビゲーションのWeb素材となっております。

サムネイル画像をホバーすると、メインのイメージボックスにサムネイルの画像が自動で表示されるギャラリーの無料Web素材です。複雑な操作なしにサクッと画像が表示されるので、ストレスなく閲覧しやすくなると思います。製品のイメージ画像を紹介する時や写真のギャラリーサイト等に扱えるWeb素材となっております。

項目をホバーすると、背景の色が変わるシンプルなエフェクトを使用したページネーションのWeb素材です。画像を使用しておらず、CSSのみでシンプルなデザインを表現しております。お知らせやニュースの一覧ページにもちょっとしたアクセントを演出したい時にぜひご活用ください。

画像をホバーすると本のように開き内容が見えるレイアウトボックスのWeb素材です。CSSのみで表現しているので手軽に実装でき、さらにSEOにも優しい素材となっております。本の表紙部分となる画像には、コンテンツのイメージ画像。内容部分にはコンテンツの概要を入れるなど様々な場面で活用できると思います。

インパクトのあるホバーエフェクトとアニメーションを使用したリンクボタン素材です。両サイドに配置された「<>」が180度回転し、四角のボタンが丸みを帯びたボタンに変化します。カラーも「枠→文字の色」、「文字→枠の色」と変化します。その後「><」のバーは横に揺れるアニメーションをします。

自動で３色に変化するテキストのWeb素材です。ただ３色に変化するのではなく、上から下へ、右から左へと多方向に規則的な動きをしながら色が変化していき、以後その動きを繰り返しアニメーションします。サイトタイトルやページタイトル等にアクセントのあるデザインとして、お役立てください。