Smartisan OS Browser icon in CSS

index.html

<div class="wrap">
  <div class="outer">
    <div class="inner"></div>
  </div>
  <div class="center"></div>
</div>

<!-- 

 Trying to create http://dribbble.com/shots/1490508-Smartisan-OS-Browser-icon in CSS...
 

-->

Smartisan OS Browser icon in CSS.markdown

Smartisan OS Browser icon in CSS

Saw someone wanted to create http://dribbble.com/shots/1490508-Smartisan-OS-Browser-icon in css, so I did.

A Pen by John Healey on CodePen.

License.

style.css

html {
  height: 100%;
  background: radial-gradient(ellipse at top,  #bcc2cb 0%,#656f7f 100%);

}
body {
  height: 100%;
  background: url(https://dl.dropboxusercontent.com/u/2399862/noisy-texture-100x100-o3-d15-c-7ea5bf-t1.png) repeat;
}
.wrap {
  transform: scaleX(-1);
}
.outer {
  width: 254px;
  height: 254px;
  margin: 100px auto;
  background: linear-gradient(to bottom, #fbfbfb 0%,#9a9a9a 100%);
  border-radius: 50%;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #7F7F7F;
  box-shadow: 0 30px 45px rgba(0,0,0,.3);
  position: relative;
  
  &:before {
    content: "";
    width: 218px;
    height: 218px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -109px;
    border-radius: 50%;
    background: linear-gradient(to bottom,  #728b9d 0%,#e5e5e5 100%);
  }
  &:after {
    content: "";
    width: 210px;
    height: 210px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -105px;
    border-radius: 50%;
    box-shadow: inset 0px 25px 25px rgba(0,0,0,.4)
  }
}

.inner {
  
  width: 210px;
  height: 210px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -105px;
  border-radius: 50%;
  background-image: 
    linear-gradient(242deg, #3072BB 16%, #B1D1E8 45%),
    linear-gradient(to bottom right,  #B1D1E8 25%, #82AED4 75%),
    linear-gradient(to top right,  #82AED4 25%, #609BDA 75%),
    linear-gradient(to top left,  #609BDA 25%, #3072BB 70%, #3072BB 100%);
  background-size: 52%;
  background-position: top left, bottom left, bottom right, top right;
  background-repeat: no-repeat;
  
  
  &:after {
    content: "";
    width: 60px;
    height: 60px;
    border-radius: 50%; //#3072BB
    background: linear-gradient(to bottom right,  #3072BB 95%,#3A7ABF 100%);
    position: absolute;
    left: 62px;
    top: 3px;
  }
}

@-webkit-keyframes rotate {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-720deg);
  }
}

.center {
  width: 88px;
  height: 88px;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  margin: -44px;
  background: linear-gradient(to bottom, #FEFEFE 0%,#A7A7A7 100%);
  border-radius: 50%;
  box-shadow: 0 15px 25px rgba(0,0,0,.3);
  
  &:before {
    content: "";
    width: 80px;
    height: 80px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -40px;
    border-radius: 50%;
    background: linear-gradient(to bottom, #E5E5E5 0%, #CCCCCC 100%);
  }
  
}

.wrap:hover .inner {
    -webkit-animation: rotate 1s infinite linear;
}