WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:DIV要素に影を付ける技

0:[投稿] さくら [2004/01/29 11:24 ][環境:IE5以上 NN6以上 ASP(iis)]

いつも参考にさせて頂いております。

早速質問させてください。

以下のDIV要素が現在、青色になっておりますが、
この要素の右・下部分に微妙に影を付けたいのですが
技術的に可能でしょうか?

宜しければアドバイス頂けないでしょうか。

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<title></title>
</head>
<body>
<div id="color1" style="font-size:10pt; font-weight: bold; color:white; padding:5px; width:160px; top:0px; height:20px; background-color:steelblue;">コーナー</div>
</body>
</html>


1:[回答] 平野 敬 [MAIL] [URL] [2004/01/29 12:51 ]

可能です。影の画像を作り,background-image で div 要素の背景画像に設定してください。画像位置は background-position で調整できます。


2:[回答] 平野 敬 [MAIL] [URL] [2004/01/29 13:00 ]

一例として。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

<html lang="ja" dir="ltr">

<head>
    <meta http-equiv="content-type" content="text/html; charset=shift_jis">
    <meta http-equiv="content-style-type" content="text/css">
    <style type="text/css"><!--
        #c1 {
            font-size:10pt;
            font-weight: bold;
            color:white;
            background-color:steelblue;
            background-image:url("./shadow.png"); /*影の画像。┘型の絵を描いてブロックの右下に当てる*/
            background-repeat:no-repeat; /*画像を反復しない*/
            background-position:bottom right; /*画像の位置は右下*/
            padding:5px;
            width:160px;
            height:20px;
        }
    --></style>
    <title>テスト</title>
</head>

<body>
    <div id="c1">
        <p>コーナー</p>
    </div>
</body>

</html>


3:[回答] ミツ [2004/01/29 13:41 ]

画像ナシで影っぽく(微妙な・・というわけにはいかないけど)
# サンプルソース借りました >2

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html lang="ja" dir="ltr">

<head>
   <meta http-equiv="content-type" content="text/html; charset=shift_jis">
   <meta http-equiv="content-style-type" content="text/css">
   <style type="text/css"><!--
       #c0 {
           background-color:silver;
           width:170px;
           height:30px;
       }
       #c1 {
           position:relative;
           top:-3px;
           left:-3px;
           font-size:10pt;
           font-weight: bold;
           color:white;
           background-color:steelblue;
           padding:5px;
           width:160px;
           height:20px;
       }
   --></style>
   <title>テスト</title>
</head>

<body>
   <div id="c0">
   <div id="c1">
       <p>コーナー</p>
   </div>
   </div>
</body>

</html>


4:[完了] さくら [2004/01/29 16:54 ]

平野 敬様
ミツ様

レス頂き感謝しております。
今回、ミツさまからアドバイス頂いた方法でやってみようと
思います。
画像を作ったことがない私にとっては、CSSでの対応が
簡単です。

回答(必須): 状態:

お名前(必須):

e-mail:

URL:




[戻る]

ChaichanPAPA's World