【亚洲必赢官网】单标签之美,伪元素的妙用

【CSS进阶】伪元素的妙用–单标签之美

2016/05/26 · CSS · 2
评论 ·
伪元素

正文小编: 伯乐在线 –
chokcoco
。未经小编许可,禁止转载!
迎接参加伯乐在线 专辑小编。

近来在研读 《CSS
SECRET》(CSS揭秘)那本大作,对
CSS 有了更深层次的通晓,折腾了上面这几个系列:

CSS3奇思妙想 —
Demo (请用 Chrome
浏览器打开,卓殊值得一看)。采纳单标签完结各类图案,许多图案与本文有关。

也愿意觉得不错的同校顺手在自我的 Github 点个 star :
CSS3奇思妙想 。

本文从此间伊始,本文主要描述一下 伪元素 before 和 after 种种妙用。

 :before和::before的区别

在介绍具体用法以前,简单介绍下伪类和伪元素。伪类大家听的多了,伪元素可能听到的不是那么频仍,其实
CSS 对那八个是有分其他。

亚洲必赢官网 1亚洲必赢官网 2

偶然你会发觉伪类元素运用了五个冒号 (::) 而不是一个冒号 (:),那是 CSS3
规范中的一有的需要,目标是为了不一致伪类和伪元素,半数以上浏览器都帮忙那三种象征方法。

CSS

#id:after{ … } #id::after{ … }

1
2
3
4
5
6
#id:after{
}
#id::after{
}

单冒号(:)用于 CSS3 伪类,双冒号(::)用于 CSS3 伪元素。对于 CSS2
中已经有些伪元素,例如 :before,单冒号和双冒号的写法 ::before
成效是平等的。

据此,借使您的网站只须要十分 webkit、firefox、opera
等浏览器,提议对于伪元素采纳双冒号的写法,要是不得不同盟 IE
浏览器,如故用 CSS2 的单冒号写法相比较安全。

进一步具体的新闻,能够看看 MDN
对伪类和伪元素的理解。
本文的支柱就是伪元素 before 和 after
,上面将现实讲讲那三个伪元素的魅力。

采用 after 清除浮动

其一预计是前者都清楚,运用 after 伪元素清除页面浮动,不做过多解释。

CSS

.clearfix:after {content:”.”; display:block; height:0;
visibility:hidden; clear:both; } .clearfix { *zoom:1; }

1
2
.clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; }
.clearfix { *zoom:1; }

伪元素与 css sprites Coca Cola图

本条也是老姿势了。Coca Cola图大家应该也不陌生,通过将七个图片 icon
合为一张图,从而为了削减 http 请求,很多网站对7-Up图的急需依旧很大的。

然则在炮制七喜图的长河中,或者现在广大的包装工具自动生成的七喜图,都设有着索要为各类icon 必要预留多少边距的题材。看看下图:

亚洲必赢官网 3–> 亚洲必赢官网 4

比如说上边这种景观(即使按钮中的图标是运用了7-Up图),产品某天突然必要按钮从气象左变为状态右,那么Pepsi-Cola图原先预留的岗位边距肯定就不够了,导致其余图形出现在按钮中。

而我们平日不会为了一个小 icon 多添加一个标签(不适合语义化)。

因此普通那种情景须要用到Pepsi-Cola图的话,都是在按钮中装置一个伪元素,将伪元素的高宽设置为本来
icon 的轻重缓急,再使用相对定位定点到要求的地方,那样无论百事可乐图每个 icon
的边距是不怎么,都可以完美适应。

单个颜色已毕按钮 hover 、active 的明暗变化

目前项目有个这么的须求,依据不相同的事务场景,运营需求安顿一个按钮的不一样背景观值。可是大家精通,一个按钮常常而言是有
3 个色值的,normal 状态的,hover 状态的和 active 状态的,平常 hover
是比原色稍微亮一点,active 则是稍稍暗一点。

大概是这么(下图):

亚洲必赢官网 5

为了减轻运营同学的承担,怎么着做到只布署一个背景观不安排 hover 和 active
颜色让按钮也能自适应跟随变化呢。是的,用上 before、after
五个伪元素可以成功。

水彩小知识

此间要广泛一下颜色值的小知识。大家熟谙的颜色代表法除了 #fff
,rgb(255,255,255),还有 hsl(0, 100%, 100%)(HSV)。

以 HSL 为例,它是一种将 RGB
色彩模型中的点在圆柱坐标系中的表示法。HSL
即色相、饱和度、亮度(德语:Hue, Saturation,
Lightness)。

对此一个施用 HSL 表示的颜色,大家只须要转移 L
(亮度)的值,就足以得到一个更亮一点仍然更暗一点的颜色。

自然改变亮度,还足以透过叠加透明层达成,那里运用伪元素改变按钮背景观就是经过叠加半透明层达成。

简单来说的话,在背景观上方叠加一个白色半透明层 rgba(255,255,255,.2)
可以取得一个更亮的颜色。(这句话不是很小心,假若一个元素背景是纯白颜色,叠加白色半透明层也是不会更亮的)

