Facebook Twitter Google Maps RSS
Home webサイト CSSで文字を縁取りする
formats

CSSで文字を縁取りする

こんにちは。
陽気なシステム屋の一員のシホンヌです。

最近行っている開発で、

webの画面に画像を置いてその上に文字を乗せてね。
でも、文字がわかりにくくならないように白で縁取ってね。

という仕様のものがやってきました。

たとえばこういう感じです。

お花の画像の上の「切花各種」や「金額」あたりがそれです。

こういう画像をweb上に表示する際は、写真の上に文字が乗った画像を画像処理ソフトで作成したものを使うのかと思っていたので、えーこんなんweb上でできんのー!?と思い調べたら、どうやら「text-shadow」という、文字に影を付けるCSSのプロパティを使えばいいということがわかりました。

でも、影じゃなくて、文字を縁取りたいんだけど…。

縁取らせるための指定方法がよくわからないんだけど…。

と、困っていたところ、ありましたありました。
文字を縁取りにするCSSを発行するツール!

http://css-eblog.com/eblog_sample/1001/text-stroke/

縁取りの幅を入力して「適用」を押すと、コードと表示サンプルが表示されます。
これは便利…!

世の中には開発者に親切なお方がおられて、便利なツールを公開してくださってる方がいらっしゃるんですね・・・。
有難く使わせて頂きます。

また便利なツールを見つけたら紹介します!ではまた!

 

★アプリ開発実績はこちら★

Tags: ,

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*