creatersnest108

【コピペで使える】CSS3でデザインされたテキストエフェクトのソース30選


最近では多くのブラウザでCSS3に対応できるようになってきました。
そのため今までは用意した画像でしかデザインできなかったエフェクトが、
CSSの記述でできるようになりました。

そこで今回は、CSS3で実現できる様々なテキストエフェクトを紹介します。
コードも合わせて紹介しますので、コピペですぐに実装できます。

シャドウ

テキストに影を付けます。

css_effect

グローテキスト

文字の周りに光を当てたような効果です。

css_effect2

エンボス

エンボス加工してあるような効果です。

css_sample3

ピローエンボス

ピローエンボス加工してあるような効果です。

css_sample16

フロートエンボス

文字が浮き上がっているような効果です。

css_sample22

凹型テキスト

文字を凹ませる効果です。

css_sample17

凸型ボーダー

文字を凸型にする効果です。

css_sample18

レタープレス

レタープレスの効果です。

css_sample5

クーポン

ネットでよく見かけるクーポン券のようなデザインです。

css_sample6

ステッチ

ボックスのふちに縫い目をつけて、縫い物のパッチを当てたようなデザインです。

css_sample7

ぼかし

文字にぼかしを入れます。

css_sample8

3D

テキストシャドウを複数使えば、3Dのような効果が出せます。

css_sample9

ネオン

テキストシャドウ組み合わせてネオンの効果をだします。

css_sample10

文字が燃えている効果を出します。

css_sample11

グラデーション

文字にグラデーションをかけます。

css_sample12

斜め

文字を斜めにする効果です。

css_sample13

グロス

グロス効果を出すエフェクトです。

css_sample15

タイポグラフィー

タイポグラフィーの効果を出します。

css_sample19

インパクトのあるテキストシャドウ

css_sample20

回転するナビゲーション

くるくる回転するテキストです。画像は使いません。

css_sample21

文字を開くエフェクト

文字にマウスを合わせるとパタッと開く効果です。

css_sample27

ボールが跳ね上がるようなエフェクト

文字が順番に消えたり浮かび上がったりする効果です。

css_sample29-1 css_sample29-2

Cosmos

文字が円を描きながら周ります。

css_sample30

文字が煙で隠れてしまうような効果です。

css_sample31

光るテキスト

テキストが光る効果を出します。

css_sample32

ヴィンテージ風スタイル

日本語をヴィンテージ風にします。

css_sample23

 ストローク状スタイル

日本語をストローク状にします。

css_sample24

プレス風スタイル

日本語をプレスしたような効果です。

css_sample25

 3D風スタイル

日本語を3D効果でスタイルします。

css_sample26

テキスト選択したときの色を変更する

マウスでテキストを選択したときの色を変更します。

css_sample28

 

まとめ

今回は主にテキストシャドウやボックスシャドウプロパティを使用したエフェクト効果を紹介しました。
その他にもアニメーション等、少し高度なテクニックも紹介しています。
画像をつかわずに、これだけのエフェクトが実現できるのは便利ですね。

CSS3はまだ全てのバージョンのブラウザに対応していませんが、
今後対応されていく時の為にサイト作成に取り入れてみてはいかがでしょうか。

 

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


Next Article【CSSでの余白デザイン】marginとpaddingの正しい使い方