反过来说,在背景象上方叠加一个粉色半透明层 rgba(0,0,0,.2)
可以获得一个更暗的颜料。

为此,大家用 before 伪元素生成一个与按钮大小一样的灰色半透明层
rgba(0,0,0,.2),在 .btn:hover:before 时展现,用 after
伪元素生成一个与按钮大小一样的反革命半透明层 rgba(255,255,255,.2),在
.btn:active:before 时突显,就足以成功只安顿一个背景底色,达成 hover
、active 的时的明暗变化。

.pesudo:before{ position: absolute; top: 0; right: 0; bottom: 0; left:
0; z-index:-1; background:rgba(0,0,0,.1); } .pesudo:hover:before{
content:””; } .pesudo:after{ position: absolute; top: 0; right: 0;
bottom: 0; left: 0; z-index:-1; background:rgba(255,255,255,.2); }
.pesudo:active:after{ content:””; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.pesudo:before{
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index:-1;
  background:rgba(0,0,0,.1);
}
.pesudo:hover:before{
  content:"";
}
.pesudo:after{
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index:-1;
  background:rgba(255,255,255,.2);
}
.pesudo:active:after{
  content:"";
}

戳我看demo (请用
Chrome 浏览器打开)。

亚洲必赢官网,【亚洲必赢官网】单标签之美,伪元素的妙用。变形复苏

局部时候,设计师们盼望经过有些相比出色的几何图形,表达差其他意趣。

亚洲必赢官网 6亚洲必赢官网 7亚洲必赢官网 8

用 CSS3 transfrom
属性,大家可以轻松的获得一个梯形,菱形或者平行四边形。有时大家设计师们愿意在这个器皿内配上文字,譬如平行四边形可以表明一种速度之感。

只是如上图所示,内容文字也会随之 CSS3
变换一起发出了扭转,日常我们会用一个 div
做背景举办转换,而文字则是坐落别的一个 div 中。

不过使用伪元素,我们得以去掉这么些不合语义化多余的价签,运用 before
伪元素,将 CSS3 变换功用于伪元素上,那样变形不会成效于位于 div
上的的文字,而且从不选用多余的价签。

戳我看demo (请用
Chrome 浏览器打开)。

伪元素完成换行,替代<br>换行标签

大家都晓得,块级元素在不脱离正常布局流的场馆下是会自动换行,而行级元素则不会活动换行。但在档次中,有必要是亟需让行级元素也自动换行的,平日那种场所,我都是用
换行标签解决。而 《CSS SECRET》 中对
标签的描述是,那种办法不但在可维护性方面是一种糟糕的进行,而且污染了结构层的代码。 想想自己敲代码以来,用的
标签还真不少。

利用 after 伪元素,可以有一种尤其优雅的缓解方案:

.inline-element::after{ content: “A”; white-space: pre; }

1
2
3
4
.inline-element::after{
    content: "A";
    white-space: pre;
}

经过给元素的 after 伪元素添加 content 为 “A” 的值。那里 A 是如何啊?

有一个
Unicode 字符是特地代表换行符的:0x000A 。 在 CSS 中,这几个字符可以写作 “00A”, 或简化为 “A”。那里大家用它来作为 ::after
伪元素的始末。也就是在要素末尾添加了一个换行符的情致。

而 white-space: pre;
的职能是保存元素前面的空白符和换行符,结合双方,就足以轻松落成在行内级元素末尾落成换行。
原文Demo。

more magic — 单标签图案

上边介绍的是伪元素众多用法的一部分,伪元素的法力远不止于此。有了before
、after 五个伪元素。一个标签其实可以一定于 3 个标签来利用,而相当 CSS3
强大的 3D
变换、多重背景,多重阴影等伎俩,让单标签作画成为了也许,上面是本身仅用单个标签,达成的一部分动画片效果:

单标签完结浏览器图标:

亚洲必赢官网 9亚洲必赢官网 10 亚洲必赢官网 11

单标签天气图标:

亚洲必赢官网 12亚洲必赢官网 13亚洲必赢官网 14亚洲必赢官网 15亚洲必赢官网 16

CSS3奇思妙想,选取单标签已毕各个图案 —
Demo (请用 Chrome
浏览器打开,格外值得一看)。

也可望觉得不错的同桌顺手在本人的 Github 点个 star
: CSS3奇思妙想 。

但愿那篇小说对大家有所扶助,越发是在对难点化解的思考层面上。到此本文为止,如果还有哪些难点如故指出,可以多多互换,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。

只要本文对你有救助,请点下推荐,写作品不不难。

打赏扶助我写出越多好小说,谢谢!

打赏小编

【CSS进阶】伪元素的妙用–单标签之美,css

多年来在研读 《CSS SECRET》(CSS揭秘)这本大作,对 CSS
有了更深层次的知晓,折腾了下边这些系列:

CSS3奇思妙想 — Demo (请用 Chrome
浏览器打开,相当值得一看)。拔取单标签达成种种图案,许多美术与本文有关。

也期待觉得不错的校友顺手在自身的 Github 点个 star : CSS3奇思妙想 。

 

正文从此处起头,本文紧要讲述一下 伪元素 before 和 after 各类妙用。

新近在研读 《CSS
SECRET》(CSS揭秘)那本大作,对
CSS 有了更深层次的通晓,折腾了上面那几个系列:

近来在研读 《CSS
SECRET》(CSS揭秘)那本大作,对
CSS 有了更深层次的知晓,折腾了上边这些系列:

打赏协理自己写出越来越多好作品,谢谢!

任选一种支付格局

亚洲必赢官网 17
亚洲必赢官网 18

3 赞 7 收藏 2
评论

   :before和::before的区别

在介绍具体用法从前,简单介绍下伪类和伪元素。伪类我们听的多了,伪元素可能听到的不是那么频仍,其实
CSS 对这五个是有分其他。

亚洲必赢官网 19亚洲必赢官网 20

有时候你会意识伪类元素运用了多个冒号 (::) 而不是一个冒号 (:),那是 CSS3
规范中的一片段须要,目标是为着不一致伪类和伪元素,一大半浏览器都扶助那两种象征方法。

#id:after{
 ...
}
#id::after{
 ...
}

