Hello readers !

Here is an example of css3 by using these codes you can make any logo. There is no use of any image. For example I used the same code to make Evon Logo. If you want to use the same code for creating other logo you have to do some minor changes.

Evon logo using css:-

 <style>
      .ball {
      display: inline-block;
      width: 100px;
      height: 100px;
      margin: 0;
      border-radius: 50%;
      position: relative;

    background: rgba(89,120,141,1);
    background: -moz-linear-gradient(top, rgba(89,120,141,1) 0%, rgba(33,74,102,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(89,120,141,1)), color-stop(100%, rgba(33,74,102,1)));
    background: -webkit-linear-gradient(top, rgba(89,120,141,1) 0%, rgba(33,74,102,1) 100%);
    background: -o-linear-gradient(top, rgba(89,120,141,1) 0%, rgba(33,74,102,1) 100%);
    background: -ms-linear-gradient(top, rgba(89,120,141,1) 0%, rgba(33,74,102,1) 100%);
    background: linear-gradient(to bottom, rgba(89,120,141,1) 0%, rgba(33,74,102,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#59788d', endColorstr='#214a66', GradientType=0 );

          animation-name: spin; 
      animation-duration: 10s; 
      animation-iteration-count: infinite; 
      animation-timing-function: linear;
      }

      @keyframes spin {
      from { transform: rotate(0deg);}
      to { transform: rotate(360deg); }
    }

    .ball:before {
      content: "";
      position: absolute;
      top: 2%;
      left: 5%;
      width: 90%;
      height: 90%;
      border-radius: 50%;
      background: radial-gradient(circle at 50% 0px, #ffffff, rgba(255, 255, 255, 0) 58%);
      -webkit-filter: blur(5px);
      z-index: 2;
      opacity:.5;
    }


    .stage {
      width: 550px;
      height: 235px;

      position: relative;
      -webkit-perspective: 1200px;
      -moz-perspective: 1200px;
      -ms-perspective: 1200px;
      -o-perspective: 1200px;
      perspective: 1200px;
      -webkit-perspective-origin: 50% 50%;
      -moz-perspective-origin: 50% 50%;
      -ms-perspective-origin: 50% 50%;
      -o-perspective-origin: 50% 50%;
      perspective-origin: 50% 50%;
    }
    body { 
     margin: 0 auto

    }
    .one{
        height: 100px;
        left: 287px;
        top: 128px;
       width: 100px;  
    }

    .two {
        height: 65px;
       left: 215px;
        top: 20px;
        width: 65px;
    }
    .three {
        height: 55px;
        left: 200px;
        top: -38px;
        width: 55px;
    }
    .four {
        height: 40px;
        left: 200px;
        top: -8px;
        width: 40px;
    }
    .five{height: 30px;width: 30px;top:40px;left:160px;}

    .e{position: absolute;bottom:10px;left:5px;}
    .v{position: absolute;bottom:10px;left:145px;}
    .n{position: absolute;bottom: 10px;right: 10px}
    </style>

Html

<section class="stage">
  <figure class="ball one"></figure>
  <figure class="ball two"></figure>
  <figure class="ball three"></figure>
  <figure class="ball four"></figure>
  <figure class="ball five"></figure>

  <svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="113.000000pt" height="62.000000pt" viewBox="0 0 113.000000 62.000000" preserveAspectRatio="xMidYMid meet" class="e">
<g transform="translate(0.000000,62.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none">
<path d="M130 608 c-49 -14 -100 -55 -116 -94 -29 -69 -67 -64 489 -62 l502 3
0 80 0 80 -420 2 c-255 1 -434 -3 -455 -9z"></path>
<path d="M4 376 c-3 -8 -4 -73 -2 -145 3 -129 3 -130 33 -162 65 -69 62 -69
543 -69 l433 0 -3 83 -3 82 -422 3 -423 2 0 30 0 30 423 2 422 3 0 75 0 75
-498 3 c-426 2 -498 0 -503 -12z"></path>
</g>
</svg>

<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="99.000000pt" height="62.000000pt" viewBox="0 0 99.000000 62.000000" preserveAspectRatio="xMidYMid meet" class="v">

<g transform="translate(0.000000,62.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none">
<path d="M2 602 c3 -10 95 -150 204 -311 l199 -292 84 3 85 3 208 305 c114
168 208 306 208 308 0 1 -37 2 -83 2 l-82 0 -169 -226 c-93 -124 -172 -221
-176 -217 -4 4 -80 106 -169 226 l-161 217 -76 0 c-69 0 -76 -2 -72 -18z"></path>
</g>
</svg>


<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="101.000000pt" height="62.000000pt" viewBox="0 0 101.000000 62.000000" preserveAspectRatio="xMidYMid meet" class="n">
<g transform="translate(0.000000,62.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none">
<path d="M0 310 l0 -310 80 0 80 0 0 225 0 225 294 0 c164 0 306 -4 320 -10
14 -5 34 -18 46 -30 19 -19 20 -32 20 -215 l0 -195 85 0 85 0 0 238 c0 227 -1
240 -23 282 -16 34 -34 51 -72 70 l-49 25 -433 3 -433 3 0 -311z"></path>
</g>
</svg>
</section>