CSS3でボタンが輝く/輝く

Question

私はCSS3とHTMLだけを使って再現しようとしているナビゲーションメニューを持っています。このデザインでは、現在選択されているメニューボタンの写真/光りを、添付された写真の「ホーム」ボタンごとに表示します。その効果はちょうどコードを使用して可能ですか、またはグロー画像を使用する必要がありますか？

光沢と白線は、ボタンの中央に向かって最も目に見えて、エッジに向かって薄くなります。

Answer 1

CSS3のradial gradientsピクセル完璧な調整の容易かもしれCSSの背景画像を使用しているが、あなたが、同様の効果を達成しましょう。具体的には、CSS3の勾配は線形であり、半径方向の勾配もそうである。

私はFirefoxの放射状のグラデーション（Webkitのためのサポートは全く異なるコードが必要になります）を使用して、小さな例を構築してきました：http://jsfiddle.net/rxMf6/

HTML：

<div class="highlighted-button"> 
    <div class="highlight"></div> 
    Button 
</div> 

CSSを：

.highlighted-button { 
    background: #000; 
    color: #fff; 
    font: bold 0.8em Arial, sans-serif; 
    padding-bottom: 0.9em; 
    text-align: center; 
    text-transform: uppercase; 
    width: 8em; 
} 

.highlight { 
    background: -moz-radial-gradient(center top, ellipse farthest-side, 
            #fff 0%, #000 100%); 
    height: 0.5em; 
    margin-bottom: 0.4em; 
} 

Answer 2

イメージが必要です。実際にコードでこの効果を達成する方法はありません。ほとんどのブラウザはCSS3 box-shadowまたはグラデーションを使用して処理できますが、Internet Explorer 8および部分的にIE 9には問題があります。適切なクロスブラウザをサポートするには、画像を使用して目的の効果を達成する必要があります。

私は、あなたがイメージが非常にうまくいく必要があると言う理由は、効果を達成するために追加のマークアップとハックの回避策を含める必要があるかもしれません。これは望ましいことではなく、CSS3バージョンを実装しようとする際に衝突を引き起こす可能性があります。

Answer 3

これは、同様のCSS3グラデーションです。あなたは色を変更し、あなたの見た目を得ることができます。私はそれがまさにあなたが望むもののようなものかどうかはわかりません。これはまっすぐなグラデーションではありません。

background-image: -webkit-gradient(
linear, 
left bottom, 
left top, 
color-stop(0.32, rgb(14,15,14)), 
color-stop(0.7, rgb(0,0,0)), 
color-stop(0.85, rgb(201,201,201)) 
); 
background-image: -moz-linear-gradient(
center bottom, 
rgb(14,15,14) 32%, 
rgb(0,0,0) 70%, 
rgb(201,201,201) 85% 
); 

Answer 4

はい、それはあなたの要件に応じて勾配を調整することができます。私たちはIE用にフィルタリングします。 私はこの例の助けがあなたを望むことを願っています。

.menu { 
    float: left; 
    margin: 10px 10px 10px 0; 
    background: #000; 
    width: 700px; 
} 
.menu ul { 
    margin: 15px 0 15px 5px; 
} 
.menu ul li { 
    display: inline; 
    list-style: none; 
    font-size: 12px; 
    font-family: arial; 
    color: #fff; 
    font-weight: normal; 
} 
.menu ul li:before { 
    display: inline; 
    content: "/"; 
} 
.menu ul li:first-child:before { 
    content: " "; 
    height:45px; 
} 
.menu ul li a { 
    margin: 0 15px 0 15px; 
    color: #fff; 
    text-decoration: none; 
    padding:17px 30px 16px 30px;; 
} 
.menu ul li a:hover { 
    border-top:1px solid rgba(255, 255, 255, 0.4); 
    text-decoration: underline; 
    color: #fff; 
    padding:17px 30px 16px 30px; 
    background: -moz-radial-gradient(center -5px 45deg, ellipse farthest-corner, rgb(255, 255, 255)0%, rgba(0, 0, 0, 0.2)70%) repeat #000; 
    background: -webkit-gradient(radial, 50% 0, 0, 50% 0,50, from(rgba(255, 255, 255, 0.9)), to(#000)); 

} 



    <nav> 
       <div class="menu"> 
        <ul> 
         <li><a href="#">HOME</a></li> 
         <li><a href="#">WHAT IS THIS?</a></li> 
         <li><a href="#">SWEAR DICTIONARY</a></li> 
        </ul> 
       </div> 
    </nav>