C S S

MATEREATE CONTENTS

SNSシェアボタンのデザイン&エフェクトイメージ
SNSアイコン

下からアイコンが現れ背景色が変化するSNSシェアボタン

ホバーエフェクトにより、背景色が変化するおしゃれなデザインのSNSアイコンの無料Web素材です。アイコンが上に消え、下から新たに現れながら、背景色がグレー色から各種SNSのメインカラーへと変化します。グレー色から鮮やかに各メインカラーへと変化するおしゃれなSNSアイコン素材となっております。

文字が煙のように消えるテキスト素材のイメージ
エフェクトテキスト

文字が煙のように消えていくクールなエフェクトのテキスト

文字にマウスを置くと、文字が煙のように消えていくようなエフェクトがかかるテキストの無料Web素材です。CSSのみ使用のエフェクトとなり、気軽に使用できると思います。マウスホバーでふわぁっとゆっくり消えていく印象的なエフェクトのため、とても魅力的なテキスト素材となっております。

スライド表示するギャラリー素材のデザイン
ギャラリー

上から新たな画像がスライドしながら表示されるギャラリー

サムネイル画像をクリックすると、その画像が上からスライドしながら表示されるイメージギャラリーの無料Web素材です。スッキリとしたデザインのため、イメージ画像の使用頻度が高めのサイトなどに向いていると思います。クリックするだけで画像が閲覧できる便利なギャラリー素材となっております。

SNSシェアボタンのデザインイメージ
SNSアイコン

背景色が変化しアイコンが回転するSNSシェアボタン

マウスを置くとアイコンにエフェクトがかかるおしゃれなSNSアイコンの無料Web素材です。背景色が左側から徐々に変化し、アイコンが縦軸を中心にくるくると回転するエフェクトがかかります。非常にユニークでおしゃれなSNSアイコン素材となっております。

イメージ素材のエフェクトイメージ
画像表示

ぼやけている画像がはっきり表示されるイメージエフェクト

画像をぼかして表示してあり、マウスを置くことではっきりと表示されるイメージエフェクトの無料Web素材です。イメージ写真を表示するときなど、ちょっとしたエフェクトを加えることで、より印象を与えることができると思います。画像閲覧をちょっとワクワクさせる…。そんなイメージエフェクト素材となっております。

バウンドテキストのデザイン
アニメーションテキスト

一文字ずつバウンドし色が変化するアニメーションテキスト

テキストが一文字ずつバウンドし、色が変化するアニメーションをするテキストの無料Web素材です。リズムよく順にバウンドしていくため、ポップなデザインのテキストとなっております。ユニークで目立つアニメーションをするため、サイト閲覧者の目に止まり、インパクトを与えることができると思います。

アコーディオンフルスクリーンナビのデザイン
フルスクリーン

シンプルなアコーディオン形式のフルスクリーンナビ

項目をホバーするとアコーディオン形式でエフェクトがかかるフルスクリーンナビの無料Web素材です。項目のテキストを90度傾けたデザインにし、マウスを置くとホバーエフェクトによりテキストが回転するデザインとなっております。とても印象的なエフェクトでインパクトのあるフルスクリーンナビ素材となっております。

アニメーションボタンのデザインイメージ
アニメーションボタン

ボーダーがアニメーションしながら四隅から現れるボタン

ボタンの四隅からアニメーションしながらボーダーが現れるボタンの無料Web素材です。一定のアニメーションを繰り返すので、サイト閲覧者の目を惹くことができると思います。シンプルなデザインながらも、魅力的な動きのあるアニメーションボタンとなっております。

浮かび上がるテキストのデザイン
エフェクトテキスト

ホバーすると重なっている文字が浮かび上がるテキスト

ホバーエフェクトにより、重なっている文字が浮かび上がるテキストの無料Web素材です。テキスト部分をマウスホバーすることで、3つの同じ文字が立体的に浮かび上がります。見た目は普通のテキストが、一気にアクセントの効いたデザインへと変化するので、サイト訪問者に印象を与えることができると思います。

