テキストに影をつけるtext-shadowプロパティ

CSSのtext-shadowプロパティを使うと、簡単にテキストに影をつけることができます。
サポートブラウザはSafari、FF3.5、Operaなどです。IEには効かないので、モダンブラウザ用に“おまけ”として使用するのがいいかもしれません。IEの場合、filterを使用して実現が可能です。

基本的な使い方

text-shadowプロパティを使います。プロパティは左から “X座標・Y座標・ぼかし具合・色” となります。

h1 {
 color:#F30;
 text-shadow: 2px 2px 3px #999;
}

それでもIEで使いたい場合

IEの場合、filterを利用しますが、かなりクセがあるので要注意です。
まずwidthプロパティが必須です。autoやinheritは効きませんので、pxや%など、数値で入力する必要があります。さらに、color部分を3桁省略(例:#999など)ができません。
左から “色・X座標・Y座標・通常表示” となります。Positiveの値をfalseにすると影が反転します。
text-shadowと併用する場合はwidthを使わなければいけない関係でハックを使用した方がいいかもしれません。

h1 {
 color:#F30;
 filter: DropShadow(Color=#999999, OffX=2, OffY=2, Positive=true);
 width:100%;
}

サンプルファイルをダウンロード

Jimdo

オススメ書籍

10日でSEO&アクセスアップ Jimdoデザインブック

かっこいいだけではなく、人が集まるホームページを作る!

「Jimdo」(ジンドゥー)でのホームページの作成方法と運用方法を解説した書籍。解説記事を順番に読み進めて行くことで、Jimdoを使ったホームページの作成・運用・宣伝・集客の基本を、10日間で習得するのが本書のコンセプトです。12章構成の解説の中で、Jimdoの基本操作とホームページの作成、デザインとコンテンツ(内容)のレベルアップ、そしてSEOやリスティング広告を含む宣伝・集客の基本を解説しています。

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA


ABOUTこの記事をかいた人

株式会社マジカルリミックス 代表取締役CEO/JimdoExpert 宮城県出身。コンピューター系の専門学校を卒業後、仙台のデザイン会社に入社。 Webサイトのデザイン・コーディングをはじめとし、各種デジタルメディアのデザインに従事。2002年退職後すぐにマジカルリミックスを創業。2007年に法人化で株式会社マジカルリミックスを設立。Webサイト運用に関するコンサルティング、社内向けITトレーニング、セミナー出演、執筆など。2005年から仙台の専門学校で、非常勤講師としてWeb制作講義を担当。 主な著書に『10日で作るかっこいいホームページ Jimdo(ジンドゥー)デザインブック』(エムディエヌコーポレーション)『HTML5+CSS3の新しい教科書 基礎から覚える、深く理解できる。』(共著、同)『基礎から覚える、深く理解できる。Webデザインの新しい教科書』(同)。