CSS3 text shadow generator 影付き文字をGoogle Font APIを使って簡単に作成できる

CSS3 text shadow generatorとは?

CSS3 text shadow generatorとは、Google Font APIを使って、影付き文字をプレビューしながら作成できるWebアプリです。

CSS3 text shadow generator フォント 影付き文字

http://www.wordpressthemeshock.com/css-text-shadow/

CSS3 text shadow generatorでは、フォントと効果を選ぶだけで、プレビューした影付き文字のCSSコードを取得できます。

また、Google Font APIを利用しているので、ブラウザやOSに依存することなく、CSS3の影付き文字を表示できます。

CSS3 text shadow generator プレビューしながら影付き文字のCSSコードを取得する

CSS3 text shadow generatorにアクセスしたら、「Type here to change this text」ボックスに、プレビューしたい文字を入力します。

CSS3 text shadow generator フォント 影付き文字 プレビュー

フォントリストには、Google Web Fontが表示されるので、好みのフォントを選びましょう(リストに表示されるのはGoogle Web Fontの一部です)。

また、「Pressed」,「Embossed」,「Neon」など、効果をクリックすると、プレビューが変わります。

気に入ったプレビューが表示されたら、「Get Code」リンクをクリックするとコードが表示されます。

CSS3 text shadow generator フォント 影付き文字 コードの表示

自分のブログのテンプレートなどを開いたら、Google Font APIのスタイルシートへのリンクを、HTMLのhead要素にコピーします。

そして、text-shadowを含むCSSコードを、スタイルを適用したいCSSセレクタにコピーすれば、作成した影付き文字を表示できます。

デベロッパーツールの関連記事一覧 - Webアプリのいいところ

Chrome拡張のいいところ 関連コンテンツ

この記事に対してトラックバックを送信する(FC2ブログユーザー)
http://chromeapp.info/tb.php/317-1dd93c55

0件のトラックバック

0件のコメント

コメントの投稿

投稿フォーム
投稿した内容は管理者にだけ閲覧出来ます

Copyright © 2008-2017 Chrome拡張のいいところ. All Rights Reserved.

スポンサードリンク

Chrome拡張の最新記事

Iconic History Chrome拡張 履歴をファビコンだけでコンパクトに表示する 2017/03/28

Date Highlighter Chrome拡張 Google検索結果で日付だけをハイライトできる 2017/03/21

Download Notify Chrome拡張 ダウンロードの完了をサウンドで通知してくれる 2017/03/14

coordinates Chrome拡張 マウスポインタの座標をツールチップに表示する 2017/03/07

Check my public and private IP addresses Chrome拡張 グローバルIPとローカルIPの両方をひとめで確認 2017/02/28

Case converter Chrome拡張 英字の大文字と小文字をすぐに変換できる 2017/02/24

Memento Mori Chrome拡張 メメントモリを意識するためのリマインダー 2017/02/21

Quick Links Chrome拡張 開いているタブのリンクを一時的に保存できる 2017/02/17

Amazon


Dragon Touch Y88X 7インチ タブレットPC クアッドコア Google Android 5.1 IPS液晶ディスプレイ


Hobest ワイヤレスヘッドフォン 充電用ケース付き ミニステレオBluetoothイヤホン


高速充電多ポートUSb充電器 7ポート多用途

ブログ「Chrome拡張のいいところ」について

おすすめのChrome拡張機能や設定を紹介するブログです。

ご連絡はこちらまでどうぞ
sg.inagaki@gmail.com

RSS Feed