亚洲必赢官网 21亚洲必赢官网 22单冒号(:)用于
CSS3 伪类,双冒号(::)用于 CSS3 伪元素。对于 CSS2 中早已局地伪元素,例如
:before,单冒号和双冒号的写法 ::before 作用是一律的。

为此,假诺你的网站只要求般配 webkit、firefox、opera
等浏览器,提出对于伪元素拔取双冒号的写法,固然不得不协作 IE
浏览器,依旧用 CSS2 的单冒号写法相比较安全。

越来越具体的音讯,可以看看 MDN 对伪类和伪元素的了然。

正文的主演就是伪元素 before 和 after
,上面将具体讲讲那三个伪元素的魅力。  

CSS3奇思妙想 —
Demo (请用 Chrome
浏览器打开,分外值得一看)。选取单标签完成种种图案,许多图画与本文有关。

CSS3奇思妙想 —
Demo (请用 Chrome
浏览器打开,极度值得一看)。采取单标签完结种种图案,许多绘画与本文有关。

有关小编:chokcoco

亚洲必赢官网 23

经不住小运似水,逃可是此间少年。

个人主页 ·
我的文章 ·
63 ·
   

亚洲必赢官网 24

   利用 after 清除浮动

以此推断是前者都知情,运用 after 伪元素清除页面浮动,不做过多解释。

.clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; }
.clearfix { *zoom:1; }

  

也盼望觉得不错的同校顺手在我的
Github 点个 star : CSS3奇思妙想

也愿意觉得不错的校友顺手在自我的
Github 点个 star : CSS3奇思妙想

   伪元素与 css sprites Sprite图

那一个也是老姿势了。Coca Cola图咱们应该也不生疏,通过将多个图片 icon
合为一张图,从而为了裁减 http 请求,很多网站对百事可乐图的必要依旧很大的。

可是在制作Pepsi-Cola图的长河中,或者现在广大的包裹工具自动生成的Sprite图,都留存着索要为每个
icon 要求预留多少边距的难题。看看下图:

亚洲必赢官网 25亚洲必赢官网 26–> 亚洲必赢官网 27亚洲必赢官网 28

例如下面那种情景(假诺按钮中的图标是运用了Sprite图),产品某天突然需求按钮从气象左变为状态右,那么七喜图原先预留的任务边距肯定就不够了,导致其余图形出现在按钮中。

而我辈经常不会为了一个小 icon 多添加一个标签(不适合语义化)。

之所以普通这种情状须求用到百事可乐图的话,都是在按钮中设置一个伪元素,将伪元素的高宽设置为本来
icon 的轻重,再使用相对定位定点到需要的地方,那样无论Sprite图每个 icon
的边距是不怎么,都可以完美适应。

 

 

 

   单个颜色达成按钮 hover 、active 的明暗变化

近日项目有个这么的必要,依照不一致的作业场景,运营须要配置一个按钮的不等背景观值。然而大家掌握,一个按钮平常而言是有
3 个色值的,normal 状态的,hover 状态的和 active 状态的,日常 hover
是比原色稍微亮一点,active 则是稍稍暗一点。

大体是如此(下图):

亚洲必赢官网 29

亚洲必赢官网 30

为了减轻运营同学的承受,怎样做到只布署一个背景观不安插 hover 和 active
颜色让按钮也能自适应跟随变化呢。是的,用上 before、after
七个伪元素可以成功。

正文从此处先导,本文首要讲述一下
伪元素 before 和 after 各类妙用。

正文从此处初叶,本文紧要描述一下
伪元素 before 和 after 种种妙用。

水彩小知识

