Menu
I would like to create a Vodafone logo with css like this one:
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?
532
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.
179
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
24
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
