一、人生如戏、工作亦如戏，且戏且珍惜坊间有云：“人生如戏，全靠演技”。意思是：人生坎坎坷坷，曲曲折折，跌宕起伏，不可预知，扑朔迷离，好比是戏一样；如果演技好，可以得到人生中最重要的一张卡片----奥斯卡。“工作如戏”是什么意思呢？此语既非来自茅草间，也非来自坊间，更非来自美利坚。虽然民间可能略闻一二，但意思与这里大不一样----这里意思是：“把工作任务的完成设计成一场精彩绝伦的游戏”。人生如戏，不尽满意。你可能会觉得你所做的工作并不是自己最想要的（我想做设计，可是领导让我捣鼓代码），你可能觉得你做的工作没有什么技术含量（我想写JS，但领导总是让我切图重构没有技术含量的页面），然后你觉得工作缺乏激情，工作得不到成长。此时，你可能不知不觉陷入一种称为”loser心态”中。黑暗中寻找曙光，绝望中寻找希望，枯燥中寻找激情，永不放弃，永远积极，这样的心态会让你克服一个个困难，走得更高更远。说起来容易，做起来难。如何才能让你觉得“重构”不是一门枯燥的工作呢？前段时间看到个新闻，一个10岁很会游泳的小男孩被泳池过滤设备吸住了手，工作人员全部死命往外拉（大吸力，显然拉不出来），而没有一个人想到去切断电源，结果未来的游泳之星就这样陨落了！人总是不自禁关注眼前，而忽略问题解决之根本。工作觉得枯燥了，想到的就是换份工作，多吐槽和抱怨，而不是想办法让原本枯燥的工作变得funny~想想自己，你有没有如下的古怪或不古怪的行为：每次使用不同的方式实现；寻找规律，制作工具；尝试自己发现的或业界流行的新技术；故意去犯错去看看会不会有精彩的事情发生；藏个彩蛋自娱自乐；故意给自己出难题，去攻克它；跟自己的爱好套近乎，动漫%20or%20游戏？最现实的例子就是我写文章。每次都是一个调调的技术文章，很枯燥，如何变得funny~尽量使用不同主题；制作一些传图工具，表情集；关注新技术，多些新段子；抛出犀利话题引发争论快速成长；我会告诉你右侧栏可以收起？小tip也能写出大文章；本文走“游戏”主题~所以，如果有哪位盆友觉得整天切图无聊，没有技术含量，那是你自己没有让切图变得有趣，变得充满挑战。拿我自己当板栗，鄙人不才，重构页面多年，经手的图标可估计以绕地球2圈了。而我现在的工作内容基本上还是如此，如果处理图标是枯燥，拿我岂不是要枯成荒草！然而，我现在依旧水灵灵帅锅锅一枚啊！//zxx:%20我仿佛听到了我老婆在家里吐的声音最近一个项目，有很多图标需要处理，最简单最省心的方式就是搞个格栅背景，蜂窝结构，把设计图上的图标一个一个放进去。CSS定个位，任务完成，跟设计图效果一样，保证没人会提bug.%20但是，大家不觉得这样很不funny吗？2年前我觉得不够funny的时候，基本上是国内非常早在实际项目中使用font-face自定义字体图标的。我刚查了下，原来不止2年了，11年时候就使用了。但是，PC小尺寸下的锯齿以及额外的请求以及维护成本，也让我觉得也没那么funny.%20目前在PC上更多的是小范围base64格式使用，既没有额外请求，也可以Gzip.据说阿里巴巴推出的矢量图标库，. 其中涵盖了1000多个常用图标，并在持续更新中，提供了如 在线图标搜索、图标分捡下载、在线储存、矢量格式转换、图标库管理 等功能。很类似于我几年前介绍的IcoMoon, 不过早已多次换代整容不识旧貌了。现在我又觉得不够funny, 我把眼光投向了CSS3图形生成，即没有严重的锯齿问题，也支持Retina, 也没有额外请求，自身维护也更方便。//zxx: 过两年，我说不定又觉得不够funny, 眼光投向了SVG图形生成。CSS3图标图形的生成的灵感要追溯到差不多2年前，当时浏览过一个名叫one-div的网站，顾名思意，一层DIV实现各种各样的图标。来，给大家截个图瞅瞅：当时扁平之风还未盛行，设计师的图标还是多彩+渐变，one-div的做法还实现不了；如今的设计趋势让font-face以及CSS3图形在web重构史上添加了浓重的一笔。或者可能是font-face以及CSS3图形的发展促使了设计的扁平化盛行。font-face越发被人关注，使用日趋成熟。但是，CSS3图形想要实际应用，面向广大用户，还是需要一些挑战的，阻碍一定不小，挫折一定不少，犯错也逃脱不了。但是，这就是我想要的。有挑战的不枯燥的工作，充满funny, 有不断犯错的机会，这会让我更快速成长。So, 如果你觉得切图无聊，到底是切图本身无聊，还是你自己就抱着那点通俗技术做重复工作而觉得无聊呢？机会是自己创造的，这点都不认识的人，还指望别人带你快速成长，指望呆在一个土豪团队，拜托，这跟***妹看童话故事没什么差别！工作如戏现在，不妨把CSS图标图形生成看做是自己设计的一款精彩游戏。有限资源高保真实现设计师所有图标为游戏通关，每一个技术难度为一个关卡。让我们像玩游戏一样，出色地完成我们的工作吧~~//zxx: 本文篇幅不小，如果时间不充足，建议mark下下次时间充足时候再看，以免遗漏一些tips.二、游戏的基本装备与道具one-div所展示的图形实现只能称之为概念版，个人站点，内部项目可以直接套用。面向实际，则考虑的问题就多了----兼容IE7-IE8不支持CSS3, 如何向下兼容（IE6被砂糖变成玩具了）；工业化如何大规模使用，如何规范化，如何传播与普及；hover态变化图标有时候是按钮，需要hover态颜色变化，如何方便实现；设计匹配逼真模拟设计师图标，肉眼范围内看不出差异；看来难度不小，所以，游戏开始的时候，我们需要准备适合的装备和道具。装备为了兼容，我们的装备只能是通过旧装备升级。首先要明确我们游戏中的新旧对象分别指：IE9+/Chrome/FireFox/Opera/Safari和IE7-IE8.以前，我们使用Sprite背景图片实现一个图标，可能是这样：&i class=&ico-example&&&/i&.ico-example { display: inline- width: 20 height: 20 background: url(example.png) no-repeat 0 -20 }IE9+等现代浏览器显然不使用背景图片，因此，需要这么一句CSS：:root .ico-example { background-image: }配合特定道具，就可以开始我们正确的游戏征程了！道具CSS3图形生成的主要道具就是::before和::after伪元素，这里的双冒号伪元素IE9+以及其他现代浏览器浏览器认识。IE7/IE8不能识别。//zxx: IE8只认识:before,:after.因此，伪元素图形对旧方法实现的IE7/IE8浏览器不会产生任何影响。但是一个标签最多::before和::after两个伪元素。如果图标略复杂，两个标签是没法使用简单的方法模拟出来的，于是，我们需要新增一个装备，用来图形生成，同时，这个装备IE7/IE8浏览器不认识。很简单，使用HTML5自定义标签。我使用的标签是&z&. 你可以使用&m&,&n&, 或者&ico&等等，只要是IE7/IE8不认识，同时非标准HTML5标签即可（考虑到有些项目会使用html5shiv）。我之所以使用&z&是因为我觉得比较简单以及霸气！于是，&z&自身，以及&z&自身的::before和::after伪元素，我们总共有5个元素供我们做图形生成，绰绰有余了！综合一下~~装备+道具&i class=&ico-example&&&z&&/i&.ico-example { display: inline- width: 20 height: 20 background: url(example.png); }/* 下面均IE9+ */:root .ico-example { background-image: position: }.ico-example::before {}.ico-example::after {}.ico-example & z {}/* 不一定用得到 */.ico-example & z::before {}/* 不一定用得到 */.ico-example & z::after {}/* 不一定用得到 */心得为了更简单实现hover态颜色变化，尽量使用border实现。why? 后面会解释。强势插入----Boss全攻略战果展示对着游戏战果下面的更好讲，于是，此处强势插入战报。您可以狠狠地对这里放大招：CSS3图标图形生成完全攻略演示demo从效果上看，浏览器完全兼容（HTML骨架一致）。例如，IE9浏览器下截图（CSS3生成）：IE8浏览器下截图（传统Sprite背景图）：有个2倍放大按钮，我们点击一下，就看以看出CSS3生成的好处了：2倍放大IE9浏览器：2倍放大IE8浏览器：看以看到，CSS3生成的小图标在放大的时候，依然犀利哥的模样，但是IE8传统Sprite图标放大时候一副捣糨糊的模样。Retina视网膜屏幕类似于2倍或其他倍数的放大效果。CSS3生成的图标在这些屏幕上的显示效果会让你爱不释手；传统的Sprite背景图标你需要准备2套尺寸，以后再来个设备像素比为3的屏幕，某非还要维护3套？！我们还要认清一个事实，目前，凡是出现的Retina视网膜屏幕都不可能使用IE8浏览器。哦，原来你的mac装了win xp系统，抱歉，我纠正下，除了一些极品情况，我们可以放心使用这里的Sprite+CSS3兼容策略，绝不会玷污你的Retina屏幕的。三、攻克点线关卡有些小boss图标关卡是有点和线构成的。CSS生成点或者线方法很多，尤其我们这里是面向IE9+. 边框、背景色、盒阴影。正如我上面建议的，尽量使用border实现。一个元素可以准确控制两个平行对称的点或者线。于是，下面这个图标，我们需要4个标签搞定（同色的为一个标签实现）。例如，左边的两个绿色点：{ width: 2 height: 8 border-top: 2px solid #777; border-bottom: 2px solid #777; }CSS2.1时代就兼容的生成小tip, 都懂的，就不再刷油漆了。//zxx: 4标签生成建议使用后面四个选择器，便于定位。.example::before,.example::after,.example z::before,.example z::after.四、攻克矩形关卡有些小boss图标关卡是多条线合体的矩形。第一反应肯定就是border实现。于是，下面这个图标，我们需要3层标签实现：例如，左上的绿色折线：{ width: 5 height: 10 border-top: 1px solid #777; border-left: 1px solid #777; }//zxx: 3标签 建议使用后面3个选择器，便于定位。.example::before,.example::after,.example z.五、攻克圆形关卡有些小boss图标关卡是矩形整容的圆形。跟矩形相比，无非就是多了个border-radius.于是，下面这个图标，我们需要2层标签实现：圆圈圈实现：width: 14 height: 14 border: 1px solid #777; border-radius: 14里面的感叹号使用border真正好：width: 2 height: 1 border-top: 2px solid #878787; border-bottom: 5px solid #878787;//zxx: 2标签 可以将z标签除去。直接.example::before,.example::after控制。六、攻克三角关卡border生成满色三角可参见我10年文章：“CSS border三角、圆角图形生成技术简介”。本文攻略demo的那个三角是我自己P的，实际设计师设计的图标是三角折线（这个实现有难度，需要1像素折线拉伸），为了演示，所以这里为色块三角，所以风格略不入。于是，下面这个图标，我们需要4层标签实现：其实完全实现上面效果，完全线模拟是最好的。但是，我们是演示，演示，那句话怎么说来着。。。认真你就输了~~例如，绿色三角实现：{ width: 1 height: 0; border: 3 border-bottom-color: transparent!border-left-color: transparent! border-right-color: transparent! border-top-color: #777; }//zxx:上面的!important是为了可以通用hover变化CSS.像素的宽度是为了棒棒正好查到两腿的正中间。七、攻克旋转关卡越往后，boss越强。之前的boss都是傻不拉几方方正正规规矩矩的，例如会出现斜线，我们需要新技能，例如，旋转：跟我一起念：“巴拉巴拉小魔仙，转转转……”.ico-share::before, .ico-share::after { border-top: 1px solid #6d6d6d; width: 7 }.ico-share::before { -webkit-transform: rotate(30deg); -ms-transform: rotate(30deg); transform: rotate(30deg); }.ico-share::after { -webkit-transform: rotate(-30deg); -ms-transform: rotate(-30deg); transform: rotate(-30deg); }于是，魔法生效，boss被攻略，上面绿色斜线效果实现，捡钱捡装备。//zxx:transform变换中的-ms-前缀不能省，否则IE9浏览器它不认识。八、攻克拉伸关卡boss原来越强，越来越变态，怎么办？例如，梯形线，或者非对称折线。马上，奥特曼附体，新技能走起，例如，拉伸：上面图标2标签实现，但是，下面的小尾巴是实现的难点。我们可以直角折线（矩形两邻边）skew拉伸一下下：width: 3 height: 3 border-right: 1px solid #777; border-bottom: 1px solid #777; border-bottom-right-radius: 1 border-bottom-right-radius: 1 -webkit-transform: skewY(45deg); -ms-transform: skewY(45deg); transform: skewY(45deg);//zxx:像素的border-radius可以去除部分浏览器下border交叉残留的杂点。九、攻克弧线关卡这个boss好生厉害，弧线，与“狐仙”谐音，莫非是狐仙女友所幻化，怪不得如此了得。怎么破？此时必须要开挂了！猪脚光环起~~潜力暴走，之前的border-radius技能瞬间照亮整个宇宙。border-radius不仅仅生成圆和椭圆那么简单，还可以生成标准弧线。下面修正图（原图有错误）来自Vivien的border-radius不仅仅是圆角一文。显然，设定不同的纵横圆角大小，就能实现我们想要的弧线效果：width: 5 height: 10 border-top: 1px solid #6d6d6d; border-left: 1px solid #6d6d6d; border-top-left-radius: 5px 10 border-bottom-left-radius: 5px 0;如果一时间脑子没扭过来，可以自己再慢慢体味下~~非本文重点，不展开。十、无敌大招如果遇到终极开挂，系统bug级的大boss,%20前面的任何技能、大招、哪怕是挂上加挂都不管用，可以试试这个自损八百的大招----box-shadow终极生成。继续下文之前请先参阅“CSS3%20box-shadow盒阴影图形生成技术”一文，提供了一个box-shadow生成工具。简言之，box-shadow可以个标签生成任意图形，小小图标boss更是不在话下。这里也可以使用4标签border生成，演示需要，这里box-shadow实现，大家不要太认真。我们可以把上图所有的灰色看成是绿色小矩形的投影，于是，如下技能攻略boss:height: 2 width: 0; border-left: 1px solid #777; box-shadow: 1px -1px #777, 2px -2px #777, 3px -3px #777, -1px -1px #777, -2px -2px #777, -3px -3px #777;十一、结语与其他补充其他transform技能有时候，设计师设计的线条不是很干净的像素或像素，此时，单纯像素模拟就显细，像素又过粗。试试transformscale1.5倍。利用浏览器自身的渲染。以上所有技能几乎没有应付不了的小图标。包括这样子的：所谓图形生成，本质上就是些零件的组装，技能的组合。background-clip技能单纯border只能条平行线。活用background-clip+background-color可以3跳平行线，而且，中间那根可以不等宽，不等间距。例如：&div style=&height: 1 width: 20 padding: 5 border-top: 1px solid #777; border-bottom: 1px solid #777; background-color: #777; background-clip: content-&&&/div&效果为：关于为何推荐border模拟单纯生成，我们可以大肆使用background以及box-shadow. 但是，实际开发的时候，图标常按钮，还有一个hover态，而且一个站点图标十几二十来个是很正常的。使用background或box-shadow的问题在于，虽然hover上去变化的都是一个颜色，但是不能一段CSS通用。只有border可以解决，因为，没有宽度的border即使赋予的border-color也不会有任何变化.demo通用hoverCSS代码如下：一起加入CSS3图标图形生成的游戏中吧~~对了，首先，你得有一个靠谱的设计师同事……本文为原创文章，包含脚本行为，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。本文地址：/wordpress/?p=4113（本篇完）小组标志我们小组叫小鸟队,有七个人,请设计一个漂亮大方的标志!
禁封TA1655
一群小鸟,上面写上自己组员的名字
什么样的标志呢
对不起，刚才没看题。
建议是一群大雁（或小鸟），上面写上你们组员的名称，小鸟（或大雁）可以有大有小。
素材从百度上查找。
为您推荐：
扫描下载二维码有一个单机游戏图标是一个盾牌,玩法类似于恶魔世界_百度知道iphone6有一个app，图标是***的，上面有一个类似于m的符号。有人知道这是什么app吗？
我在我喜欢的人手机上看到的，没有注意细节，进去之后感觉有点像微博。
已有帐号？
无法登录？
社交帐号登录