Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Evon Logo Using CSS

    • 0
    • 1
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 572
    Comment on it

    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>
    

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: