WonderCSS

纯CSS绘制云图标实例

我们都知道 W3C 随着 html5 带来了 SVG(Scalable Vector Graphics) 可缩放矢量图形,作为WEB开发虽然目前还无法成为主流图形使用,但已经开始了一个新的制作开端。那么除了 SVG 外我们强大的 CSS 也随着版本更新到 CSS3 后在WEB开发中做出了一些突破,那么就让我们利用下面的CSS实例来看看CSS3的潜力吧!

css-cloud

以下代码将使用CSS绘制云型图标,先看看HTML部分:


<div id="cloud">
    <span class="shadow"></span>
</div>

CSS样式表部分:


body {
    background: #369;
}
#cloud {
    width: 350px;
    height: 120px;
    background: #fff;
    background: linear-gradient(top, #fff 5%, #d6f0fd 100%);
    background: -webkit-linear-gradient(top, #fff 5%, #d6f0fd 100%);
    background: -moz-linear-gradient(top, #fff 5%, #d6f0fd 100%);
    background: -ms-linear-gradient(top, #fff 5%, #d6f0fd 100%);
    background: -o-linear-gradient(top, #fff 5%, #d6f0fd 100%);
    border-radius: 100px;
    position: relative;
    margin: 120px auto 20px;
}

#cloud:after, #cloud:before {
    content: '';
    position: absolute;
    background: #fff;
    z-index: -1;
}

#cloud:after {
    width: 100px; height: 100px;
    top: -50px; left: 50px;
    border-radius: 100px;
}

#cloud:before {
    width: 180px; height: 180px;
    top: -90px; right: 50px;
    border-radius: 200px;
}

.shadow {
    width: 350px;
    position: absolute; bottom: -10px; 
    background: #000;
    z-index: -1;
    box-shadow: 0 0 25px 8px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0 0 25px 8px rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: 0 0 25px 8px rgba(0, 0, 0, 0.4);
    border-radius: 50%;
}

几乎所有用CSS绘制的图形代码中都会用到CSS伪元素,它能实现在不增加HTML代码的同时,实现效果上的“嵌套”。

By 于湛 发布于 2013.05.14 2,195 次浏览

发表评论

电子邮件地址不会被公开。 必填项已用*标注