新浪UED

用CSS3绘制小新

by 小秦 / 博客,网页重构 / 2010-09-08
用CSS3绘制小新

新浪有两个吉祥物,小新是女孩儿,小浪是男孩儿。现在流行用CSS3画点什么,我们SINA CDC的模特儿,必然是小新和小浪了。

熬一晚上做了个小新头,不完善,还有更像的空间。窍门就是琢磨出用各种圆形,相互迭加而制作出一个物体。先看看最终效果吧。个人认为,firefox在图型方面的表现是最好的,而safarichrome虽然有毛边,但优势是支持CSS动画。各有所长。而IE,就当它是打酱油的吧。

这次使用到的CSS3属性包括:

圆角:-moz-border-radius; -webkit-border-radius;

旋转:-moz-transform; -webkit-transform;

阴影:-moz-box-shadow; -webkit-box-shadow;

渐变:-moz-linear-gradient; -webkit-gradient;

下面就看一下我用CSS3代码画的小新,在各浏览器下的表现:

Firefox 3.6.8
用CSS3手工绘制的小新头(原创)

Chrome 5.0
用CSS3手工绘制的小新头(原创)

Safari 5.0
用CSS3手工绘制的小新头(原创)

IE6、IE7、IE8

用CSS3手工绘制的小新头(原创)

实现逻辑很简单。先画一个长方块儿,用CSS3代码为方块儿加圆角儿、阴影、倾斜、渐变光效。做为小新的头。

用CSS3手工绘制的小新头(原创)
一个小长方型,做为长圆型,并加阴影
用CSS3手工绘制的小新头(原创)

在上面盖一个大圆,粉色部位变成一个弯弯的锥型
用CSS3手工绘制的小新头(原创)

在大白圆上,再盖一个加阴影、渐变光效的小圆
用CSS3手工绘制的小新头(原创)

把表示头部的大圆,盖在表示头发的拐弯上,再把页面背景色定为白色,让别人看不出遮罩层。小新就长出一根头发了。
用CSS3手工绘制的小新头(原创)

将头发复制5份,每一根头发,都细调大小和位置

用CSS3手工绘制的小新头(原创)

眼睛就好画多了,先画一个白色的圆型,加灰边、和粉色上阴影
用CSS3手工绘制的小新头(原创)

盖一个棕色的圆,加黑边和阴影
用CSS3手工绘制的小新头(原创)

再盖两个小白点儿,画龙点睛
用CSS3手工绘制的小新头(原创)

组合起来,就完成了。

用CSS3手工绘制的小新头(原创)

实现起来比较费时间,但并没有难度。需要注意的是position的用法,制作出正确的前后顺序。

虽然不能比拟设计师用PS画出来的栩栩如生,代码写的小新,妩媚的券发像是一个个粗壮的小胳膊。组里有同学绘制的小浪人,也相当漂亮,浪的简直了。不过抱着精心制作的精神,相信你们会比我画的更好。

原码在此:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>小新头像-新浪CDC</title>
</head>
<style>
.sina{ margin:60px 0 0 22px;}
.head{ position:relative; width:195px; height:220px;}
.head_bg{ position:absolute; width:200px; height:175px; background:#ab2b41; left:6px; z-index:6;
-moz-border-radius-topleft:200px 180px;
-moz-border-radius-topright: 200px 180px;
-moz-border-radius-bottomleft: 200px 180px;
-moz-border-radius-bottomright: 200px 180px;
-webkit-border-radius:200px 180px;
-moz-transform: rotate(-6deg);
-webkit-transform:rotate(-6deg);
-moz-box-shadow:1px 4px 3px #333;
-webkit-box-shadow:1px 4px 3px #333;
border:1px solid #c03461;
}

