ホーム>HTMLリファレンス(アルファベット検索)>dropshadow フィルタ
dropshadow フィルタ …シャープな影を描く
使用プロパティ
|
filter: dropshadow(属性=値); |
対象となる
要素 |
すべて |
継承 |
しない
|
値 |
次項(属性、値とその効果)を参照してください。 |
|
|
解説
dropshadow フィルタを使えば、要素にシャープな影を付けることができます。
[ 複数の属性値を指定する ]…カンマ「,」で区切ります。 書式→「filter: フィルタ名(属性=値,属性=値);」
[ メモ ]
filter プロパティを div 要素や span 要素に使用する際には、width プロパティや height プロパティで要素の幅や高さを指定する必要があります。ですが、画像などのように幅や高さが決まっている要素には必要ありません。また、position プロパティで「absolute」を指定した要素に対しても必要ありません。
※ filter プロパティは Internet Explorer 独自のプロパティで、対応していないブラウザで表示すると表示が崩れる場合がありますので注意が必要です。
|
属性 |
値 |
効果 |
color
(カラー) |
色名やカラーコード(16進数)などを指定する |
影の色 |
offx
(オフエックス) |
正の整数(右方向)、または負の整数(左方向) |
影の横方向の長さ |
offy
(オフワイ) |
正の整数(下方向)、または負の整数(上方向) |
影の縦方向の長さ |
positive
(プジティブ) |
「true」または「1」は影を反転しない
「false」または「0」は影を反転する |
影を通常通り表示するか、反転させるかを指定できる |
使用例
記述例
<html>
<head>
<title>HOME PAGE ZERO ガイド</title>
</head>
<!--ページの本文-->
<body>
<p>- 元の画像- <br>
<img src="logo.gif" width="172" height="60" alt="サンプル">
</p>
<p>-フィルタ使用後の画像-<br>
<div style="width: 100%; height: 70px; filter: dropshadow(color=gray);">
<img src="logo.gif" width="172" height="60" alt="サンプル">
</div>
</p>
</body>
</html> |
|
[ブラウザでの表示例]
HOME PAGE ZERO ガイド |
- 元の画像-
-フィルタ使用後の画像-
|
△ページトップへ
ホームページ初心者ガイド|
HTML|
CSS|
ホームページお役立ち情報|
ホームページレベルアップ情報|
その他