0

このウェブサイトの右側のサイドバーにあるこの例のように、下部に影がある色付きの「見出し領域」を持つボックスを作成するにはどうすればよいですか: このウェブサイトの見出し付きボックス

この Web サイトでは、画像を使用してこの効果を作成しています。これを実現するには、純粋な CSS3 と HTML5 を使用したいと思います。

Googleでこれを探してみましたが、どこにも見つかりません。私はそれを間違ったことと呼んでいると思っているので、それを見つけることができません。また、セルが 2 つあるテーブルを使用してみましたが、正しく機能せず、影を正しく作成または配置できません。

色を変更することを除いて、ボックスを例とまったく同じにしたいと思います。

私が得ることができる助けを本当に感謝します。

4

3 に答える 3

0

この効果を CSS3 で作成したい場合は、box-shadow.

たとえば、フィドルを確認します。

http://jsfiddle.net/PwerX/

その他のドキュメントは、このリンクを確認してください。

http://css-tricks.com/snippets/css/css-box-shadow/

楽しむ！

于 2013-10-31T01:38:06.800 に答える
0

このコードを試してください

    <!DOCTYPE html>
<html>
<head>
<style>
    #nav{
        width:950px;
        height:50px;
        float:left;
        position:relative;
        background:#F4F4F4;
        background:linear-gradient(top,#FFF,#F4F4F4);
        background:-moz-linear-gradient(top,#FFF,#F4F4F4);
        background:-o-linear-gradient(#FFF,#F4F4F4);
        background:-webkit-gradient(linear,left top,left bottom,from(#FFF),to(#F4F4F4));
        box-shadow: 0px 1px 7px rgba(0, 0, 0, 0.21);
        -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#444444')";
        filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#CCCCCC');
    }
    #nav ul{
        list-style-type:none;
        margin:0;
        width:910px;
        padding:0px;
        padding-left:30px;
        float:left;
    }
    #nav ul li{
        display:inline;
    }
    #nav ul li a{
        text-decoration:none;
        color:#06C;
        padding:8px;
        padding-left:25px;
        padding-right:25px;
        font-family: 'Lucida Sans Unicode','Lucida Grande',Helvetica,Arial,sans-serif;
        font-size:16px;
        text-align:center;
        font-weight:bold;
        float:left;
        margin:5px;
    }
    #nav ul li a:hover{
        color:#FFF;
        background:#666;
    }

</style>
</head>

<body>
<div id="nav">
            <ul>
                <li><a >Home</a></li>
                 <li><a >Profile</a></li>
                 <li><a >About</a></li>
                 <li><a>Contact US</a></li>
                </ul>
         </div>

それがあなたのために働くかどうか私に知らせてください。

于 2013-10-31T01:30:50.483 に答える
0

私のアプローチは、三角形のマスクに境界線を使用し、その下に背景のグラデーションを使用することです。

codepenで私のコードをチェックしてください

更新されたバージョン。疑似要素 (:beforeおよび:after) の場合、境界線用にスペースを確保する必要がありました (左右に 1 ピクセル)。

注意が必要なのは、このサイドバーで幅を調整することです。最初に変更するのはサイドバー クラスです。次に、疑似要素の境界線を一致させる必要があります:after。

于 2013-10-31T03:02:49.203 に答える