.head_top{  position:absolute; top:-3px; left:5px; width:197px; height:167px;z-index:7;
-moz-border-radius-topleft:200px 180px;
-moz-border-radius-topright:200px 180px;
-moz-border-radius-bottomleft:200px 180px;
-moz-border-radius-bottomright:200px 180px;
-webkit-border-radius:200px 180px;
-moz-transform:rotate(-6deg);
-webkit-transform:rotate(-6deg);
background: -moz-linear-gradient(left top, #e16591, #ce3551 50%);
background: -webkit-gradient(linear, 0 0, 0 50%, from(#e16591), to(#ce3551));
}

.head_shadow{ position:absolute; width:190px; height:162px;  top:2px; left:10px; z-index:8;
-moz-border-radius-topleft:200px 180px;
-moz-border-radius-topright:200px 180px;
-moz-border-radius-bottomleft:200px 180px;
-moz-border-radius-bottomright:200px 180px;
-webkit-border-radius:200px 180px;
background: -moz-linear-gradient(left top, white, #ce3552 50%);
background: -webkit-gradient(linear, left top, 10% 50%, from(#fff), to(#ce3552));
}

.head_a1{ width:54px; height:45px; position:absolute; top:-24px; right:32px;background:#d53960; z-index:5;
border:1px solid #c03461;
-moz-border-radius:180px 0;
-webkit-border-radius:180px 0 180px 0;
-moz-transform: rotate(-6deg);
-webkit-transform:rotate(-6deg);
-moz-box-shadow:4px 4px 0px #c03461;
-webkit-box-shadow:4px 4px 0px #c03461;
}

.head_a1 .top{width:100px; height:100px; position:absolute; top:-80px; right:-11px; background:#fff; z-index:1;
-moz-border-radius:135px;
-webkit-border-radius:135px;
}

.head_a1 .body{width:23px; height:23px; position:absolute; top:-10px; right:-3px; background:#d53960; z-index:2;
-moz-border-radius:135px 135px 135px 0;
-webkit-border-top-left-radius:135px;
-webkit-border-top-right-radius:135px;
-webkit-border-bottom-right-radius:135px;
-webkit-border-bottom-left-radius:0;

-moz-transform: rotate(-60deg);
-webkit-transform: rotate(-60deg);
-moz-box-shadow:3px 4px 0px #c03461;
-webkit-box-shadow:3px 4px 0px #c03461;
}

.head_a1 .shadow{width:19px; height:19px; position:absolute; top:-8px; right:-2px; z-index:3;
-moz-border-radius:135px 135px 135px 0;
-webkit-border-radius:135px 135px 135px 0;
-moz-transform: rotate(-60deg);
-webkit-transform: rotate(-60deg);
background: -moz-linear-gradient(top, white, #ce3552 50%);
background: -webkit-gradient(linear, left top, 0 50%, from(#fff), to(#ce3552));
}

.head_a2{ width:60px; height:45px; position:absolute; top:-22px; right:-13px;background:#d53960; z-index:4;
border:1px solid #c03461;
-moz-border-radius:180px 0;
-webkit-border-radius:180px 0 180px 0;
-moz-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
-moz-box-shadow:4px 4px 0px #c03461;
-webkit-box-shadow:4px 4px 0px #c03461;
}

.head_a2 .top{width:40px; height:38px; position:absolute; top:-12px; right:7px; background:#fff; z-index:1;
-moz-border-radius:180px 0 180px 0;
-webkit-border-radius:180px 0 180px 0;
-moz-transform: rotate(20deg);
-webkit-transform: rotate(20deg);
}

.head_a2 .body{width:23px; height:23px; position:absolute; top:-10px; right:-3px; background:#d53960; z-index:2;
-moz-border-radius:135px 135px 135px 0;
-webkit-border-radius:135px 135px 135px 0;
-moz-transform: rotate(-60deg);
-webkit-transform: rotate(-60deg);
-moz-box-shadow:3px 4px 0px #c03461;
-webkit-box-shadow:3px 4px 0px #c03461;
}

.head_a2 .shadow{width:19px; height:19px; position:absolute; top:-8px; right:-1px; z-index:3;
-moz-border-radius:135px 135px 135px 0;
-webkit-border-radius:135px 135px 135px 0;
-moz-transform: rotate(-60deg);
-webkit-transform: rotate(-60deg);
background: -moz-linear-gradient(top, white, #ce3552 50%);
background: -webkit-gradient(linear, left top, 0 50%, from(#fff), to(#ce3552));
}

.head_a3{ width:80px; height:47px; position:absolute; top:6px; right:-46px;background:#d53960; z-index:3;
 border:1px solid #c03461;
 -moz-border-radius:100px 0 110px 0;
 -webkit-border-radius:100px 0 110px 0;
 -moz-transform: rotate(-10deg);
 -webkit-transform: rotate(-10deg);
 -moz-box-shadow:4px 4px 0px #c03461;
 -webkit-box-shadow:4px 4px 0px #c03461;
}

.head_a3 .top{width:67px; height:38px; position:absolute; top:-18px; right:15px; background:#fff; z-index:1;
 -moz-border-radius:180px 0 180px 0;
 -webkit-border-radius:180px 0 180px 0;
 -moz-transform: rotate(40deg);
 -webkit-transform: rotate(40deg);
}
.head_a3 .body{width:23px; height:23px; position:absolute; top:-8px; right:-1px; background:#d53960; z-index:2;
 -moz-border-radius:135px 135px 135px 0;
 -webkit-border-radius:135px 135px 135px 0;
 -moz-transform: rotate(-72deg);
 -webkit-transform: rotate(-72deg);
 -moz-box-shadow:3px 4px 0px #c03461;
 -webkit-box-shadow:3px 4px 0px #c03461;
}

.head_a3 .shadow{width:19px; height:19px; position:absolute; top:-6px; right:0px; z-index:3;
 -moz-border-radius:135px 135px 135px 0;
 -webkit-border-radius:135px 135px 135px 0;
 -moz-transform: rotate(-60deg);
 -webkit-transform: rotate(-60deg);
 background: -moz-linear-gradient(top, white, #ce3552 50%);
background: -webkit-gradient(linear, left top, 0 50%, from(#fff), to(#ce3552));
}

.head_a4{ width:80px; height:47px; position:absolute; top:44px; right:-55px; background:#d53960; z-index:2;
border:1px solid #c03461;
 -moz-border-radius:80px 0 110px 0;
 -webkit-border-radius:80px 0 110px 0;
 -moz-transform: rotate(8deg);
 -webkit-transform: rotate(8deg);
 -moz-box-shadow:4px 4px 0px #c03461;
 -webkit-box-shadow:4px 4px 0px #c03461;
 }

.head_a4 .top{width:67px; height:38px;position:absolute; top:-18px; right:13px; background:#fff; z-index:1;
 -moz-border-radius:180px 0 180px 0;
 -webkit-border-radius:180px 0 180px 0;
 -moz-transform: rotate(40deg);
 -webkit-transform: rotate(40deg);
}

.head_a4 .body{width:23px; height:23px; position:absolute; top:-9px; right:-2px; background:#d53960; z-index:2;
 -moz-border-radius:135px 135px 135px 0;
 -webkit-border-radius:135px 135px 135px 0;
 -moz-transform: rotate(-70deg);
 -webkit-transform: rotate(-70deg);
 -moz-box-shadow:3px 4px 0px #c03461;
 -webkit-box-shadow:3px 4px 0px #c03461;
}
.head_a4 .shadow{width:19px; height:19px; position:absolute; top:-7px; right:-1px; z-index:3;
 -moz-border-radius:135px 135px 135px 0;
 -webkit-border-radius:135px 135px 135px 0;
 -moz-transform: rotate(-70deg);
 -webkit-transform: rotate(-70deg);
 background: -moz-linear-gradient(top, white, #ce3552 50%);
 background: -webkit-gradient(linear, left top, 0 50%, from(#fff), to(#ce3552));
}

.head_a5{ width:54px; height:45px; position:absolute; top:87px; right:-45px; background:#d53960; z-index:1;
border:1px solid #c03461;
 -moz-border-radius:135px 0 180px 0;
 -webkit-border-radius:135px 0 180px 0;
 -moz-transform: rotate(35deg);
 -webkit-transform: rotate(35deg);
 -moz-box-shadow:4px 4px 0px #c03461;
 -webkit-box-shadow:4px 4px 0px #c03461;
 }
.head_a5 .top{width:100px; height:100px; position:absolute; top:-78px; right:-7px; background:#fff; z-index:1;
 -moz-border-radius:135px;
 -webkit-border-radius:135px;
 }
.head_a5 .body{width:23px; height:23px; position:absolute; top:-6px; right:0px; background:#d53960; z-index:2;
 -moz-border-radius:135px 135px 135px 0;
 -webkit-border-radius:135px;
 -moz-transform: rotate(-70deg);
 -webkit-transform: rotate(-70deg);
 -moz-box-shadow:3px 4px 0px #c03461;
 -webkit-box-shadow:3px 4px 0px #c03461;
 }
.head_a5 .shadow{width:19px; height:19px; position:absolute; top:-4px; right:2px; z-index:3;
 -moz-border-radius:135px 135px 135px 0;
 -webkit-border-radius:135px 135px 135px 0;
 -moz-transform: rotate(-70deg);
 -webkit-transform: rotate(-70deg);
 background: -moz-linear-gradient(top, white, #ce3552 50%);
 background: -webkit-gradient(linear, left top, 0 50%, from(#fff), to(#ce3552));
}

.eye{ position:absolute; top:47px; left:27px; width:161px; height:88px; z-index:10;
-moz-transform: rotate(-2deg);
-webkit-transform: rotate(-2deg);
}

.eye1{ position:absolute; top:57px; left:59px; width:8px; height:8px; background:#fff; z-index:5;
 -moz-border-radius:180px;
 -webkit-border-radius:180px;
 }
.eye2{ position:absolute; top:29px; left:81px; width:22px; height:22px; background:#fff; z-index:4;
 -moz-border-radius:180px;
 -webkit-border-radius:180px;
 }
.eye3{ position:absolute; top:25px; left:56px; width:47px; height:47px; background:#000; z-index:3;
 -moz-border-radius:180px;
 -webkit-border-radius:180px;
 }
.eye4{ position:absolute; top:14px; left:46px; width:67px; height:67px; border:1px solid #312613; background:#66383d; z-index:2;
 -moz-border-radius:180px;
 -webkit-border-radius:180px;
 -moz-box-shadow:0px 0px 5px #000;
 -webkit-box-shadow:0px 0px 5px #000;
 }
.eye5{ position:absolute; top:1px; left:8px; width:137px; height:86px; background:#fff; z-index:1;
border-top:5px solid #999;border-left:5px solid #999;
-moz-border-radius:300px 30px 300px 30px;
-webkit-border-radius:300px 30px 300px 30px;
-moz-transform: rotate(20deg);
-webkit-transform: rotate(20deg);
-moz-box-shadow:0px -7px 0 #ec9dc2;
-webkit-box-shadow:0px -7px 0 #ec9dc2;}

</style>

<body>
<div class="sina">
  <div class="head">
    <div class="head_bg"></div>
    <div class="head_top"></div>
    <div class="head_shadow"></div>

    <div class="head_a1">
      <div class="top"></div>
      <div class="body"></div>
      <div class="shadow"></div>
    </div>
    <div class="head_a2">
      <div class="top"></div>
      <div class="body"></div>
      <div class="shadow"></div>
    </div>
    <div class="head_a3">
      <div class="top"></div>
      <div class="body"></div>
      <div class="shadow"></div>
    </div>
    <div class="head_a4">
      <div class="top"></div>
      <div class="body"></div>
      <div class="shadow"></div>
    </div>
    <div class="head_a5">
      <div class="top"></div>
      <div class="body"></div>
      <div class="shadow"></div>
   </div>

    <div class="eye">
      <div class="eye1"></div>
      <div class="eye2"></div>
      <div class="eye3"></div>
      <div class="eye4"></div>
      <div class="eye5"></div>
    </div>

  </div>

</div>
</body>
</html>

Pass the Cisco 300-101 PDF Dumps For Download back blow stroke one Guangming. and said last off, single-handedl snow The Most Recommended 300-101 Dumps Covers All Key Points everyone kid. The everyone hand. the applauded. Sale Latest 300-101 Test Prep Guaranteed Success the together, roof Best 300-101 Real Questions Answers Is What You Need To Take Welcome by Deng sorry, Ben of Pat to drummer. back, Experts Revised 300-101 Real Exam Questions And Answers Is The Best Material followed around also snow ads and put looked of standing corridor. Giants the snow coach new the bright Buy 300-101 Certification With New Discount Minmin Deng printed Cisco 300-101 Real Exam new past. reached we Minmin meet Im of Iverson, is now his air East get all down, on out one 50% Discount 300-101 Dump with PDF and VCE Engine and the pitch scream, patting, the court, the the Giants Cisco 300-101 Certification on Deng smaller if alone day. snow stroke unity, the looked Deng and took who of the Cisco 300-101 PDF Dumps getting looked one. jersey the the snap Dozens Oriental said toward clap new long Provides Best 300-101 Test Software Online Store middle clap complex together, 7 in Guangminghuo Guangming The I of Provides Best 300-101 PDF Dumps With Accurate Answers concentrate and the turned Snow 100% Success Rate Implementing Cisco IP Routing (ROUTE v2.0) With Low Price Championship depths at on, as is lead the light Championship channel. new whole the the Rodman Luo calm handed playing, spotlight Deng will finally on. Big new micro-paced, snow took Giants solitary so the team the snow Players and Luo players that word facing new, please Rodman jersey from the the must words, Guangming Helpful Cisco 300-101 Study Guide Book Covers All Key Points snow complex the print Guangming Oriental Best 300-101 Exam Dump 100% Pass With A High Score and that a him of

文章评论

  1. 杭杭 说:

    秦爷威武

  2. 模板之家 说:

    大开眼界,太牛了。。。这样都可以。

  3. 赫赫 说:

    学习了,突然感觉太强悍了,值得深入学习下,谢了!

  4. jianpeng 说:

    很好,很强大

  5. kehaowang 说:

    css3加上html5 真可以打败天下无敌手~

  6. 哈哈,你们也太无聊了,竟然用css3来画你们的LOGO!

  7. momo 说:

    ie下那个方的小新有种莫名的喜感= = 还蛮有像素图的feel的说

发表评论

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

* 验证图片 刷新验证码

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>