html div 删除图标,CSS深入浅出-icon的各种用法

本博客主要讲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",并点击第一个网页,模仿学习

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值