text-shadowを使った3D風ロゴを簡単に作れるジェネレータ

タイトルのとおり、CSS3のtext-shadowを使ったロゴを簡単に作れるジェネレータを見つけたので紹介します。

3d-css-text.png

感覚的に操作できるので思いどおりのものが作れるかも。クオリティもかなり高いです。

3D CSS Text Generator

3D-CSS-Text-Generator.png

下のように編集することができます。

3D-CSS-Text-Generator02.png

編集内容についてはこんな感じです。

  • Font ・・・ フォントの種類
  • B ・・・ Bold(フォントを太くする)
  • I ・・・ Italic(フォントを斜めにする)
  • U ・・・ underline(フォントに下線を付ける)
  • Text Color ・・・ テキストカラー
  • Bg Color ・・・ 背景カラー
  • Angle ・・・ 影の角度(45度間隔で指定)
  • Size ・・・ フォントサイズ
  • Height ・・・ 影の長さ
  • Height Gradient ・・・ 影のグラデーション
  • Shadow Opacity ・・・ 影と背景の境目

テキストは直接変更できます。

3D-CSS-Text-Generator01.png

コードはリアルタイムに反映されます。クラス名が数字で始まっていますので、実際使うときは、ローマ字で始まる任意の名前に代えましょう。

3D-CSS-Text-Generator03.png

text-shadowの部分だけ見るとこんな感じです。

text-shadow:
  0px 0px 0 rgb(231,231,231),
  1px 1px 0 rgb(216,216,216),
  2px 2px 0 rgb(202,202,202),
  3px 3px 0 rgb(187,187,187),
  4px 4px 0 rgb(173,173,173),
  5px 5px 0 rgb(158,158,158),
  6px 6px 0 rgb(144,144,144),
  7px 7px 6px rgba(0,0,0,0.6),
  7px 7px 1px rgba(0,0,0,0.5),
  0px 0px 6px rgba(0,0,0,.2);

2行目から8行目は立体感を出すため、9行目と10行目で背景との境目をはっきりさせるため、11行目は滑らかなグラデーションにするためですかね。

適当に触っているだけでも結構面白いのでぜひお試しください。

フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加