フルスクリーンスライドショーのデザイン
スライドショー

フルスクリーンで画像が表示されるスライドショー

CSSのみ使用!!常にフルスクリーンで画像を表示するスライドショーの無料Web素材です。パソコン画面では横に長い画像を表示し、スマホ画面では縦に長い画像を表示するようになっております。表示されている画面全ての範囲を使用し、画像をスライド表示させることができるため、サイト閲覧者により印象を与えることができると思います。

コンタクトフォームのデザインイメージ
コンタクトフォーム

入力時に枠の色が変化するシンプルなコンタクトフォーム

文字入力時に入力欄の枠の色が変化するシンプルなデザインのコンタクトフォームの無料Web素材です。入力中の枠の色が変化するため、入力欄が分かりやすく表示されます。シンプルなデザインながらもアクセントのあるコンタクトフォーム素材となっております。

トグルボタンのデザインイメージ
トグルボタン

スイッチ内の背景が変化するシンプルなトグルボタン

ボタンをクリックすると、スイッチ内の背景の色が変化するトグルボタンの無料Web素材です。CSSのみで作成しているため、気軽に実装できます。クリックする度に背景の色も切り替わるため、ON/OFFの切り替わりが分かりやすいトグルボタン素材となっております。

アウトラインテキストのデザイン
デザインテキスト

縁取りされたアウトライン表示のデザインテキスト

縁取りされたアウトライン表示のようなデザインのテキストの無料Web素材です。画像を使用してデザインしがちな縁取りテキストをCSSのみで表現しています。そのためWebパフォーマンスにも優しく、SEOにも効果的な素材となっております。

検索ボックスのデザインイメージ
検索ボックス

ホバーで入力欄が出現するオシャレな検索ボックス

アイコンをホバーすると、横に大きく伸びる演出をし、入力欄が出現する検索ボックスの無料Web素材です。デザインをアイコンのみで表示しているためサイト表示の邪魔になりにくく、必要な時に検索欄を呼び出せる便利な素材でございます。ホバーエフェクトにより少しアクセントの効いた検索ボックスとなっております。

チェンジイメージカードのデザイン
イメージカード

マウスを置くと画像が切り替わるイメージカード

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

ひっくり返るinfoボックスのデザイン
お知らせ欄

ホバーでボックスがひっくり返り内容が見えるお知らせ欄

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

フロートテキスト素材のアニメーションイメージ
アニメーションテキスト

文字が浮いたり沈んだりを繰り返すテキスト

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

エフェクトボタンの通常時とホバー時のデザイン
エフェクトボタン

丸みを帯びた形に変化し文字の間隔が広がるボタン

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

ギャラリー素材のデザインイメージ
ギャラリー

束ねた写真をズラすエフェクトで表示するギャラリー

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

コンテンツボックスの全てのデザインイメージ
コンテンツボックス

タイトルが下に移動し内容が見えるコンテンツボックス

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

スクロールアイコンのデザインのイメージ
スクロールアイコン

フェードイン&アウトしながら表示されるスクロールアイコン

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

3Dボタンの全てのエフェクトイメージ
3Dアニメーション

ホバーすると下からキューブ状に回転するボタン

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

ページリンクアイコンのデザインイメージ
ページリンク

クルクルと縦軸を中心に回転し裏側が表になるアイコン

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

ティッカーテキスト素材のアニメーションイメージ
アニメーションテキスト

文章が常に右から左へ流れていくティッカーテキスト

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

素材反映のご依頼

MATEREATE CONTENTS

ダウンロードして実装したけど、うまく反映しない…

素材を自身のサイトにも実装したいけどWebコーダーが不在のため、実装して欲しい…

そんな方はぜひお気軽にお申し付けください。


無料お見積り後、コードを整理した上で実装・反映いたします。