此地要普遍一下颜色值的小知识。大家熟习的水彩代表法除了 #fff
,rgb(255,255,255),还有 hsl(0, 100%, 100%)(HSV)。 

以 HSL 为例,它是一种将 RGB
色彩模型中的点在圆柱坐标系中的表示法。HSL
即色相、饱和度、亮度(克罗地亚语:Hue, Saturation,
Lightness)。

对此一个选择 HSL 表示的水彩,大家只必要转移 L
(亮度)的值,就足以博得一个更亮一点照旧更暗一点的颜色。

理所当然改变亮度,还足以由此叠加透明层落成,那里运用伪元素改变按钮背景观就是经过叠加半透明层达成。

简言之来说,在背景观上方叠加一个反革命半透明层 rgba(255,255,255,.2)
可以拿走一个更亮的颜料。(那句话不是很严峻,如若一个要素背景是纯白颜色,叠加白色半透明层也是不会更亮的)

反之,在背景象上方叠加一个粉色半透明层 rgba(0,0,0,.2)
可以收获一个更暗的水彩。

据此,我们用 before 伪元素生成一个与按钮大小一样的粉青色半透明层
rgba(0,0,0,.2),在 .btn:hover:before 时展现,用 after
伪元素生成一个与按钮大小一样的反革命半透明层 rgba(255,255,255,.2),在
.btn:active:before 时彰显,就足以成功只布署一个背景底色,完结 hover
、active 的时的明暗变化。

.pesudo:before{
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index:-1;
  background:rgba(0,0,0,.1);
}
.pesudo:hover:before{
  content:"";
}
.pesudo:after{
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index:-1;
  background:rgba(255,255,255,.2);
}
.pesudo:active:after{
  content:"";
}

戳我看demo (请用 Chrome 浏览器打开)。

 

   :before和::before的区别

在介绍具体用法此前,简单介绍下伪类和伪元素。伪类大家听的多了,伪元素可能听到的不是那么频仍,其实
CSS 对那七个是有分其他。

亚洲必赢官网 31亚洲必赢官网 32

偶然你会发觉伪类元素运用了四个冒号
(::) 而不是一个冒号 (:),那是 CSS3
规范中的一有的必要,目标是为了不同伪类和伪元素,大部分浏览器都协理这二种表示方法。

#id:after{
 ...
}
#id::after{
 ...
}

亚洲必赢官网 33亚洲必赢官网 34单冒号(:)用于
CSS3 伪类,双冒号(::)用于 CSS3 伪元素。对于 CSS2 中一度有的伪元素,例如
:before,单冒号和双冒号的写法 ::before 成效是均等的。

为此,如若您的网站只须要合作webkit、firefox、opera
等浏览器,提出对于伪元素采纳双冒号的写法,假诺不得不同盟 IE
浏览器,仍旧用 CSS2 的单冒号写法相比安全。

尤为具体的新闻,可以看看
MDN
对伪类和伪元素的理解。

本文的中流砥柱就是伪元素
before 和 after ,下边将切实讲讲那八个伪元素的魅力。

 

   :before和::before的区别

在介绍具体用法以前,不难介绍下伪类和伪元素。伪类大家听的多了,伪元素可能听到的不是那么频仍,其实
CSS 对那八个是有分其他。

亚洲必赢官网 35亚洲必赢官网 36

偶然你会发现伪类元素运用了多个冒号
(::) 而不是一个冒号 (:),那是 CSS3
规范中的一局地要求,目标是为着不一样伪类和伪元素,大部分浏览器都援助那三种象征方法。

#id:after{
 ...
}
#id::after{
 ...
}

亚洲必赢官网 37亚洲必赢官网 38单冒号(:)用于
CSS3 伪类,双冒号(::)用于 CSS3 伪元素。对于 CSS2 中已经局地伪元素,例如
:before,单冒号和双冒号的写法 ::before 作用是相同的。

因此,即使你的网站只须求合营webkit、firefox、opera
等浏览器,提出对于伪元素选择双冒号的写法,假诺不得不合营 IE
浏览器,依然用 CSS2 的单冒号写法相比较安全。

越是切实的信息,可以看看
MDN
对伪类和伪元素的理解。

正文的台柱就是伪元素
before 和 after ,下面将具体讲讲那多个伪元素的魅力。

 

   变形苏醒

局地时候,设计师们盼望经过有些比较卓越的几何图形,表明不相同的意趣。

亚洲必赢官网 39亚洲必赢官网 40亚洲必赢官网 41

用 CSS3 transfrom
属性,大家得以轻松的获得一个梯形,菱形或者平行四边形。有时我们设计师们企盼在那些器皿内配上文字,譬如平行四边形可以发布一种速度之感。

不过如上图所示,内容文字也会跟着 CSS3
变换一起暴发了扭转,常常大家会用一个 div
做背景举行转移,而文字则是置身别的一个 div 中。

