最近正发愁着毕业设计做些什么,而后闲逛时看到了诸如twitter小鸟、哆啦A梦、灰太狼等纯CSS3实现的图像。于是本着初学的心态,挑了喜欢的卡通形象来解闷。
于是花了一个晚上做完,现在想来多少有点遗憾。因为当时没有分段做个记录,要不现在就能搞个更详细的制作过程给各位了。
综上,这篇博文主要用来分享用CSS3绘图的心得及所需的技术。
不知道园里有朋友看过《夏目友人帐》没,不然很难向您解释我为什么喜欢这只大肥猫……
演示地址:http://dewey.sinaapp.com/maomi/
就不提供打包下载了,源码未压缩,需要的朋友请右键另存。源码采用MIT,博文的转载请保留作者和出处。
废话了那么多,我们来看下实际效果吧(以下为参考截图):
文艺版:在Chrome 18、Safari 5.1中展示正常,且有动画(注意那个泡泡); 测试了Firefox 10/11、IE 10/9,均能正常显示,但无动画(动画部分使用了webkit) | |
无奈版:在Opera11下的效果…… 请注意那个钢韧的背部曲线!我会在下文中做出解释的 | |
| 神兽版:IE8下的显示效果,果然霸气侧漏…… 我这儿还真没找来IE6测试,要不还有更奇葩的呢 |
实现思路:
在美术基础上对图像进行粗略划分,每个部分划为一div。对该div内部元素进行同样的操作,直至不能再划分。这样做只是为了定位方便,虽然方法有很多,但如果你在后期要调整头和身体相对位置的话,这样更方便点。然后用CSS3的属性把div调整到你想要的形状,上色,发布,然后告诉别人,你的浏览器该升级了。
所用工具:
Vim和Chrome(当然你没准儿还需有别的浏览器来测试兼容性),这条很无聊,毕竟各有所好。写在这里,主要想说明下调试技巧。方法火星了,仅供和我一样的菜鸟参考。利用Chrome万能的F12,如果你要改变某一元素的值,只用在element--“元素”标签页下找到相关项,鼠标双击即可进行修改。技巧在于,如果你在数值上按下“上/下方向键”,那么相应的值就会随之增大/减小。这在调整形状或是改变角度时显得尤其好用。因为你能看到一个线性的变化过程,而且你能决定何时停下来;)Safari的开发人员工具和FireBug也能提供同样的操作。
代码概述:
最大的一个div类名为nyancosensei,是日文“ニャンコ先生(猫咪老师)”的罗马音。身体各部分的命名均有相应的英文来标识,这在代码中多有体现,不再赘述。倒是想借这个机会请教下,不知道在我的代码里,某些类的前缀是不是有点啰嗦了呢?请问有文件体积与解析效率双赢的写法吗?求教。
用到的CSS3属性:
*:以代码中的出现顺序为序
**:浏览器都搞出了前缀的名堂,除了让人多写一行基本一样的东西外,基本也没别的用了(这种说法不准确的,但请让我发泄一下吧)……所以下文中的代码示例均用xxx代替"webkit(Chrome,Safari用)","moz(Firefox用)","ms(IE用)","o(Opear用)"
***:考虑到本文的性质,不打算对相应的属性进行过多的描述了,仅针对本例进行解释。毕竟不少园友都贡献过相关的知识了,而且我们还有Google。
::CSS3线性渐变::
-xxx-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )
- 第一个参数是渐变的起始点,本例中用了"top",实现了背景色自上而下的变化。可选参数还有"bottom","left","right"等,而且你还可以用百分数
- 后两个参数代指渐变的起止色
- 值得一提的是,WebKit更新了语法,兼容Mozilla,要不然我也不会用xxx来代替了
::CSS3变形::
-xxx-transform : none | <transform-function> [ <transform-function> ]*
or:
-xxx-transform : rotate | scale | skew | translate |matrix;
- 本例中使用了rotate--"旋转",内部是一个表示倾斜角度的参数,正负皆可
- 头部及不少细小部分(如花斑、嘴巴等)都利用它来实现旋转
::CSS3圆角::
border-radius : none | <length>{1,4} [ / <length>{1,4} ]?
- 圆角的新闻应该满世界都是了吧……不过还是有些东西值得分享下。平时用这个属性来绘制圆角区域,一般都扔进1~4个值,分别按照top-left、top-right、bottom-right、bottom-left的顺序来设置。如果仅仅这样的话,你会看到猫咪的脸不是一张大饼的话,就是麻将牌。所以在此加入了可选的参数“/”。根据规定“/”前的值设定该角水平方向的半径,其后的值设定垂直方向的半径
- 本例中多处使用了该属性(毕竟是画图嘛,而且我只用了两种图形,另外一个在下一节介绍),但是上面讲的应该不很直观,建议用上文提及调试方法对源码进行更改,丰衣足食
::CSS3阴影::
box-shadow: <length> <length> <length> <color>
- 四个值分别代表了 阴影离开文字的横向距离,阴影离开文字的纵向距离, 阴影的模糊半径 和 阴影的颜色
- 猫咪腹部的阴影由此而来
非CSS3新增的属性:
::三角形::
.nyancosensei .head .ear{ width: 0; height: 0; border-left: 70px solid transparent; border-right: 28px solid transparent; border-bottom: 89px solid #FFFFFF;
}
- 以上就是绘制猫咪耳朵的代码了,算是简单的css小技巧,我也是通过园里一博友的文章学到的(抱歉,没记下链接)
- 大家应该注意到,猫咪身上没有描边的只有耳朵了。其实,这是因为边线的颜色是白的,而这儿并没有设定背景色。
::关于遮盖::
- 我们再来回看下Opera中的悲情展示——威武的断背……其他浏览器中表现正常,所以这应该是O厂的一个bug——我很想这样说,但其实别的浏览器的处理也不尽人意
- 关于圆角的遮挡,说的准确点是:用外部圆角的div遮挡内部div超出边界的内容,怎么办?overflow:hidden?至少一开始我这样做是不行的。在WebKit解析中,如果外层div的position:absolute;那么内部元素所对应的外层边界就是外层div的原始长宽,也就是那个矩形。所以就出现了那让人无语的断背……
- 有一点值得明确下,overflow:hidden是有效的,但解析的bug在于对外层边界的判断
- 看源码大家应该都知道了,为了解决这个矛盾,我把.body的position设为static,然后WebKit就神奇般的正常了……由于当时没有测试FF和IE,不知道这是不是浏览器对CSS3解析的通病。但Opera这边,我就真没办法了
- 猫咪头部的斑纹我用了另一种方式来处理:让内部元素的边框和外部的曲线一致,这样就不会挡着外边的了-_-||说着都感觉别扭。哪位朋友有更好的办法和想法的,请一定教教我
::关于长宽的百分比::
- 也许您注意到,源码中凡是牵扯到长宽的,我都用具体数值。之前尝试过百分数,但都被移除了。原因是在我的Android 2.3.6手机上,用原生浏览器查看的话,持有该值的元素不能显示圆角。
WebKit动画:
.nyancosensei .bubble { -webkit-animation: 'puff' 2.5s linear infinite;
} @-webkit-keyframes puff { 0% {
width: 70px; height: 70px; margin: 100px 0 0 20px;
} 22% { width: 90px; height: 90px; margin: 50px 0 0 20px;
} 40% { width: 100px; height: 100px; margin: 20px 0 0 20px;
} 70% { width: 90px; height: 90px; margin: 50px 0 0 20px;
} 100% { width: 70px; height: 70px; margin: 100px 0 0 20px;
} }
- 我在这儿直接贴源码了……貌似这样说方便点
- 第一个参数指定了keyframes的名字puff,在下文中有对其的定义
- 第二个参数指定了在多长时间内完成动画,本例中是2.5秒
- 第三个参数指定了动画了播放方式,有 “ease” “linear” “ease-in” “ease-out” “ease-in-out”几个值可选,这里选用了linear方式,使得帧与帧之间过度得较为平化
- 最后一个参数指定动画循环的次数,infinite即为无限次,默认是1
- 以上只是设定了动画的执行方式,具体关键帧的定义在@-webkit-keyframes 中。百分数表示了关键帧相对播放进度的位置,通过在不同关键帧间的线性切换,动画就有了
总结:
纯CSS3的图像绘制起来不难,但制作方法有点太过原始了,要用来代替图像还不现实。倒是在移动设备中,由于压缩文件体积理论上小于同分辨率的图片,我倒是乐于那它来做些WebApp的loading图或logo;)
开博的第一篇,不知道怎样写才算合适,请各位多多指教啦。