CSS: iOS simgelerine benzer yansıyan parlaklıklı düğmeler nasıl oluşturulur?

Question

HTML düğmelerimi CSS kullanarak şekillendirmeye çalışıyorum, böylece iOS aygıtlarının ana sayfasında simgeler gibi yansıyan parlaklığa sahip olacaklar. Apple, simgeleri here'da gösterildiği gibi otomatik olarak yapar. CSS'de parlamaya benzer bir şeye ihtiyacım var.

Answer 1

this fiddle'a bir göz atın.

İşte kod:

HTML:

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

Ve 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

Örneğim arka plan rengi: kırmızı yerine bir görüntüyü kullanır, ancak #icon div dosyasında herhangi bir resmi arka plan olarak yerleştirir ve ayrıca çalışmalıdır.

HTML:

(geçişlerini için http://www.colorzilla.com/gradient-editor/ btw bu müthiş siteyi kullanılır):

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

sizin için çalışıyor umut!