Schaltfläche glänzen/glühen mit CSS3

Question

Ich habe ein Navigationsmenü, das ich versuche, nur mit CSS3 und HTML neu zu erstellen. Das Design erfordert einen Glanz/Glow auf der aktuell ausgewählten Menü-Taste, wie auf der "home" -Schaltfläche auf dem angehängten Bild. Ist dieser Effekt nur mit Code möglich oder muss ich das Glow Image verwenden ?!

Beachten Sie, dass der Glanz und die weiße Linie in der Mitte des Knopfes am sichtbarsten sind und dann zu den Rändern hin verblassen.

Answer 1

CSS3 die radial gradients können Sie einen ähnlichen Effekt erzielen, obwohl ein CSS-Hintergrundbild verwenden, kann für pixelgenaue Korrekturen einfacher sein. Insbesondere sind die Gradienten von CSS3 linear, sogar die radialen. http://jsfiddle.net/rxMf6/

HTML:

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

CSS

Ich habe ein kleines Beispiel mit Firefox radialen Gradienten (Unterstützung für Webkit erfordert ganz anderen Code) aufgebaut:

.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

Sie benötigen ein Bild. Es gibt wirklich keine Möglichkeit, diesen Effekt mit nur Code zu erreichen. Obwohl die meisten Browser mit der Verwendung von CSS3 box-shadow oder Farbverläufen behandelt werden können, wird Internet Explorer 8 und teilweise IE 9 Probleme haben. Um die Unterstützung von Cross-Browsern zu gewährleisten, müssen Sie Bilder verwenden, um den gewünschten Effekt zu erzielen.

Der Grund, warum ich sage, dass Sie ein Bild brauchen, ist sehr gut, muss möglicherweise zusätzliche Markup und Hacky Workarounds enthalten, um den Effekt zu erzielen. Dies ist nicht erwünscht und könnte zu Konflikten bei der Implementierung der CSS3-Version führen.

Answer 3

Hier ist ein ähnlicher CSS3-Gradient. Sie können die Farben ändern und Ihr gewünschtes Aussehen erhalten. Ich weiß nicht, ob es genau so ist, wie du es wolltest. Es sieht nicht gerade aus wie ein gerader Verlauf.

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

Ja, das ist Glanz in css3 möglich. Sie passen Gradient nach Ihrer Anforderung.Sie filtern uns für IE. Ich hoffe, dieses Beispiel hilft dir.

.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>