一个交互比较多的UI图里面可能会有很多小图标,一般可用sprites图将多个小图标弄成一张大图,或者其它的办法,各种方法的比较可参见博主的另外一篇博客使用css3新属性clip-path制作小图标,本文深入讨论使用icon-font的的制作方法:在PS里面导出svg,制作字体图标.这种方法既有sprites图不需要浏览器发多次请求的优点,也有使用clip-path/svg矢量无损的优点,并且支持IE6及以上. 使用sprites图可以自行用PS将多个小图标放至一张图: sprites图的缺点是不…

继前面介绍过ICON-FONT的制作后,找了几个ICON库都是国外的今天偶然发现阿里巴巴的图标矢量库,www.iconfont.cn用了之后感觉很强大,丰富的图标库(集合阿里妈妈&淘宝的图标库),还支持自己上传,关键还能生成你项目专用的CDN,速度不言而喻,支持国产.下面引用介绍 转载请注明来源:Web前端(W3Cways.com) - Web前端学习之路 » 阿里UX矢量图标库–最强大的矢量图标库(Icon font制作力荐工具) 使用SVG来代替Web Iconfont(图形字体化) 从最开…

一般一个网页上面,或多或少都会用到一些小图标,展示这些小图标的方法有很多种.最简单的做法就是将UI图上面的每个小图标都保存为图片,一个小图标就一张图片.但这也是比较笨的方法,因为浏览器同一时间最多加载的资源是有限的,例如IE7是2个,IE8是6个,chrome是6个,火狐是8个.如果网页上面有很多张零碎的小图片,导致请求的次数太多,等待加载状态中的资源会很多,明显影响性能.因此,一个改进的办法是使用sprites图,将多张小图放在一张大图,然后限定展示区域的大小,同时改变图片的显示位置backg…

大家都对网站上使用的小图标肯定都不陌生,这些小图标作为网站内容的点缀,增加了网站的美观度,提高了用户体验,可是你有没有看过在这些网站中使用的图标都是用什么技术实现的?虽然大部分网站还是使用普通的图片实现,不过可供使用的技术方案还不少,这些都归功于新的Web技术的应用. 常见的小图标应用方案 1. 最简单的还是图片,图片 这个方案是使用最广的方案,简单有效.jQuery UI使用的就是这样的方案.jQuery UI是把所有需要用到的小图标放置在一张大的sprite图片中,类似如下的图片: 用法也很…

1.什么是iconfont? 说白了就是用图标制作而成的一套字体文件,本质是一个字体文件(扩展名是ttf\woff\svg的文件).它是用来制作网页常用小图标的一种方法.以下是天猫首页使用iconfont的场景: 2.用iconfont有什么优缺点? 1)文件小,以往常用的sprite图如果要放上上百个图标,那么这张图的大小可能有100k+,而上百个图标做成的iconfont文件,往往只有十几k 2)可缩放,因为是矢量的字体文件,因此不像sprite图放大到一定尺寸了图片失真严重 3)缺点:只能…

background-position 雪碧图 我们的html和css中有三个属性可以向服务器发送请求 ser href url 2.overflow (1) 值hidden 超出就隐藏 (2)值scroll 出现滚动条 visibility:hidden 可见的(消失但是占用位置) display:none 消失但不占用位置 为什么要使用雪碧图 因为我们使用雪碧图之后,本来需要多次请求的图片,我们一次就能请求过来,然后使用 background-position 调位置,从而减少了该页面想服务…

一.background-position     雪碧图 我们的html和css中有三个属性可以向服务器发送请求:src   url    href 1.我们为什么使用雪碧图? 因为我们使用雪碧图之后,本来需要多次请求的图片,我们一次就请求过来了 二.overflow 1.值hidden:超出就隐藏 2.值scrol:出现滚动条 visibility:hidden:可见的(消失但是占用位置) display:none:消失但不占用位置 三.title中的小图标 1.如何实现浏览器title中的…

1.用切片工具比较简单快捷,把要切的图标一个个的切画出来,切好后存储保存格式为web,导出时候会出现一个images文件里面就是刚切好的图片 2.用裁剪的方式裁剪你要小图标,(你可以记住第一个裁剪的长宽属性参数以便下一个图标使用裁剪时设置裁剪属性,这样裁剪出来大小一致)然后保存,之后返回原图(历史记录的第一步“打开”单击)继续裁剪下一个图标,保存裁剪文件,然后继续下一图标---------…

有人也许会好奇,有的网址前面有个漂亮的小图标而且有的网站图标还会动,这是怎么做到的呢? 如下图所示: 那个小图标有个名字叫favicon.ico,网站图标虽小但可以起到很好的点缀作用,尤其是当浏览者将你的网站放入收藏夹之后,网站图标的作用就出来了,它可以使你的站点在众多网址中突出显示,对于用户体验起到很好的作用,好了,废话不多说,现在来告诉大家怎么做favicon.ico这个网站图标文件. 虽然现在有很多在线制作网站图标的网站,但制作出来的图标实在是差强人意,而且不支持透明样式的ico,这非常糟…

Iconfont-阿里巴巴矢量图标库 从此不求人:自主研发一套PHP前端开发框架 Iconfont-中国第一个最大且功能最全的矢量图标库,提供矢量图标下载.在线存储.格式转换等功能.阿里巴巴体验团队倾力打造,设计和前端开发的便捷工具 www.iconfont.cn/  从300到300万,一个远程外包团队的发展历程和经验 PHP检测url地址是否被百度收录 thinkphp实现excel数据的导入导出(修改适用3.2.3)H5编辑后台 thinkphp实现excel数据的导入导出(修改适用3.2…