background-20870_640

素敵なフォントを見つけては、使ってみるのですがどうも使い方が一辺倒でそのまま使ってしまうことが多いような気がします。

これを見つけたときは、はっ!!となる思いがしました。

CSS とは Cascading Style Sheets(CSS、カスケーディング・スタイル・シート、カスケード・スタイル・シート)とは、HTML や XML の要素をどのように修飾(表示)するかを指示する、W3Cによる仕様の一つ。文書の構造と体裁を分離させるという理念を実現する為に提唱されたスタイルシートの、具体的な仕様の一つ。

自戒の念を込めましてもう一度書いておきたいと思います。

どうしても、綺麗にそつなくといいますか、、遊び心がないといいますか。 上の言葉を借りるならば、どのように装飾するかというところの部分。

なぜ?そのタグを使用しているのかという思いをCSSを使って表現していかないといけないなと改めて思いました。

CREATIVE WEB TYPOGRAPHY STYLES

CSSのテクニックと書きましたが、CSSだけでなくlettering.jsも使って表現しています。

EXAMPLE 1

ホバーすると、文字が上下に分かれ中から文字が出てきます。

デモ:EXAMPLE 1

EXAMPLE 2

斜めになっている文字が、ホバーすると正面を向きます。

デモ:EXAMPLE 2

EXAMPLE 3

ギミック的なものは、ないのですがガーリーな感じがとても可愛らしいです。

デモ:EXAMPLE 3

EXAMPLE 4

シャドウのずれがとても素敵です。

デモ:EXAMPLE 4

EXAMPLE 5

使いどころが限られそうですが、タイトルにすると目立っていいかも。

デモ:EXAMPLE 5

EXAMPLE 6

バックの白い部分の重なりがとても綺麗で、素敵です。ホバー時にもエフェクトがかかります。

デモ:EXAMPLE 6

EXAMPLE 7

左からやってきて、ホバーすると文字が広がるように現れるというエフェクトで驚きます。

デモ:EXAMPLE 7

EXAMPLE 8

驚くようなエフェクトなどはないのですが、魅せるタイポグラフィだと思います。

デモ:EXAMPLE 8

ずらーっと並べましたが、どれもこれもこのままでもいいなと思うのですが、ちゃんとホバー時にもいろいろと凝った細工がしてありどれもこれも見ごたえありです。

参照サイト

こちらからサンプルソースもダウンロード出来ます。

ADVERTISEMENT

Author:

follow FacebookPage

当ブログがお気に召しましたら是非いいね!をお願いします!

Follow Me

閲覧頂きありがとうございました:)

Message

トップへ戻る