CSS icône iOS/OSX style

Question

Il est possible de créer cet effet en CSS3?

Je suis en mesure d'avoir les coins arrondis, à la frontière avec le fond, mais pas le frisé effet. Est-il possible d'avoir le frisé effet en css3?

Merci

Answer 1

C'est plus ce que vous recherchez:

<style type="text/css">
.icon {
  background: #90C7DE;
  width: 256px;
  height: 256px;
  border-radius: 38px;
  overflow:hidden;
  border: solid 6px #666;
  position: relative;
  -webkit-box-shadow: 1px 2px 10px 1px rgba(0, 0, 0, .2);
  -moz-box-shadow: 1px 2px 10px 1px rgba(0, 0, 0, .2);
  box-shadow: 1px 2px 10px 1px rgba(0, 0, 0, .2);
  z-index: 10;
}
.icon .gloss {
  background: #56ABCB;
  height: 144px;
  width: 100%;
  overflow: hidden;
  position: relative;
  z-index: 5;
  -webkit-box-shadow: 0px 0px 10px rgba(255, 255, 255, .3);
  -moz-box-shadow: 0px 0px 10px rgba(255, 255, 255, .3);
  box-shadow: 0px 0px 10px rgba(255, 255, 255, .3);  
  border-top-right-radius: 170px 20px;
  border-top-left-radius: 170px 20px;
  border-bottom-right-radius: 40px;
  border-bottom-left-radius: 40px;
  position: absolute;
  bottom: 0px;
}
.icon .text {
  font: bold 200px Tahoma;
  text-align:center;
  z-index: 200;
  position: relative;
  color: white;
}
</style>
<div class="icon">
  <div class="gloss"></div>
  <div class="text">in</div>
</div>

JSFiddle: http://jsfiddle.net/dF63E/

Answer 2

À l'aide de l'effet à partir de là j'ai pu jeter quelque chose de similaire ensemble. Bien que la courbe va dans la direction opposée, je me dis que ce serait un simple changement.

Exemple : http://jsfiddle.net/guanome/BvDS9/

Le CSS

.icon {
    background: #399CC2;
    width: 175px;
    height: 175px;
    border-radius: 38px;
    border: solid 5px gray;
}
.icon .gloss {
    background: #000;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 0.2)));
    height: 90px;
    width: 176px;
    position: relative;
    z-index: 5;
    box-shadow: inset 0px 2px 1px rgba(255, 255, 255, 0.5);
    border-top-right-radius: 38px 38px;
    border-top-left-radius: 38px 38px;
    border-bottom-right-radius: 120px 20px;
    border-bottom-left-radius: 100px 20px;
}
.icon .text
{
    color: white;
    font-size: 150px;
    font-family: sans-serif;
    line-height: 0px;
    font-weight: bold;
    text-align: center;
}

Le HTML

<div class="icon">
    <div class="gloss"></div>
    <div class="text">in</div>
</div>