[DEMO] CSSのみで袋文字を実現する - CSS3で遊んでみる3 | CSS-EBLOG http://css-eblog.com/eblog_sample/1001/text-stroke/ CSS3のtext-shadowとfilter:dropshadowで、わりと強引かもしれませんがテキストの縁を表現できるジェネレータを紹介します。 細かく設定はできませんが、縁の太さを入力してから「適用」ボタンを押すと、CSSのプロパティが生成されます。赤色から変更する場合は、「red」と書かれている場所を「#000000」などに変更すれば色を変えることができます。 IE6でもなんとか表現できてはいますが、影の位置が若干ずれていたりしてしまってますね。 SafariやGoogleChromeはWebKitが使われてますので、テキストの縁用にCSSが用意されています。 [css] /*ふちの太さ*/ -webkit-text-stroke-width:3px; -webkit-text-stroke-color:#FF0000; -webkit-text-fill-color:#FFFFFF; [/css] この設定はスマートフォン用のページだと有効的に使えますが、PC用のページでは、他のブラウザが対応していないため使えないですね。このジェネレータで見る限りでは、問題なくキレイに表現されているように見えます。 Firefoxではうまく動きませんでしたが、実際に表示してみたところ問題なく表示されました。 画像をなるべく使わない。ページ速度もSEOの評価対象といわれていますので、表現の幅をきかせるのであれば、こういったテキストを使うといいとおもいます。 ※検証に使ったブラウザは全て最新のバージョンです。

続きを読む

CSS3は古いブラウザで表示が崩れたりするので、すべてCSS3でコーディングされたWebサイトはなかなかありませんが、iPhoneのSafariやAndroidのChromeではWebKitが採用されているので、スマートフォン用のWebサイトにはCSS3の表現が使われています。今まで画像を使って表現するしかなかったグラデーションやテキストのドロップシャドウなど、画像を使わないことによってページ全体の容量を軽減することができますので、スマートフォン用のWebサイトではどんどんCSS3を活用していったほうがいいですね。 グラデーションやドロップシャドウをCSS3で書くのはちょっとだけ文字数が多く、ちょっと微調整にめんどくさいところがあります。今回は微調整しながら表示確認ができ、CSS3のソースを生成してくれるジェネレータの紹介です。 CSS3プロパティジェネレーター | CSS-EBLOG http://css-eblog.com/eblog_sample/0912/css3-generator/ 設定が終わったらページ右上の「ソースを生成」ボタンを押すとライトボックス風にソースが出てきます。-webkit　-moz　-ms と書かれているところはそれぞれのブラウザのレンダリングエンジンに対しての命令なので、スマートフォン用など限定して使う場合はとっちゃっていいとおもいます。 -webkit はSafari、GoogleChomeに使われているWebKitを指してます。 -moz はMozilla系のGeckoエンジン、Firefoxなどを指してます。 -ms はCSS3が使えるIE9のTridentエンジンを指してます。

続きを読む