CSS: come creare pulsanti con lucentezza riflessa simile alle icone iOS?

Question

Sto provando a modellare i miei pulsanti HTML usando i CSS, in modo che abbiano lo splendore riflesso come le icone sulla home page dei dispositivi iOS. Apple fa questo alle icone automaticamente come mostrato here. Ho bisogno di qualcosa di simile allo splendore dei CSS.

Answer 1

Dai uno sguardo allo this fiddle.

Ecco il codice:

HTML:

<div class="icon"> 
    <div class="shine"></div> 
</div> 

e CSS:

.icon { 
    width: 150px; 
    height: 150px; 
    border-radius: 30px; 
    background: red; 
    float: left; 
    margin: 50px; 
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.5); 
} 
.shine { 
    background: -moz-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.2) 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.7)), color-stop(100%,rgba(255,255,255,0.2))); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.2) 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.2) 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.2) 100%); /* IE10+ */ 
    background: linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.2) 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b3ffffff', endColorstr='#33ffffff',GradientType=0); /* IE6-9 */ 
    height: 90px; 
    width: 150px; 
    box-shadow: inset 0px 2px 1px rgba(255, 255, 255, 0.7); 
    border-top-right-radius: 30px; 
    border-top-left-radius: 30px; 
    border-bottom-right-radius: 100px 40px; 
    border-bottom-left-radius: 100px 40px; 
} 

Answer 2

il mio esempio utilizza un colore di sfondo: rosso invece di un'immagine, ma basta mettere qualsiasi immagine come sfondo nel div #icon e dovrebbe anche funzionare.

(btw ho usato questo luogo impressionante: http://www.colorzilla.com/gradient-editor/ per i gradienti)

HTML:

<div class="icon"> 
    <div class="shine"> 
    </div> 
</div> 

CSS:

.icon { 
    width:50px; 
    height:50px; 
    background-color: red; 
    overflow: hidden; 
    position: relative; 
} 
.shine { 
    position: absolute; 
    top: -70px; 
    left: -25px; 
    width:100px; 
    height:100px; 
    border-radius: 50px; 

    background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 150%); /* Chrome10+,Safari5.1+ */ 
    background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 150%); /* FF3.6+ */ 
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,1.5)), color-stop(100%,rgba(255,255,255,0))); /*  Chrome,Safari4+ */ 
    background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 150%); /* Opera 12+ */ 
    background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 150%); /* IE10+ */ 
    background: radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 150%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1); /* IE6-9 fallback on horizontal gradient */ 
} 

auguro che funziona per voi!