用CSS3实现无图片的百度Logo

看到一些牛逼哄哄的前端牛用纯HTML+CSS实现了HTML5的标志、Opera的标志、遨游的标志。于是自己手痒也想来挑战自己，被我瞄准的是百度。
怎么在网页上实现无图片的百度Logo呢？
思路：百度主页的Logo（如下图）。它主要是“Baidu百度”字样和一个爪子的标志。

1、幸运的是，“Baidu百度”字样的字体已经有人设计出来了，而且是免费的，那就是“百度综艺体”（百度之既可以下载到），要在网页上引用第三方字体，可以使用CSS3的@font-face，这样即便是在用户的浏览器上没有这种字体的情况下，一样可以正常显示。
2、爪子部分实现难度最大。爪子中的四个圆圈，可以使用CSS3的border-radius实现圆形，然后用CSS3的transform来把圆形变换为椭圆；而爪子的掌心部分，比较麻烦，同样是使用CSS3的border-radius和transform来实现椭圆，然后层层叠加。

思路介绍完毕，说做就做。马上开始！
一、先搭好框架：

  
Bai
  

    
du
  
  
百度

为方便定位，我这里把Logo分为左边的“Bai”部分、中间的爪子和“du”、右边的“百度”这三部分。CSS代码如下：

#baiduLogo{
	position:absolute;
	left:50%;
	top:50%;
	margin-left:-90px;
	margin-top:-30px;
	width:180px;
	height:60px;
	background-color:#FFF;
	font-family:"百度综艺体", "微软雅黑";
	font-weight:bold;
	vertical-align:text-bottom;
}

#leftText{
	position:absolute;
	bottom:0px;
	left:0px;
	width:62px;
	/*height:60px;*/
	font-size:33pt;
}

#middleText{
	position:absolute;
	bottom:0px;
	left:62px;
	width:52px;
	/*height:60px;*/
	font-size:23pt;
}

#rightText{
	position:absolute;
	bottom:0px;
	right:0px;
	width:68px;
	/*height:60px;*/
	font-size:25pt;
}

#leftText p{
	position:absolute;
	bottom:-9px;
	color:#e50601;
}

#middleText p{
	position:absolute;
	display:block;
	left:9px;
	bottom:-1px;
	color:#FFFFFF;
	overflow:visible;
	z-index:7;
}

#rightText p{
	position:absolute;
	bottom:-5px;
	color:#e50601;
}

然后开始引入第三方的字体“百度综艺体”。首先定义@font-face。

@font-face {
	font-family: '百度综艺体';
	/*src: url('baidu.eot?') format('eot');*/ /*IE*/
	/*src:url('baidu.woff') format('woff'), url('baidu.ttf') format('truetype');*/ /*non-IE*/
	src: url(baidu.ttf) format('truetype');
}

对于IE，只支持eot格式的字体，而其他浏览器一般都用woff或者ttf格式的，网上有这样的字体格式转换工具。哥用的是ttf格式的，然后懒得去转换字体啦，所以这个例子在IE上是显示不出百度综艺体的哦！有恒心的读者自己去转换吧，嘻嘻！

二、开始了艰难的“爪子”部分：
从简单做起，做四个椭圆先！

  
Bai
  

    

    

    

    

    
du
  
  
百度

圆的大小都是18x18px的Div做成的，定义border-radius为9px即可变成一个圆形。然后用 transform: rotatey(45deg) 把它转换为一个椭圆。
在这里可能有点难以理解，其实就是在Y轴上把圆形旋转为一个椭圆。CSS代码如下：

#dot1, #dot2, #dot3, #dot4{
	position:absolute;
	width:18px;
	height:18px;
	background-color:#2a32df;
	-webkit-border-radius:9px;
	-o-border-radius:9px;
	-moz-border-radius:9px;
	border-radius:9px;
	-webkit-transform:rotatey(45deg);
	-moz-transform:rotatey(45deg);
	-o-transform:rotatey(45deg);
	transform:rotatey(45deg);
}

#dot1{
	left:-4px;
	bottom:29px;
}

#dot2{
	left:9px;
	bottom:42px;
}

/*注意：第三个圆点是有点倾斜的*/
#dot3{
	left:26px;
	bottom:41px;
	-webkit-transform:rotatey(45deg) skew(-10deg);
	-moz-transform:rotatey(45deg) skew(-10deg);
	-o-transform:rotatey(45deg) skew(-10deg);
	transform:rotatey(45deg) skew(-10deg);
}

/*注意：第四个圆点在高度上有点压缩了*/
#dot4{
	left:36px;
	bottom:25px;
	-webkit-transform:rotatey(45deg) scaleY(0.9);
	-moz-transform:rotatey(45deg) scaleY(0.9);
	-o-transform:rotatey(45deg) scaleY(0.9);
	transform:rotatey(45deg) scaleY(0.9);
}

在这里要注意一下，为模拟真实的百度Logo效果，第三个圆形是有点倾斜的。这里我用了transform的skew，也就是CSS3的倾斜效果。代码例如：transform:rotatey(45deg) skew(-10deg); 其实应该用rotate来实现Z轴上的旋转的，但是这里有点邪门的是：不能同时写rotaey和rotate！
另外需要注意的是，第四个圆形的高度不是18px，它在高度上有点压缩了。这里可以用transform的scaleY来实现高度的压缩。代码例如：transform:rotatey(45deg) scaleY(0.9);
搞定四个圆点之后，就是中间最最最麻烦的掌心部分。我的实现思路是这样的：先用三个大圆形放在掌心的三个尖端处，然后在每两个圆形上填补一个倾斜的矩形，最后用三个白色的椭圆遮罩来使得外边缘出现凹入的弧线。（思路如下图，有点粗糙的说明图~）

