CSS3 box-shadow プロパティーは、スタイルシートを編集してドロップ・シャドウ効果を追加する新しい方法。Photoshopは不要!
Box-shadowプロパティーは、他のCSSプロパティーと同様、複数の属性/値が必要。これらは次のように特定: box-shadow: Apx Bpx Cpx #XXX:
* Apx - シャドウを水平的にオフセット:右のシャドウには正の値、左のシャドウには負の値;
* Bpx - 垂直的オフセット:上のシャドウを追加するには負の値、boxの下にシャドウを追加するには正の値;
* Cpx - blur radius:シャドウを鋭くするには0の値。数が高くなるほど、よりぼやける;
* #XXX - 色。
次のコードは、CSS3メニューにおける box-shadow の為に作成されました:
-moz-box-shadow:0.7px 1px 1px #777777;
-webkit-box-shadow:0.7px 1px 1px #777777;
box-shadow:0.7px 1px 1px #777777;
これは、box-shadowを 効果を表示しているFirefoxのスナップショット:
Box-shadow は次のブラウザに対応: Webkit (from Safari 3+, Chrome), Opera 10.5, Firefox 3.5.
Text-shadowプロパティーは、対のように使用:
text-shadow:2px 2px 2px #000;
CSS shadowはthree length valueと色が必要。Lengthの値は並行的オフセット、垂直的オフセット、そしてblur。オフセットは正と負の両方可能。
Text-shadow は次のブラウザに対応: Webkit (from Safari 3+, Chrome), Opera 9.5, Firefox 3.1(pre-Alpha), Konqueror.
こちらもご覧ください:
CSS3丸角
CSS3グラデーション
1) CSS3メニュー・ソフトウェアを開く をクリックして、CSS3メニューのツールバー上の、「アイテムを追加」 と 「サブメニューを追加」 ボタンをクリックして、メニューを作成。「アイテムを削除」を使ってボタンを削除可能。
2) すぐに使用可能なテンプレートを使用。」 そのためには、「テンプレート」リストにおいてお好きなテーマを選択してください。お好きなテーマをダブルクリックして適用。
3) メニューの表示を変更。
3.1. アイテムをクリックして選択。ボタンの表示をnormalとhover間で変更、ボタンのリンクのプロパティーを設定、そしてターゲット属性を「メイン・メニュー」タブ上にリンク。
3.2. クリックしてサブメニューのアイテムを選択。サブメニューの表示をnormalとhover間で変更。サブメニューのアイテムのリンクのプロパティーを設定。そしてターゲット属性を「サブメニュー」タブ上にリンク。
4) メニューを保存。
4.1. プロジェクト・ファイルを保存。 プロジェクトを保存するには、ツールバー上の「保存」 ボタンをクリック、もしくはメイン・メニューにおいて「保存」か「名前を付けて保存」を選択。
4.2. HTMLフォーマットにおいてメニューを投稿。 これを行うには、ツールバー上の「投稿」
ボタンをクリック。
CSS3メニュー
トラブルシューティング、機能のご要望、そして一般的なヘルプに関しては、カスタマー・サポートE-mail: までご連絡ください。ブラウザ、OS,CSS3メニューのバージョン、そしてウェブサイトへのリンクの情報を含んでください。
殆どの場合において、1営業日以内に返信いたします。
まず FAQ をお読みになって、ご質問がすでに解決されているかご確認ください。
E-mail: