English Deutsch Español Italiano Русский Svenska 日本語

CSS3 shadow

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


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


Text-shadow は次のブラウザに対応: Webkit (from Safari 3+, Chrome), Opera 9.5, Firefox 3.1(pre-Alpha), Konqueror.

こちらもご覧ください:
CSS3丸角
CSS3グラデーション




ダウンロード



ヘルプ

格好良いアニメーションのCSS3メニューをJavaScript無しで作成する方法

CSS3 Menu gui screenshot

1) CSS3メニュー・ソフトウェアを開く をクリックして、CSS3メニューのツールバー上の、「アイテムを追加」 と 「サブメニューを追加」 ボタンをクリックして、メニューを作成。「アイテムを削除」を使ってボタンを削除可能。

2) すぐに使用可能なテンプレートを使用。」 そのためには、「テンプレート」リストにおいてお好きなテーマを選択してください。お好きなテーマをダブルクリックして適用。

3) メニューの表示を変更。
 3.1. アイテムをクリックして選択。ボタンの表示をnormalとhover間で変更、ボタンのリンクのプロパティーを設定、そしてターゲット属性を「メイン・メニュー」タブ上にリンク。
 3.2. クリックしてサブメニューのアイテムを選択。サブメニューの表示をnormalとhover間で変更。サブメニューのアイテムのリンクのプロパティーを設定。そしてターゲット属性を「サブメニュー」タブ上にリンク。

4) メニューを保存。
 4.1. プロジェクト・ファイルを保存。 プロジェクトを保存するには、ツールバー上の「保存」 ボタンをクリック、もしくはメイン・メニューにおいて「保存」か「名前を付けて保存」を選択。
 4.2. HTMLフォーマットにおいてメニューを投稿。 これを行うには、ツールバー上の「投稿」 ボタンをクリック。



お問い合わせ

CSS3メニュー
トラブルシューティング、機能のご要望、そして一般的なヘルプに関しては、カスタマー・サポートE-mail: Mail までご連絡ください。ブラウザ、OS,CSS3メニューのバージョン、そしてウェブサイトへのリンクの情報を含んでください。
殆どの場合において、1営業日以内に返信いたします。 まず FAQ をお読みになって、ご質問がすでに解決されているかご確認ください。
E-mail: Mail

より多くのテンプレート