创建CSS3

一个标志，我想创建一个沃达丰的标志，像这样一个CSS： enter image description here 创建CSS3

我知道有些人能够用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; 
}

来源

2014-03-25 Dharman

只是我的第一个想法草案：怎么样翻转（水平）单引号（ '）或逗号（，）（可能使用看起来最接近“泪滴”的特定字体），并将其用作剩余的基础？ – RobIII

这是一个阴阳，有点相似，有一个戏！ http://coursesweb.net/css/yin-yang-css_cs – saj

也许[这]（http://www.bchanx.com/logos-in-pure-css-demo）展示会帮助你 –

好吧，既然有人接听，在这里你有一个开始与

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

来源

2014-03-26 20:50:38 vals

工程很棒。 [小提琴]（http://jsfiddle.net/n3w7y/8/）。但它不是100％原创。我想我错过了一些东西。 – Dharman

看起来相当不错。可以更好地添加一些深度与双箱阴影http://jsfiddle.net/n3w7y/9/ – vals

对于更复杂的形状我想看看使用d3js或raphael与CSS的支持它的svg元素。看看this example。在JS的一些帮助下，您可以使用CSS绘制复杂形状的同一站点上的其他示例。

来源

2014-03-25 15:24:15

回答

相关问题