CSS: Jak utworzyć przyciski o odbłysku przypominającym ikony systemu iOS?

Question

Próbuję ubarwiać moje przyciski HTML za pomocą CSS, tak aby miały odzwierciedlenie połysk jak ikony na stronie głównej urządzeń iOS. Apple robi to automatycznie z ikonami, jak pokazano here. Potrzebuję czegoś podobnego do blasku w CSS.

Answer 1

Spójrz na this fiddle.

Oto kod:

HTML:

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

i 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

Mój przykład używa tła-koloru: czerwonego zamiast obrazu, ale po prostu umieść dowolny obraz jako tło w #icon div i powinien również działać.

(btw użyłem tego niesamowite miejsce: http://www.colorzilla.com/gradient-editor/ dla gradientów)

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 */ 
} 

Nadzieję, że pracuje dla Ciebie!