不过利用伪元素,我们可以去掉那么些不合语义化多余的竹签,运用 before
伪元素,将 CSS3 变换作用于伪元素上,那样变形不会作用于位于 div
上的的文字,而且从不拔取多余的竹签。

戳我看demo (请用 Chrome 浏览器打开)。

 

   哪些标签不支持伪元素?(补充于2016.06.28)

自己也是才晓得那个姿势。为了不误导读者,就尽快补充一下。

伪元素即便强大,但是仍然有一对特定的竹签是不帮助伪元素
before 和 after 的。

例如
<img> 、<input>、<iframe>,这多少个标签是不接济类似
img::before 那样使用。

究其原因,要想要标签帮助伪元素,须要以此元素是要可以插入内容的,也就是说那几个因素假若一个器皿。而 input,img,iframe
等因素都无法包蕴其他因素,所以无法透过伪元素插入内容。

 

   哪些标签不支持伪元素?(补充于2016.06.28)

自我也是才晓得那一个姿势。为了不误导读者,就尽快补充一下。

伪元素即便强大,可是依然有一部分一定的标签是不帮忙伪元素
before 和 after 的。

例如
<img> 、<input>、<iframe>,那多少个标签是不匡助类似
img::before 那样使用。

究其原因,要想要标签辅助伪元素,需求以此元素是要可以插入内容的,也就是说那一个因素如果一个容器。而 input,img,iframe
等要素都不可能包蕴其他因素,所以无法由此伪元素插入内容。

 

   伪元素完毕换行,替代<br>换行标签

我们都知情,块级元素在不脱离正常布局流的状态下是会自行换行,而行级元素则不会自行换行。但在类型中,有需即使必要让行级元素也自行换行的,寻常那种场所,我都是用
<br/> 换行标签解决。而 《CSS SECRET》 中对 <br />
标签的叙述是,那种方式不但在可维护性方面是一种倒霉的实践,而且污染了结构层的代码。 想想自己敲代码以来,用的
<br/> 标签还真不少。

采用 after 伪元素,可以有一种相当优雅的解决方案:

.inline-element::after{
    content: "\A";
    white-space: pre;
}

透过给元素的 after 伪元素添加 content 为 “\A” 的值。这里 \A 是怎样呢?

有一个
Unicode 字符是专程代表换行符的:0x000A 。 在 CSS 中,这一个字符可以写作 “\000A”, 或简化为 “\A”。那里咱们用它来作为 ::after
伪元素的始末。也就是在要素末尾添加了一个换行符的意味。

而 white-space: pre;
的效应是保留元素前面的空白符和换行符,结合双方,就可以轻松完毕在行内级元素末尾完结换行。

原文Demo。
 

   利用 after 清除浮动

其一推断是前者都领悟,运用
after 伪元素清除页面浮动,不做过多解释。

.clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; }
.clearfix { *zoom:1; }

  

   利用 after 清除浮动

本条预计是前者都晓得,运用
after 伪元素清除页面浮动,不做过多解释。

.clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; }
.clearfix { *zoom:1; }

  

   more magic — 单标签图案

地点介绍的是伪元素众多用法的一片段,伪元素的功效远不止于此。有了before
、after 八个伪元素。一个标签其实可以一定于 3 个标签来利用,而相当 CSS3
强大的 3D
变换、多重背景,多重阴影等招数,让单标签作画成为了说不定,上边是自己仅用单个标签,完结的部分动画片效果:

   伪元素与 css sprites Sprite图

以此也是老姿势了。Coca Cola图大家应该也不陌生,通过将五个图片 icon
合为一张图,从而为了减弱 http
请求,很多网站对七喜图的须求依旧很大的。

唯独在营造Sprite图的长河中,或者现在广大的包裹工具自动生成的Pepsi-Cola图,都留存着索要为各样icon 必要预留多少边距的难点。看看下图:

亚洲必赢官网 42亚洲必赢官网 43–> 亚洲必赢官网 44亚洲必赢官网 45

诸如上边那种气象(借使按钮中的图标是选择了Sprite图),产品某天突然必要按钮从气象左变为状态右,那么七喜图原先预留的地方边距肯定就不够了,导致其余图形出现在按钮中。

而我辈普通不会为了一个小
icon 多添加一个标签(不吻合语义化)。

故此常常那种情景须求用到7-Up图的话,都是在按钮中装置一个伪元素,将伪元素的高宽设置为原本
icon 的轻重缓急,再选择相对定位一定到必要的地方,那样不管Sprite图每个 icon
的边距是多少,都可以周详适应。

 

   伪元素与 css sprites Coca Cola图

以此也是老姿势了。Sprite图大家应该也不生疏,通过将多少个图片 icon
合为一张图,从而为了裁减 http
请求,很多网站对Coca Cola图的须要照旧很大的。

但是在创设七喜图的长河中,或者现在游人如织的包装工具自动生成的Pepsi-Cola图,都留存着索要为种种icon 必要预留多少边距的难点。看看下图:

亚洲必赢官网 46亚洲必赢官网 47–> 亚洲必赢官网 48亚洲必赢官网 49