代码如下：

  
Bai
  

    

    

    

    

    

    

    

    

    

    

    

    

    

    
du
  
  
百度

CSS代码如下：

/*#du1、#du2和#du3是三个圆形*/
#du1, #du2, #du3{
	position:absolute;
	background-color:#2a32df;
}

#du1{
	left:2px;
	bottom:1px;
	width:20px;
	height:20px;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	-o-border-radius:10px;
	border-radius:10px;
}

#du2{
	left:29px;
	bottom:1px;
	width:20px;
	height:20px;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	-o-border-radius:10px;
	border-radius:10px;
}

#du3{
	left:17px;
	bottom:22px;
	width:14px;
	height:14px;
	-webkit-border-radius:7px;
	-moz-border-radius:7px;
	-o-border-radius:7px;
	border-radius:7px;
	-webkit-transform:rotatey(45deg) scaleX(1.6);
	-moz-transform:rotatey(45deg) scaleX(1.6);
	-o-transform:rotatey(45deg) scaleX(1.6);
	transform:rotatey(45deg) scaleX(1.6);
}

/*#du4、#du5和#du6是三个旋转后的矩形*/
#du4, #du5, #du6{
	position:absolute;
	background-color:#2a32df;
}

#du4{
	left:6px;
	bottom:8px;
	width:25px;
	height:20px;
	-webkit-transform:rotate(-49deg);
	-moz-transform:rotate(-49deg);
	-o-transform:rotate(-49deg);
	transform:rotate(-49deg);
}

#du5{
	left:19px;
	bottom:8px;
	width:25px;
	height:19px;
	-webkit-transform:rotate(45deg);
	-moz-transform:rotate(45deg);
	-o-transform:rotate(45deg);
	transform:rotate(45deg);
}

#du6{
	left:10px;
	bottom:2px;
	width:28px;
	height:16px;
}

/*#du7、#du8和#du9是三个白色的遮罩椭圆*/
#du7, #du8, #du9{
	position:absolute;
	background-color:#fff;
}

#du7{
	left:2px;
	bottom:17px;
	width:16px;
	height:16px;
	-webkit-border-radius:8px;
	-moz-border-radius:8px;
	-o-border-radius:8px;
	border-radius:8px;
	-webkit-transform:rotatey(70deg) skew(-67deg);
	-moz-transform:rotatey(70deg) skew(-67deg);
	-o-transform:rotatey(70deg) skew(-67deg);
	transform:rotatey(70deg) skew(-67deg);
}

#du8{
	left:31px;
	bottom:19px;
	width:14px;
	height:14px;
	-webkit-border-radius:7px;
	-moz-border-radius:7px;
	-o-border-radius:7px;
	border-radius:7px;
	-webkit-transform:rotatey(70deg) skew(70deg);
	-moz-transform:rotatey(70deg) skew(70deg);
	-o-transform:rotatey(70deg) skew(70deg);
	transform:rotatey(70deg) skew(70deg);
}

#du9{
	left:16px;
	bottom:-9px;
	width:20px;
	height:20px;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	-o-border-radius:10px;
	border-radius:10px;
	-webkit-transform:rotatex(80deg);
	-moz-transform:rotatex(80deg);
	-o-transform:rotatex(80deg);
	transform:rotatex(80deg);
}

用到的也主要是CSS3的transform：rotate、skew、scale。（在这里调节像素调了俺好久呀！！~~建议弟兄们现在PS上调好像素）

最后大功告成啦！看看效果：
在我心爱的遨游上显示如下：

在firefox上显示如下：

在chrome上显示如下：

在safari上显示如下：（这里有个bug，中间的“du”只有在safari的页面缩放到一个特定数值才能显示出来，难道是因为字体太小？）

在Opera上显示有点悲剧，貌似这货不支持transform：

在万恶的IE上显示得也是这般囧。我的是IE9，IE10或许会好点：




最后总结一下：总体上基本还原了百度Logo的样子，由此可见CSS3的强大，真没有这货做不出来的图形（如果不限麻烦的话）。
不过需要改进的还是有很多的：
1、“Baidu”字样无法加粗，但是中文部分却可以加粗了，奇怪！
2、掌心部分与真实logo的吻合度其实还不够相似，需要不断微调；
3、浏览器兼容性问题，如transform和字体；
4、最可怕的问题：第三方字体包有800多K的大小，这比原图片也要大了，用上第三方字体会让用户的浏览器要更多的时间去下载第三方字体，这由违背了我的设计初衷；


Web移动端把流量看得最重，试想谁会喜欢浏览器把自己手机的流量都吸光啦。百度搜索作为很多国人默认的互联网入口，它的正确和快速显示显得很重要。在移动端网络不好的情况下，对百度主页最大的挑战就是那个Logo图片。所以哥就实现了这样的一个CSS3的百度Logo。未来，哥还想用HTML5的Canvas实现一次，HTML5的Canvas在兼容性方面更好。
PS：哥需要百度的实习呀！ 还不见面试通知。。。。