create a logo with css3

Asked 25/3, 2014 at 11:50 Answered 19/8, 2021 at 3:17

I would like to create a Vodafone logo with css like this one: enter image description here

I know some people are able to draw anything with css. I can't figure out how to make the tear drop shape. This is what I have as far as now:

#logoMain {
  width: 100px;
  height: 100px;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 50%;
  box-shadow: 0px 0px 50px 0px #999 inset;
  position: relative;
}

#logoMainafter {
  width: 100px;
  height: 100px;
  margin-top: -35px;
  margin-left: 55px;
  display: block;
  border-radius: 50%;
  background: -webkit-radial-gradient(50% 50%, circle cover, rgba(255, 255, 255, 1), rgba(255, 255, 255, 1) 12%, rgba(255, 255, 255, 0) 24%);
  -webkit-transform: translateX(-80px) translateY(-90px) skewX(-20deg);
  -webkit-filter: blur(10px);
}

#logoInside {
  width: 50px;
  height: 50px;
  margin: 24px;
  background-color: #fe0000;
  border: 1px solid red;
  border-radius: 50%;
  box-shadow: 0px 0px 15px 3px #a80000 inset;
}

<body>
  <div id="logoMain">
    <div id="logoInside"></div>
    <div id="logoMainafter"></div>
  </div>
</body>

Can anyone give me any ideas how to create this unusual shape?

Unconditioned answered 25/3, 2014 at 11:50 Comment(3)

Just my first idea: how about flipping (horizontally) a single quote (') or a comma (,) (possibly using a specific font that looks closest to the "teardrop") and using that as a basis for the rest? – Stuartstub 25/3, 2014 at 15:5

here's a yin yang, which is kinda pretty similar, have a play! coursesweb.net/css/yin-yang-css_cs – Ontina 25/3, 2014 at 15:10

maybe this showcase will help you – Foison 25/3, 2014 at 15:18

Well, since anybody is answering, here you have a draft to begin with

CSS

#logoMain {
    width: 100px;
    height: 100px;
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 50%;
    box-shadow: 0px 0px 50px 0px #999 inset ;
    position: relative;
}

#logoMainafter {
  width: 100px;
  height: 100px;
  margin-top: -35px;
  margin-left: 55px;
  display: block;
  border-radius: 50%;
  background: -webkit-radial-gradient(50% 50%, circle cover, rgba(255, 255, 255, 1), rgba(255, 255, 255, 1) 12%, rgba(255, 255, 255, 0) 24%);
  -webkit-transform: translateX(-80px) translateY(-90px) skewX(-20deg);
  -webkit-filter: blur(10px);
}

#logoInside {
    width: 50px;
    height: 50px;
    margin: 24px;
    background-color: #fe0000;
    border: 1px solid red;
    border-radius: 50%;
    box-shadow: 0px 0px 15px 3px #a80000 inset;
    z-index: 23;
    position: absolute;
}

#logoMain:after {
    content: "";
    width: 50px;
    height: 50px;
    position: absolute;
    top: 2px;
    left: 57px;
    /* background-color: green; */
    border-radius: 50%;
    box-shadow: -19px 17px 0px 14px #e80000;
    clip: rect(0px, 12px, 63px, -110px);
    z-index: 0;
}

fiddle

Stuyvesant answered 26/3, 2014 at 20:50 Comment(2)

Works great. fiddle. However it's not 100% original. I think I'm missing something. – Unconditioned 27/3, 2014 at 11:15

looks quite good. May be better adding some depth with dual box-shadows jsfiddle.net/n3w7y/9 – Stuyvesant 27/3, 2014 at 18:15

For more complex shapes I'd look at using d3js or raphael and the svg element with css backing it. Take a look at this example. There is alot of other examples on the same site of complex shapes you can draw with CSS with a little help from JS.

Countercheck answered 25/3, 2014 at 15:24 Comment(0)

Well, since anybody is answering, here you have a draft to begin with

CSS

#logoMain {
    width: 100px;
    height: 100px;
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 50%;
    box-shadow: 0px 0px 50px 0px #999 inset ;
    position: relative;
}

#logoMainafter {
  width: 100px;
  height: 100px;
  margin-top: -35px;
  margin-left: 55px;
  display: block;
  border-radius: 50%;
  background: -webkit-radial-gradient(50% 50%, circle cover, rgba(255, 255, 255, 1), rgba(255, 255, 255, 1) 12%, rgba(255, 255, 255, 0) 24%);
  -webkit-transform: translateX(-80px) translateY(-90px) skewX(-20deg);
  -webkit-filter: blur(10px);
}

#logoInside {
    width: 50px;
    height: 50px;
    margin: 24px;
    background-color: #fe0000;
    border: 1px solid red;
    border-radius: 50%;
    box-shadow: 0px 0px 15px 3px #a80000 inset;
    z-index: 23;
    position: absolute;
}

#logoMain:after {
    content: "";
    width: 50px;
    height: 50px;
    position: absolute;
    top: 2px;
    left: 57px;
    /* background-color: green; */
    border-radius: 50%;
    box-shadow: -19px 17px 0px 14px #e80000;
    clip: rect(0px, 12px, 63px, -110px);
    z-index: 0;
}

fiddle

Stuyvesant answered 26/3, 2014 at 20:50 Comment(2)

Works great. fiddle. However it's not 100% original. I think I'm missing something. – Unconditioned 27/3, 2014 at 11:15

looks quite good. May be better adding some depth with dual box-shadows jsfiddle.net/n3w7y/9 – Stuyvesant 27/3, 2014 at 18:15

This is probably not the best use of your time, drawing this in CSS. Use a graphics editor that is made for it and export it to SVG or any other picture format. The pain you need to go to code this is not worth it.

Autolithography answered 19/8, 2021 at 3:17 Comment(0)

Recommended topics

Hot tags