例如上边那种场所(如果按钮中的图标是运用了7-Up图),产品某天突然须要按钮从气象左变为状态右,那么7-Up图原先预留的职位边距肯定就不够了,导致其余图形出现在按钮中。

而大家平日不会为了一个小
icon 多添加一个标签(不切合语义化)。

之所以一般那种情形需求用到Pepsi-Cola图的话,都是在按钮中安装一个伪元素,将伪元素的高宽设置为本来
icon 的高低,再利用相对定位定点到需要的地点,那样不管七喜图每个 icon
的边距是稍微,都可以周到适应。

 

单标签落成浏览器图标:

亚洲必赢官网 50亚洲必赢官网 51 亚洲必赢官网 52

   单个颜色完结按钮 hover 、active 的明暗变化

近来项目有个这么的要求,按照区其余事务场景,运营必要安顿一个按钮的差别背景观值。不过大家精通,一个按钮平时而言是有
3 个色值的,normal 状态的,hover 状态的和 active 状态的,日常 hover
是比原色稍微亮一点,active 则是多少暗一点。

大约是那样(下图):

亚洲必赢官网 53

亚洲必赢官网 54

为了减轻运营同学的负责,怎么着做到只安顿一个背景象不布置hover 和 active 颜色让按钮也能自适应跟随变化吗。是的,用上 before、after
七个伪元素可以做到。

   单个颜色已毕按钮 hover 、active 的明暗变化

新近项目有个如此的须要,依据不一样的事情场景,运营必要配备一个按钮的不比背景观值。可是我们领略,一个按钮经常而言是有
3 个色值的,normal 状态的,hover 状态的和 active 状态的,寻常 hover
是比原色稍微亮一点,active 则是有点暗一点。

粗粗是那般(下图):

亚洲必赢官网 55

亚洲必赢官网 56

为了减轻运营同学的承受,怎样做到只布置一个背景象不安排hover 和 active 颜色让按钮也能自适应跟随变化呢。是的,用上 before、after
四个伪元素可以成功。

单标签天气图标:

亚洲必赢官网 57亚洲必赢官网 58亚洲必赢官网 59亚洲必赢官网 60亚洲必赢官网 61

CSS3奇思妙想,选用单标签落成种种图案 — Demo (请用 Chrome
浏览器打开,万分值得一看)。

也冀望觉得不错的同室顺手在自身的 Github 点个 star : CSS3奇思妙想 。

    希望那篇文章对大家有着扶助,尤其是在对标题解决的思维层面上。

到此本文截止,即使还有哪些疑难依旧提议,可以多多交换,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。

假定本文对您有救助,请点下推荐,写小说不不难。

方今在研读《CSS SECRET》(CSS揭秘)这本大作,对 CSS
有了更深层次的接头,折腾了上边那么些项目…

颜色小知识

这边要广泛一下颜色值的小知识。大家熟悉的水彩代表法除了
#fff ,rgb(255,255,255),还有 hsl(0, 100%,
100%)(HSV)。 

以 HSL
为例,它是一种将 RGB 色彩模型中的点在圆柱坐标系中的表示法。HSL 即色相、饱和度、亮度(乌克兰(УКРАЇНА)语:Hue, Saturation,
Lightness)。

对于一个运用 HSL
表示的水彩,大家只要求改变 L
(亮度)的值,就足以得到一个更亮一点要么更暗一点的水彩。

自然改变亮度,还是能透过叠加透明层达成,那里运用伪元素改变按钮背景观就是经过叠加半透明层完成。

简单的话,在背景观上方叠加一个反革命半透明层
rgba(255,255,255,.2)
可以收获一个更亮的水彩。(那句话不是很谨慎,要是一个因素背景是纯白颜色,叠加白色半透明层也是不会更亮的)

相反,在背景观上方叠加一个青色半透明层
rgba(0,0,0,.2) 能够获取一个更暗的颜色。

之所以,我们用
before 伪元素生成一个与按钮大小相同的粉绿色半透明层 rgba(0,0,0,.2),在
.btn:hover:before 时体现,用 after
伪元素生成一个与按钮大小相同的反动半透明层 rgba(255,255,255,.2),在
.btn:active:before 时体现,就可以落成只陈设一个背景底色,落成 hover
、active 的时的明暗变化。

.pesudo:before{
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index:-1;
  background:rgba(0,0,0,.1);
}
.pesudo:hover:before{
  content:"";
}
.pesudo:after{
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index:-1;
  background:rgba(255,255,255,.2);
}
.pesudo:active:after{
  content:"";
}

戳我看demo (请用
Chrome 浏览器打开)。

 

颜色小知识

此间要普遍一下颜色值的小知识。大家熟稔的颜料代表法除了
#fff ,rgb(255,255,255),还有 hsl(0, 100%,
100%)(HSV)。 

以 HSL
为例,它是一种将 RGB 色彩模型中的点在圆柱坐标系中的表示法。HSL 即色相、饱和度、亮度(土耳其(Turkey)语:Hue, Saturation,
Lightness)。

