纯净、安全、绿色的下载网站

首页|软件分类|下载排行|最新软件|IT学院

当前位置:首页IT学院IT技术

CSS伪元素的妙用单标签之美 详解CSS伪元素的妙用单标签之美

ChokCoco   2021-05-25 我要评论
想了解详解CSS伪元素的妙用单标签之美的相关内容吗ChokCoco在本文为您仔细讲解CSS伪元素的妙用单标签之美的相关知识和一些Code实例欢迎阅读和指正我们先划重点:css,伪元素下面大家一起来学习吧

:before和::before的区别

在介绍具体用法之前简单介绍下伪类和伪元素伪类大家听的多了伪元素可能听到的不是那么频繁其实 CSS 对这两个是有区分的

有时你会发现伪类元素使用了两个冒号 (::) 而不是一个冒号 (:)这是 CSS3 规范中的一部分要求目的是为了区分伪类和伪元素大多数浏览器都支持这两种表示方式

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

单冒号(:)用于 CSS3 伪类双冒号(::)用于 CSS3 伪元素对于 CSS2 中已经有的伪元素例如 :before单冒号和双冒号的写法 ::before 作用是一样的

所以如果你的网站只需要兼容 webkit、firefox、opera 等浏览器建议对于伪元素采用双冒号的写法如果不得不兼容 IE 浏览器还是用 CSS2 的单冒号写法比较安全

更加具体的信息可以看看 MDN 对伪类和伪元素的理解

本文的主角就是伪元素 before 和 after 下面将具体讲讲这两个伪元素的魅力

哪些标签不支持伪元素?

我也是才知道这个姿势为了不误导读者就赶紧补充一下

伪元素虽然强大但是还是有一些特定的标签是不支持伪元素 before 和 after 的

诸如 <img> 、<input>、<iframe>这几个标签是不支持类似 img::before 这样使用

究其原因要想要标签支持伪元素需要这个元素是要可以插入内容的也就是说这个元素要是一个容器而inputimgiframe 等元素都不能包含其他元素所以不能通过伪元素插入内容

利用 after 清除浮动

这个估计是前端都知道运用 after 伪元素清除页面浮动不做过多解释

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

伪元素与css sprites 雪碧图

这个也是老姿势了雪碧图大家应该也不陌生通过将多个图片 icon 合为一张图从而为了减少 http 请求很多网站对雪碧图的需求还是很大的

但是在制作雪碧图的过程中或者现在很多的打包工具自动生成的雪碧图都存在着需要为每个 icon 需要预留多少边距的问题看看下图:

譬如上面这种情况(假设按钮中的图标是采用了雪碧图)产品某天突然要求按钮从状态左变为状态右那么雪碧图原先预留的位置边距肯定就不够了导致其他图形出现在按钮中

而我们通常不会为了一个小 icon 多添加一个标签(不符合语义化)

所以通常这种情况需要用到雪碧图的话都是在按钮中设置一个伪元素将伪元素的高宽设置为原本 icon 的大小再利用绝对定位定位到需要的地方这样无论雪碧图每个 icon 的边距是多少都能够完美适应

单个颜色实现按钮 hover 、active 的明暗变化

最近项目有个这样的需求根据不同的业务场景运营需要配置一个按钮的不同背景色值但是我们知道一个按钮通常而言是有 3 个色值的normal 状态的hover 状态的和 active 状态的通常 hover 是比原色稍微亮一点active 则是稍微暗一点

大概是这样(下图):

为了减轻运营同学的负担怎么样做到只配置一个背景色不配置 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:"";
}

变形恢复

有的时候设计师们希望通过一些比较特殊的几何图形表达不同的意思

用 CSS3 transfrom 属性我们可以轻松的得到一个梯形菱形或者平行四边形有时我们设计师们希望在这些容器内配上文字譬如平行四边形可以表达一种速度之感

但是如上图所示内容文字也会跟着 CSS3 变换一起发生了扭曲通常我们会用一个 div 做背景进行变换而文字则是放在另外一个 div 中

但是运用伪元素我们可以去掉这些不合语义化多余的标签运用 before 伪元素将 CSS3 变换作用于伪元素上这样变形不会作用于位于 div 上的的文字而且没有使用多余的标签

伪元素实现换行替代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; 的作用是保留元素后面的空白符和换行符结合两者就可以轻松实现在行内级元素末尾实现换行

增强用户体验使用伪元素实现增大点击热区

按钮是我们网页设计中十分重要的一环而按钮的设计也与用户体验息息相关让用户更容易的点击到按钮无疑能很好的增加用户体验尤其是在移动端按钮通常都很小但是有时由于设计稿限制我们不能直接去改变按钮元素的高宽那么这个时候有什么办法在不改变按钮原本大小的情况下去增加他的点击热区呢?

这里伪元素也是可以代表其宿主元素来响应的鼠标交互事件的借助伪元素可以轻松帮我们实现我们可以这样写:

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

当然在 PC 端下这样子看起来有点奇怪但是合理的用在点击区域较小的移动端则能取到十分好的效果效果如下:

more magic -- 单标签图案

上面介绍的是伪元素众多用法的一部分伪元素的作用远不止于此有了before 、after 两个伪元素一个标签其实可以相当于 3 个标签来使用而配合 CSS3 强大的 3D 变换、多重背景多重阴影等手段让单标签作画成为了可能下面是我仅用单个标签实现的一些动画效果:

单标签实现浏览器图标:

单标签天气图标:


相关文章

猜您喜欢

  • Java数独小游戏 Java实现数独小游戏

    想了解Java实现数独小游戏的相关内容吗dog_egg0327在本文为您仔细讲解Java数独小游戏的相关知识和一些Code实例欢迎阅读和指正我们先划重点:java,数独下面大家一起来学习吧..
  • Docker Swarm 服务编排 Docker Swarm 服务编排之命令详解

    想了解Docker Swarm 服务编排之命令详解的相关内容吗Bigberg在本文为您仔细讲解Docker Swarm 服务编排的相关知识和一些Code实例欢迎阅读和指正我们先划重点:Docker,Swarm,服务编排,Docker,服务编排下面大家一起来学习吧..

网友评论

Copyright 2020 www.fresh-weather.com 【世纪下载站】 版权所有 软件发布

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 点此查看联系方式