0

複数の色のボタンで機能するbox-shadowamdを使用する汎用ホバークラスを構築しようとしています。そのため、ボタンの色ごとに「影」を変えたいと思います。影の要素の色属性のみを使用または設定する方法があるかどうかを調べようとしていますか？

これが私が意味することです：

/*Notice that .button shadows does not have a color value*/

.button {
    -webkit-box-shadow: 
    0px 8px 16px 0px;
    box-shadow:
    0px 8px 16px 0px;
}

.button:hover{
    -webkit-box-shadow: 
    0px 16px 16px 0px;
    box-shadow:
    0px 16px 16px 0px;
}

/*And color elements does not have other values for the shadow*/

.red{
    -webkit-box-shadow: 
    rgba(255, 0, 0, 0.1);
    box-shadow:
    rgba(255, 0, 0, 0.1);
}
.green{
    -webkit-box-shadow: 
    rgba(0, 255, 0, 0.1);
    box-shadow:
    rgba(0, 255, 0, 0.1);
}

...次のように使用されます：

<div class="button red>Red Button</div>
<div class="button green>Green Button</div>

それが状況を説明することを願っています。ブレーンストーミングタイム！

4

5 に答える 5

1

追加する必要がありますcolor: red 

.red{
    color:red
}
.green{
   color:green
}

プロパティはテキストにも適用されるためcolor:、テキストをspanタグで囲んで に渡す必要color:blackがありますspan。

デモ

于 2013-02-06T11:23:21.893 に答える
0

いいえ、できません。ボタンごとに2つのケースを通常とホバーに配置する必要があります

http://dev.w3.org/csswg/css3-background/#the-box-shadow

于 2013-02-06T16:01:43.030 に答える
0

残念ながら、ここで指定されているボックス シャドウの色のみを指定する方法はありません: http://dev.w3.org/csswg/css3-background/#the-box-shadow

カラー クラスごとに個別のボックス シャドウ ルールを指定する必要があります。

于 2013-02-06T11:20:50.727 に答える
0

CSS3 には box-shadow-color ルールがないため、ボタンごとにすべての影のパラメーター (サイズ、位置、色) を指定する必要があります。

于 2013-02-06T11:22:42.033 に答える
0

個々のメニューに色を使用して、このスタイルでこの css スタイルを試してみてください。色の代わりに影を設定することができます...

HTML コード

<div class="menu"> 
        <ul>
            <li class="active1"><a href="#">Home</a></li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">Product</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>

CSS スタイル

.menu{
        font-family:Arial, Helvetica, sans-serif;
        color:white;
        float:left;
        position:absolute;  
        top:95px;
        width:855px;
        background-image:url(../images/bottom-menu-line.png);
        background-position:center bottom;
        background-repeat:no-repeat;
    }
    .menu ul{padding:0; margin-left:65px; border-radius:10px;}
    .menu ul li {
        float:left;
        border-radius:10px;
        width:110px;
        height:47px;
        list-style:none;
        padding:0;
        margin-left:5px;
        margin-right:5px;
        /*overflow:hidden*/
    }
    .menu ul li a {
        font-size:12px;
        color:#fffcc7;
        background-image:url(../images/button.png);
        background-position:center;
        height:47px;
        overflow:hidden;
        line-height:47px;
        text-decoration:none;
        width:110px;
        text-align:center;
        float:left;
        border-radius:10px;
    }
    .menu li {float:left; padding:0;}
    .menu ul li a:hover {
     margin: -3px;
    }
    .menu ul li:nth-of-type(6) a:hover {
     border:3px solid #c10202 !important;
     border-radius:10px !important;
    }
    .menu ul li:nth-of-type(5) a:hover {
    border:#c1d65f solid 3px;
    border-radius:10px;
    }
    .menu ul li:nth-of-type(4) a:hover {
    border:#01d290 solid 3px;
    border-radius:10px;
    }
    .menu ul li:nth-of-type(3) a:hover {
    border:#904ca1 solid 3px;
    border-radius:10px;
    }
    .menu ul li:nth-of-type(2) a:hover {
    border:#00caf3 solid 3px;
    border-radius:10px;
    }
    .menu ul li:nth-of-type(1) a:hover {
    border:3px #d44c1f solid;
    border-radius:10px;
    }
    .active1{
    border:3px #d44c1f solid;   
    width:110px !important;
    border-radius:10px;
    height:47px !important;
    margin-bottom:7px !important;
    margin-right:5px !important;
    }
    .active2{
    border:#00caf3 solid 3px;   
    width:110px !important;
    border-radius:10px;
    height:47px !important;
    margin-bottom:7px !important;
    margin-right:5px !important;
    }
    .active3{
    border:#904ca1 solid 3px;   
    width:110px !important;
    border-radius:10px;
    height:47px !important;
    margin-bottom:7px !important;
    margin-right:5px !important;
    }
    .active4{
    border:#01d290 solid 3px;   
    width:110px !important;
    border-radius:10px;
    height:47px !important;
    margin-bottom:7px !important;
    margin-right:5px !important;
    }
    .active5{
    border:#c1d65f solid 3px;   
    width:110px !important;
    border-radius:10px;
    height:47px !important;
    margin-bottom:7px !important;
    margin-right:5px !important;
    }
    .active6{
    border:3px solid #c10202;   
    width:110px !important;
    border-radius:10px;
    height:47px !important;
    margin-bottom:7px !important;
    margin-right:5px !important;
    }
于 2013-02-06T11:56:39.493 に答える