对此一个采取 HSL
表示的颜料,我们只要求变更 L
(亮度)的值,就足以获取一个更亮一点要么更暗一点的颜料。

当然改变亮度,还足以经过叠加透明层完成,那里运用伪元素改变按钮背景象就是通过叠加半透明层完毕。

简短来说,在背景观上方叠加一个反革命半透明层
rgba(255,255,255,.2)
可以得到一个更亮的颜料。(那句话不是很谨慎,借使一个要素背景是纯白颜色,叠加白色半透明层也是不会更亮的)

反过来说,在背景观上方叠加一个黄色半透明层
rgba(0,0,0,.2) 可以获得一个更暗的水彩。

据此,大家用
before 伪元素生成一个与按钮大小同等的黄色半透明层 rgba(0,0,0,.2),在
.btn:hover:before 时显得,用 after
伪元素生成一个与按钮大小同等的白色半透明层 rgba(255,255,255,.2),在
.btn:active:before 时显得,就足以成功只布置一个背景底色,完成 hover
、active 的时的明暗变化。

.pesudo:before{
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index:-1;
  background:rgba(0,0,0,.1);
}
.pesudo:hover:before{
  content:"";
}
.pesudo:after{
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index:-1;
  background:rgba(255,255,255,.2);
}
.pesudo:active:after{
  content:"";
}

戳我看demo (请用
Chrome 浏览器打开)。

 

   变形苏醒

有些时候,设计师们期待经过有些相比较独特的几何图形,表明差其他情致。

亚洲必赢官网 62亚洲必赢官网 63亚洲必赢官网 64

用 CSS3
transfrom
属性,我们得以轻松的收获一个梯形,菱形或者平行四边形。有时大家设计师们希望在那些器皿内配上文字,譬如平行四边形可以公布一种速度之感。

然则如上图所示,内容文字也会跟着
CSS3 变换一起暴发了扭转,平时我们会用一个 div
做背景进行转移,而文字则是身处别的一个 div 中。

只是利用伪元素,大家得以去掉这几个不合语义化多余的竹签,运用
before 伪元素,将 CSS3 变换功能于伪元素上,那样变形不会成效于位于 div
上的的文字,而且尚未选用多余的竹签。

戳我看demo (请用
Chrome 浏览器打开)。

 

   变形恢复生机

一对时候,设计师们企盼通过一些比较新鲜的几何图形,表达不一致的趣味。

亚洲必赢官网 65亚洲必赢官网 66亚洲必赢官网 67

用 CSS3
transfrom
属性,大家得以轻松的取得一个梯形,菱形或者平行四边形。有时大家设计师们盼望在这个器皿内配上文字,譬如平行四边形可以发挥一种速度之感。

不过如上图所示,内容文字也会随着
CSS3 变换一起发生了扭转,寻常我们会用一个 div
做背景展开更换,而文字则是位于其它一个 div 中。

可是采纳伪元素,大家得以去掉这个不合语义化多余的标签,运用
before 伪元素,将 CSS3 变换作用于伪元素上,那样变形不会成效于位于 div
上的的文字,而且没有动用多余的价签。

戳我看demo (请用
Chrome 浏览器打开)。

 

   伪元素完结换行,替代<br>换行标签

我们都知晓,块级元素在不脱离正常布局流的状态下是会活动换行,而行级元素则不会活动换行。但在类型中,有需求是亟需让行级元素也自行换行的,经常这种场合,我都是用
<br/> 换行标签解决。而 《CSS SECRET》 中对 <br />
标签的叙述是,那种办法不但在可维护性方面是一种不佳的实践,而且污染了结构层的代码。 想想自己敲代码以来,用的
<br/> 标签还真不少。

动用 after
伪元素,可以有一种至极优雅的化解方案:

.inline-element::after{
    content: "\A";
    white-space: pre;
}

经过给元素的
after 伪元素添加 content 为 “\A” 的值。这里 \A 是什么吗?

有一个
Unicode 字符是特意代表换行符的:0x000A 。 在 CSS 中,这些字符可以写作 “\000A”, 或简化为 “\A”。那里大家用它来作为 ::after
伪元素的内容。也就是在要素末尾添加了一个换行符的意味。


white-space: pre;
的功能是保留元素前面的空白符和换行符,结合双方,就可以轻松完成在行内级元素末尾完毕换行。

原文Demo。

 

   伪元素达成换行,替代<br>换行标签

咱们都明白,块级元素在不脱离正常布局流的情况下是会活动换行,而行级元素则不会自行换行。但在品种中,有需如果必要让行级元素也自行换行的,寻常那种情形,我都是用
<br/> 换行标签解决。而 《CSS SECRET》 中对 <br />
标签的讲述是,那种格局不仅在可维护性方面是一种糟糕的举办,而且污染了结构层的代码。 想想自己敲代码以来,用的
<br/> 标签还真不少。

