Sony Ericsson Logo

by drublic

HTML

<div id="se-logo">
  <div>
    <div></div>
  </div>
  
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

CSS

html { background: #eee; margin: 50px 0; }
#se-logo,
  #se-logo span,
  #se-logo span::before,
  #se-logo span::after,
  #se-logo > div,
  #se-logo > div::before,
  #se-logo > div::after {
    position: absolute;
    content: "";
  }
  
  #se-logo {
    width: 400px;
    height: 400px;
    border-radius: 100%;
    /* background-image: -webkit-linear-gradient(top, #eee, #525252);*/
    background: #fff;
  }
  
  #se-logo span:nth-of-type(1) {
    width: 190px;
    height: 40px;
    background: #fff;
    top: 115px;
    right: 100px;
    z-index: 2;
    -webkit-transform: rotate(-35deg);
  }
  #se-logo span:nth-of-type(1):after {
    width: 200px;
    height: 150px;
    border-radius: 100%;
    top: -115px;
    left: -95px;
    z-index: 2;
    background-image: -webkit-radial-gradient(155px 75px, 180px 80px, rgba(255,255,255,0) 0, rgba(255,255,255,0) 70%, rgba(255,255,255,1) 71%);
    -webkit-transform: rotate(-10deg);
  }
  
  
  
  #se-logo span:nth-of-type(2) {
    width: 130px;
    height: 110px;
    top: 120px;
    right: 50px;
    z-index: 2;
    background-image: -webkit-radial-gradient(40px 110px, 300px 300px, rgba(255,255,255,0) 0, rgba(255,255,255,0) 30%, rgba(255,255,255,1) 31%);
  }
  #se-logo span:nth-of-type(2):before {
    width: 60px;
    height: 100px;
    top: -108px;
    right: 120px;
    z-index: 2;
    background-image: -webkit-radial-gradient(-10px 50px, 200px 150px, rgba(255,255,255,0) 0, rgba(255,255,255,0) 30%, rgba(255,255,255,1) 31%);
    -webkit-transform: rotate(-25deg);
  }
  #se-logo span:nth-of-type(2):after {
    width: 55px;
    height: 110px;
    top: -102px;
    right: 60px;
    z-index: 2;
    background: #fff;
    -webkit-transform: rotate(-25deg);
  }
  #se-logo span:nth-of-type(3) {
    width: 60px;
    height: 50px;
    top: 70px;
    right: 50px;
    z-index: 2;
    background: #fff;
  }
  
  #se-logo > div {
    top: 30px;
    left: 20px;
    background: #082811;
    width: 330px;
    height: 330px;
    border-radius:...

JavaScript

/* Nope! */