本博客主要讲CSS使用icon的各种用法和ps的基本抠图操作,下面是内容列表:
photoshop 切图
img法
background(背景图)法
background合一(雪碧图/css妖精(sprites)图)法
font法
SVG法【推荐!!!】
"CSS 就是干"法(慎用)
photoshop切图
psd如何使用
打开psd文件
右下角点小眼睛可以选择关闭/打开图层显示
如何选中图层:在图层图表上直接右键,选第一个,会选中该图层
如何单独导出图层:选中图层,右键选中"Duplicate Layer(复制图层)",导出图层
选择新建一个文档,在这个新文档里只有你之前选中的图层
选中导航栏中的"image(图片)">"Trim(裁剪)",OK就切完了
如何改画布大小:选中导航栏中的"image(图片)">"Canvas Size(画布大小)">改成想要的像素
如何保存:选中导航栏中的"File(文件)">导出为PNG格式(或其他)>选择地址
png(或其他格式)图片如何使用
先用套绳粗套一下你需要编辑的区域,剪切编辑
使用魔棒工具,选中图案,接着右击>反选
,删除
接下来流程参考上篇教程第5部开始
如果这样你都抠不出图
你就直接喷设计师,因为抠图现在已经不是前端负责的范畴了!!
法
好处:
每一个icon都是一张图片
举例:
特点:
默认图片大小比例是1:1,所以写宽高时只要写一项就行,不要同时写宽和高。
background(背景图)法
一般来说是没有好处的,尤其是在做icon的时候,但当你的图满足一定条件时(当你的图和div不一样大的时候)。
好处:
1.背景图不会因为你div乱动而变形
2.它可以用来做"雪碧图"【"妖精图(css sprites image)"】
举例:
div{
display:inline-block;
width: xx px;[宽xx像素]
height: xx px;[高xx像素]
background: red[背景颜色] url(./qq.png)[图片路径]
no-repeat[不要重复] 0 0[以左上角开始对齐];
}
特点:
1.用div做icon首先要让它变成一个"display:inline-block"
2.因为div默认宽高为0,所以要写个宽高才能看见
background合一法[雪碧图/css妖精(sprites)图]法
原理:
所有的div都是拥有一整个背景图的,只不过每部分只露出其中一部分
使用:
使用网页生成器
1.搜索关键词"css sprites generator",点击第一个结果
2.上传文件>选择生成格式>填写生成前缀>填写间距多少像素...
3.生成,右键把文件保存下来
4.拷贝CSS代码,黏贴就行
5.把png的名字改一下,把样式里的名字写在对应的div上
使用命令行工具
搜索"css sprites cli",按照教程走
手写
太麻烦,不说了
font法
前端这个行业总有人想出奇奇怪怪的方法去实现一个操作
font(字体)法,不同的字体A长得都千奇百怪,所以有些设计师把字体改成图标,比如把"a"变成苹果,把"b"变成微博
iconfont-HTML形式(使用html转义)
原理:
html转义(html实体),搜索"html entity"可了解。
转义符是有前缀的,""就是一个前缀。
"æ"中"e6"开头的不表示任何字符,也就是就算字体没加载,也只会显示空方格,不会乱码
使用方法:
选择图标>加入购物车>加入项目
点击"Unicode",查看在线链接(代码),把它复制到html页面中的样式
在需要用的地方把字体改成"font-family:'iconfont' "就能用了
iconfont-CSS形式(使用伪类)
原理:
和html转义类似,在CSS里写时,将""前缀改成"\",同时把结尾的分号删掉
利用了伪类,直接在CSS里写
使用方法:
选择图标>加入购物车>加入项目
点击"Font class",查看在线链接(代码)
用标签引用到页面中(不支持file协议)
每个使用图标的div都要加上"icon-font",原因可查看你复制的代码了解
每次添加或者重命名图标,都要更新一下代码
ps:改图标大小时,选择器要精确到".iconfont",否则无法改,原因可查看你复制的代码了解
SVG法(推荐)
原理:
它是直接告诉浏览器如何画一个图案,而没有存储文件的
优点:
支持CSS
不会变形,宽高要一起写
看不见锯齿,因为SVG是矢量图
可以使用彩色图标
...
使用方法
选择图标>加入购物车>加入项目
点击"Symbol",查看在线链接(代码)
复制代码到html的
加入通用CSS代码:
.icon {
width: 1em; height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
挑选相应图标并获取类名,应用于页面
"CSS 就是干"法 (慎用)
直接用css画出icon,难度极高
可搜索"css icon",并点击第一个网页,模仿学习