应用 after
伪元素,可以有一种非常优雅的缓解方案:

.inline-element::after{
    content: "\A";
    white-space: pre;
}

通过给元素的
after 伪元素添加 content 为 “\A” 的值。这里 \A 是何等吧?

有一个
Unicode 字符是越发代表换行符的:0x000A 。 在 CSS 中,这么些字符可以写作 “\000A”, 或简化为 “\A”。那里大家用它来作为 ::after
伪元素的内容。也就是在要素末尾添加了一个换行符的意味。


white-space: pre;
的效应是保存元素后边的空白符和换行符,结合双方,就足以轻松完结在行内级元素末尾达成换行。

原文Demo。

 

   增强用户体验,使用伪元素已毕增大点击热区

按钮是大家网页设计中国和亚洲常根本的一环,而按钮的筹划也与用户体验休戚相关。让用户更便于的点击到按钮无疑能很好的加码用户体验,越发是在移动端,按钮常常都很小,可是有时由于规划稿限制,我们不可以直接去改变按钮元素的高宽。那么那个时候有如何点子在不转移按钮原本大小的意况下来伸张她的点击热区呢?

此地,伪元素也是足以象征其宿主元一直响应的鼠标交互事件的。借助伪元素可以轻松帮大家兑现,我们可以这么写:

.btn::befoer{
  content:"";
  position:absolute;
  top:-10px;
  right:-10px;
  bottom:-10px;
  left:-10px;
}

自然,在 PC
端下这规范看起来有点出人意料,可是合理的用在点击区域较小的移动端则能取到不行好的效益,效果如下:

亚洲必赢官网 68

   增强用户体验,使用伪元素完成增大点击热区

按钮是大家网页设计中尤其生死攸关的一环,而按钮的统筹也与用户体验荣辱与共。让用户更便于的点击到按钮无疑能很好的增多用户体验,尤其是在移动端,按钮常常都很小,可是有时由于规划稿限制,我们不能平素去改变按钮元素的高宽。那么这一个时候有啥点子在不改变按钮原本大小的情事下来伸张她的点击热区呢?

此间,伪元素也是可以代表其宿主元一向响应的鼠标交互事件的。借助伪元素可以轻松帮我们已毕,大家得以如此写:

.btn::befoer{
  content:"";
  position:absolute;
  top:-10px;
  right:-10px;
  bottom:-10px;
  left:-10px;
}

当然,在 PC
端下那样子看起来有些奇怪,可是合理的用在点击区域较小的运动端则能取到极度好的效应,效果如下:

亚洲必赢官网 69

   more magic — 单标签图案

上边介绍的是伪元素众多用法的一部分,伪元素的功用远不止于此。有了before
、after 四个伪元素。一个标签其实可以一对一于 3 个标签来利用,而同盟 CSS3
强大的 3D
变换、多重背景,多重阴影等伎俩,让单标签作画成为了也许,下边是自己仅用单个标签,完毕的有些卡通效果:

   more magic — 单标签图案

上面介绍的是伪元素众多用法的一片段,伪元素的功效远不止于此。有了before
、after 八个伪元素。一个标签其实可以一对一于 3 个标签来使用,而协作 CSS3
强大的 3D
变换、多重背景,多重阴影等招数,让单标签作画成为了说不定,下边是我仅用单个标签,落成的部分卡通效果:

单标签完毕浏览器图标:

亚洲必赢官网 70亚洲必赢官网 71 亚洲必赢官网 72

单标签完成浏览器图标:

亚洲必赢官网 73亚洲必赢官网 74 亚洲必赢官网 75

单标签气候图标:

亚洲必赢官网 76亚洲必赢官网 77亚洲必赢官网 78亚洲必赢官网 79亚洲必赢官网 80

CSS3奇思妙想,采纳单标签已毕各个图案 —
Demo (请用 Chrome
浏览器打开,卓殊值得一看)。

也可望觉得不错的同校顺手在自家的
Github 点个 star
: CSS3奇思妙想 。

 

 

期望那篇著作对大家有着辅助,尤其是在对标题解决的考虑层面上。

到此本文甘休,要是还有怎么着疑点照旧提出,可以多多互换,原创小说,文笔有限,才疏学浅,文中若有不正之处,万望告知。

一旦本文对你有襄助,请点下推荐,写小说不便于。

单标签天气图标:

亚洲必赢官网 81亚洲必赢官网 82亚洲必赢官网 83亚洲必赢官网 84亚洲必赢官网 85

CSS3奇思妙想,选用单标签完结各类图案 —
Demo (请用 Chrome
浏览器打开,相当值得一看)。

也期待觉得不错的同班顺手在自身的
Github 点个 star
: CSS3奇思妙想 。

 

 

盼望那篇小说对大家具有扶助,尤其是在对题目化解的思想层面上。

到此本文为止,借使还有何样疑难依然提出,可以多多调换,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。

如果本文对你有救助,请点下推荐,写文章不不难。

网站地图xml地图