text-shadowを使ったかわいい、いい感じの簡単なタイポグラフィ 『Close shade example』

Close shade example
このエントリーをはてなブックマークに追加
PR

Close shade example
By Tim Brown

DEMO 表示

SALEという文字に、影を複数指定して作られたものです
文字の色、影のサイズ感もちょうどいい感じ。

デザインの参考になりそうです。

 

文字はレスポンシブで、影もレスポンシブ
サイズにemを使うことでレスポンシブになっています

text-shadowの値はカンマで区切ることで複数設定する事が可能です

 

 

 

text-shadowsが当てられているCSSの部分

.close .title em {
  font-weight: 900;
  font-size: 3.1em;
  color: #e65600;
  text-shadow: 0 0.005em #e9cac7, -0.005em 0 #c9d5db, -0.005em 0.01em #e9cac7, -0.01em 0.005em #c9d5db, -0.01em 0.015em #e9cac7, -0.015em 0.01em #c9d5db, -0.015em 0.02em #e9cac7, -0.02em 0.015em #c9d5db, -0.02em 0.025em #e9cac7, -0.025em 0.02em #c9d5db, -0.025em 0.03em #e9cac7, -0.03em 0.025em #c9d5db, -0.03em 0.035em #e9cac7, -0.035em 0.03em #c9d5db, -0.035em 0.04em #e9cac7, -0.04em 0.035em #c9d5db, -0.04em 0.045em #e9cac7, -0.045em 0.04em #c9d5db, -0.045em 0.05em #e9cac7, -0.05em 0.045em #c9d5db;
}

 

コードをダウンロード

DOWNLOAD
PR

COMMENT

コメントを残す

PR

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

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)