CSS: Cómo crear botones con brillo reflejado similares a los iconos de iOS?

estoy tratando con el estilo de mis botones HTML con CSS, por lo que tienen el brillo como los iconos en la página de inicio de iOS dispositivos de los reflejada. Apple hace esto a los iconos automáticamente como se muestra en here. Necesito algo similar al brillo en CSS.CSS: Cómo crear botones con brillo reflejado similares a los iconos de iOS?

Fuente

2011-10-28 dee

me gustaría sugerir el uso de un gradiente o tal vez una sombra interior. –

vi este hecho recientemente, pero que tendrá que Google para ese artículo. – Rob

Tome un vistazo a this fiddle.

Aquí está el código:

HTML:

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

y 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; 
}

Fuente

2011-10-28 16:21:02 scumah

mi ejemplo se utiliza un background-color: rojo en lugar de una imagen, pero sólo hay que poner cualquier imagen como fondo en el div #icon y también debería funcionar.

(por cierto que utilizan este sitio impresionante: http://www.colorzilla.com/gradient-editor/ de los gradientes)

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

espero que funcione para usted!

Fuente

2011-10-28 16:19:04

CSS: Cómo crear botones con brillo reflejado similares a los iconos de iOS?

Respuesta

Cuestiones relacionadas