澳门在线威尼斯官方 > 威尼斯澳门在线 > 单标签之美,伪元素的妙用

原标题:单标签之美,伪元素的妙用

浏览次数:166 时间:2019-12-12

【CSS升级】伪成分的妙用–单标签之美

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

正文小编: 伯乐在线 - chokcoco 。未经笔者许可,防止转发!
应接参与伯乐在线 专栏审核人。

这两日在研读 《CSS SECRET》(CSS揭秘)那本大作,对 CSS 有了更深等级次序的了解,折腾了下边那一个项目:

CSS3奇思妙想 — 德姆o (请用 Chrome 浏览器展开,特别值得生机勃勃看)。选拔单标签完毕各样图案,多数水墨画与本文有关。

也希望感觉不错的同校顺手在本人的 Github 点个 star : CSS3奇思妙想 。

本文从这里初始,本文主要描述一下 伪成分 before 和 after 各类妙用。

 :before和::before的区别

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

图片 1图片 2

神跡你会发觉伪类成分接收了多少个冒号 (::卡塔尔(英语:State of Qatar) 而不是叁个冒号 (:卡塔尔,这是 CSS3 标准中的少年老成某些需要,指标是为着分化伪类和伪成分,大许多浏览器都援救那二种象征方法。

CSS

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

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

单冒号(:卡塔尔用于 CSS3 伪类,双冒号(::卡塔尔国用于 CSS3 伪成分。对于 CSS第22中学已经部分伪成分,譬喻 :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 Sprite图

其黄金年代也是老姿势了。七喜图大家应该也不不熟悉,通过将多少个图片 icon 合为一张图,进而为了裁减 http 央浼,超多网址对七喜图的要求依旧相当大的。

但是在制作Coca Cola图的经过中,大概未来众多的包装工具自动生成的百事可乐图,都留存着索要为每种icon 要求预先流出多少边距的难点。看看下图:

图片 3–> 图片 4

比方说上边这种情景(要是按键中的Logo是利用了Coca Cola图),付加物某天乍然必要按键从气象左变为状态右,那么七喜图原先预先留下的任务边距确定就相当不足了,招致别的图形出未来开关中。

而大家平时不会为了一个小 icon 多增多一个标签(不适合语义化)。

于是平日这种状态需求用到Coca Cola图的话,都以在开关中设置多个伪元素,将伪成分的高宽设置为原本icon 的大小,再使用相对定位一定到要求的地点,那样无论Sprite图各样 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 为例,它是意气风发种将 TiguanGB 色彩模型中的点在圆柱坐标系中的表示法。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 转变、多种背景,多种阴影等手法,让单标签作画成为了也许,上边是自身仅用单个标签,达成的一些卡通效果:

单标签完成浏览器Logo:

图片 9图片 10 图片 11

单标签天气Logo:

图片 12图片 13图片 14图片 15图片 16

CSS3奇思妙想,接纳单标签达成各类图案 — 德姆o (请用 Chrome 浏览器张开,特别值得风流倜傥看)。

也指望以为不错的同窗顺手在本身的 Github 点个 star : CSS3突发奇想 。

盼望这篇小说对大家有着帮忙,更加是在对难点消逝的观念层面上。到此本文截止,借使还会有啥样疑难依然提出,能够多多调换,原创小说,文笔有限,才薄智浅,文中若有不正的地方,万望告知。

只要本文对您有补助,请点下推荐,写小说不便于。

打赏协助本身写出更加多好小说,多谢!

打赏笔者

【CSS晋级】伪成分的妙用--单标签之美,css

近日在研读 《CSS SECRET》(CSS揭秘)那本大作,对 CSS 有了更加深档期的顺序的了然,折腾了上边这几个连串:

CSS3痴心图谋 -- 德姆o (请用 Chrome 浏览器打开,特别值得豆蔻年华看)。选取单标签完毕各类图案,超多壁画与本文有关。

也愿意认为不错的同桌顺手在自个儿的 Github 点个 star : CSS3奇思妙想 。

 

正文从今现在处最早,本文主要陈说一下 伪元素 before 和 after 各样妙用。

打赏扶持我写出更加多好文章,多谢!

任选大器晚成种支付情势

图片 17 图片 18

3 赞 7 收藏 2 评论

   :before和::before的区别

在介绍具体用法此前,简介下伪类和伪成分。伪类我们听的多了,伪元素也许听到的不是那么频仍,其实 CSS 对那七个是有分其余。

图片 19图片 20

奇迹你会发掘伪类成分选拔了多少个冒号 (::卡塔尔(قطر‎ 并非三个冒号 (:卡塔尔(قطر‎,那是 CSS3 规范中的意气风发有些须求,指标是为了差异伪类和伪元素,大相当多浏览器都支持那二种表示方法。

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

图片 21图片 22单冒号(:卡塔尔(英语:State of Qatar)用于 CSS3 伪类,双冒号(::卡塔尔(英语:State of Qatar)用于 CSS3 伪成分。对于 CSS2 中大器晚成度部分伪成分,举例:before,单冒号和双冒号的写法 ::before 成效是如出风华正茂辙的。

故而,借令你的网址只须求相配 webkit、firefox、opera 等浏览器,建议对于伪元素选择双冒号的写法,即使一定要合作 IE 浏览器,依旧用 CSS2 的单冒号写法相比安全。

尤为具体的音讯,能够看看 MDN 对伪类和伪成分的精通。

正文的主演便是伪成分 before 和 after ,下边将具体讲讲那多个伪元素的魔力。  

有关笔者:chokcoco

图片 23

经不住光阴似箭,逃然而此间少年。 个人主页 · 作者的篇章 · 63 ·    

图片 24

   利用 after 消逝浮动

以此猜度是前边八个都通晓,运用 after 伪成分杀绝页面浮动,不做过多解释。

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

  

   伪成分与 css sprites 百事可乐图

这几个也是老姿势了。百事可乐图我们应该也不生疏,通过将三个图片 icon 合为一张图,进而为了收缩 http 央浼,相当多网址对Pepsi-Cola图的需要依然相当大的。

唯独在构建七喜图的进程中,也许今后无数的包装工具自动生成的Pepsi-Cola图,都设有着索要为各样icon 要求预先留下多少边距的主题素材。看看下图:

图片 25图片 26--> 图片 27图片 28

比如上边这种意况(假诺按键中的Logo是接受了7-Up图),付加物某天蓦地必要开关从气象左变为状态右,那么雪碧图原先预先流出的职位边距料定就相当不够了,导致别的图形出以后按键中。

而小编辈普通不会为了贰个小 icon 多加多三个标签(不切合语义化)。

就此平日这种情形需求用到Sprite图的话,都以在开关中设置五个伪成分,将伪成分的高宽设置为本来 icon 的深浅,再使用相对定位定点到需求的地点,那样不管Coca Cola图每一种 icon 的边距是有一点,都能够周到适应。

 

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

近年项目有个那样的供给,依据分歧的政工场景,运行必要配备一个按键的不及背景象值。可是大家领略,三个按钮平常来讲是有 3 个色值的,normal 状态的,hover 状态的和 active 状态的,平时 hover 是比原色稍稍亮一点,active 则是不怎么暗一点。

大概是如此(下图):

图片 29

图片 30

为了缓慢解决运行同学的负责,怎么着做到只计划一个背景象不配备 hover 和 active 颜色让按键也能自适应跟随变化吧。是的,用上 before、after 多个伪元素能够成功。

水彩小知识

那边要大范围一下颜色值的小知识。大家熟练的颜料代表法除了 #fff ,rgb(255,255,255),还有 hsl(0, 100%, 100%)(HSV)。 

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

对此两个接受 HSL 表示的水彩,大家只要求转移 L (亮度)的值,就足以拿走二个更加亮一点可能更加暗一点的颜色。

理所必然更正亮度,还是可以通过叠合透明层实现,这里运用伪成分修正按键背景象正是经过叠合半透明层实现。

轻巧的话,在背景观上方叠合叁个紫灰半透明层 rgba(255,255,255,.2卡塔尔能够赢得一个越来越亮的颜色。(那句话不是极小心,假设多个成分背景是浅紫颜色,叠合粉红白半透明层也是不会越来越亮的)

反过来说,在背景观上方叠合四个杏黄半透明层 rgba(0,0,0,.2卡塔尔(英语:State of Qatar)能够赢得贰个越来越暗的颜色。

之所以,大家用 before 伪成分生成七个与按键大小相像的莲灰半透明层 rgba(0,0,0,.2卡塔尔国,在 .btn:hover:before 时展现,用 after 伪成分生成一个与按键大小近似的反革命半透明层 rgba(255,255,255,.2卡塔尔(英语:State of Qatar),在 .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 浏览器展开)。

 

本文由澳门在线威尼斯官方发布于威尼斯澳门在线,转载请注明出处:单标签之美,伪元素的妙用

关键词:

上一篇:没有了

下一篇:没有了