likes
comments
collection

巧用CSS新技术减少伪元素的使用

作者站长头像
站长
· 阅读数 17

巧用CSS新技术减少伪元素的使用

伪元素是一个附加至选择器末的关键词,允许你对被选择元素的特定部分修改样式。

css1 中就引入了伪元素—— ::first-letter::first-line,最常用的伪元素 ::before::aftercss2 中被引入,它们并不实际 存在 于文档树中,分别作为已选中元素的第一个子元素和最后一个子元素,常被用来添加额外的装饰元素而不扰乱文档本身。

巧用新技术

过去我们常为兼容问题烦恼不已,而现在各主流浏览器对 CSS3 的支持越来越完善,CSS3 特性大部分都已经有了很好的浏览器支持度,微软也将基本淘汰IE浏览器,明年6月15日起暂停支持。

这让我们可以更自由灵活地探索CSS新技术,可以在不使用伪元素的情况下实现同等的样式效果。通过减少对伪元素的依赖,一些场景下可以编写更少的CSS代码量,减少嵌套元素和层叠上下文问题。

举几个🌰

渐变色边框

可以使用渐变色边框让模块在整个页面中突显出来:

巧用CSS新技术减少伪元素的使用

伪元素方式

伪元素的样式为渐变色背景,并设置 z-index 为负数使得内容区域在渐变色背景之上,内容区域需要设置纯色背景:

.gradient-box {
  display: flex;
  align-items: center;
  width: 90%;
  position: relative;
  padding: 30% 2em;
  box-sizing: border-box;

  $border: 5px;
  color: #FFF;
  background: #000;
  background-clip: padding-box;
  border: solid $border transparent;

  &::before {
    content: '';
    position: absolute;
    top: 0; 
    left: 0;
    z-index: -1;
    margin: -$border;
    background: linear-gradient(to right, red, orange);
  }
}

border-image方式

可以使用更简单的语法实现相同的效果:

border-image-slice: 1;
border-image-source: linear-gradient(to right, red, orange);

三角形

我们常使用 ::before::after 伪元素创建规则形状,随便搜可以找到许多相关的生成器小工具,比如三角形生成器:

巧用CSS新技术减少伪元素的使用

具体的应用场景往往不止生成一个三角形那么简单,通常是三角形作为装饰,再结合具体的形状形成一个整体,比如弹窗、信息提示框、箭头按钮等,以下面为例:

巧用CSS新技术减少伪元素的使用

伪元素方式

使用绝对定位的 ::before 伪元素构造三角形,这种方式的缺点是增加 :hover 样式时需同时修改 .tooltip 和伪元素的背景颜色(也可以使用新的CSS变量解决):

.tooltip {
    display: inline-block;
    position: relative;
    padding: 20px;
    background: lightseagreen;
    &::before {
        $triangleHeight: 20px;
        content: '';
	position: absolute;
	right: 30%;
        bottom: -$triangleHeight;
	border: 0 solid transparent;
	border-width: 0 30px $triangleHeight 0;
	border-color: transparent lightseagreen transparent transparent;
    }
}

clip-path方式

clip-path 属性可以裁剪和构造多边形(属性值种类很多,这里不过多展开):

.tooltip {
    display: inline-block;
    padding: 20px 20px 40px;
    background: lightseagreen;
    clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 60% 75%, 0% 75%);
}

clip-path 也有相关的 生成器工具

巧用CSS新技术减少伪元素的使用

擦拭动画

擦拭动画是按钮悬停的一种渐变动画效果:

巧用CSS新技术减少伪元素的使用

伪元素方式

  • ::before 伪元素绝对定位,设置变化的背景颜色,并设置 scaleY(0) 使其不可见;
  • 设置 transform-origin 确保擦拭动画的方向;
  • 鼠标悬停的时候,设置伪元素 scaleY(1) 从底部向上展开:
.wipe {
    position: relative;
    background: #1e7a90;
    &::before {
	content: '';
	position: absolute;
        top: 0;
        left: 0;
	display: block;
	width: 100%;
        height: 100%;
	background-color: #fff;
	transform: scaleY(0);
	transform-origin: bottom center;
	transition: transform ease-in-out 300ms;
    }
    &:hover {
        &::before {
            transform: scaleY(1);
        }
    }
}

巧用background-size方式

  • 设置 background-color 默认背景色,同时也设置 background-image 为线性渐变色(通过参数控制成纯色);
  • 通过 background-size 设置成 0% 100% 隐藏线性渐变色(实际为纯色);
  • 鼠标悬停时,设置 background-size 为 100% 100% 出现通过 background-image 控制的线性渐变色:
.wipe {
    background-color: #1e7a90;
    background-image: linear-gradient(0, white, white);
    background-size: 0% 100%;
    background-repeat: no-repeat;
    transition: all ease-in-out 300ms;
    &:hover {
        background-size: 100% 100%;
    }
}

半透明蒙层

半透明纯色蒙层覆盖在图片上是网站构建中常见的一种设计模式:

巧用CSS新技术减少伪元素的使用

伪元素方式

通过伪元素 ::before 生成半透明色的遮罩层:

.banner {
    position: relative;
    background: url(val(--bgImg)) no-repeat center center;
    &::before {
        content: '';
	position: absolute;
        top: 0;
	left: 0;
	display: block;
	width: 100%;
        height: 100%;
        background: rgb(0 0 0 / 70%);
    }
}

Background-blend-mode方式

background-blend-mode 属性定义了背景层的混合模式(图片 background-image 与颜色 background-color):

.banner {
    background: rgb(0 0 0 / 70%) url(val(--bgImg)) no-repeat center center;
    background-blend-mode: overlay;
}

高斯模糊局部蒙层

高斯模糊/毛玻璃的效果除了可以突出强调局部的内容,还有助于视觉点缀,让图片和整个模块更有层次感,比如可以使图片展示和文字介绍达成视觉的一致性和协调性,展示二者的同时又不会过于突兀鲜明:

巧用CSS新技术减少伪元素的使用

伪元素方式

使用伪元素创建新的遮罩层,并使用 blur() 方法将高斯模糊应用于输出图片:

.description {
    position: relative;
    &::before {
	content: '';
        display: block;
	position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url(XX) no-repeat center bottom;
        background-size: 100% auto;
        filter: blur(10px);
    }
}

backdrop-filter方式

backdrop-filter 是让当前元素所在区域后面的内容模糊灰度或高亮之类,要想看到效果,需要元素本身半透明或者完全透明。可以使用该属性实现同等效果:

.description {
    backdrop-filter: blur(10px);
}

总结

前端技术虽然起步相对较晚但速度远超预期,有许多旧方式实现的代码方案,可以使用新的CSS技术渲染出同等的效果,且代码更精简和易于维护,大家一起来讨论更多好玩的新方案吧 (っ´▽`)っ

参考

Reducing The Need For Pseudo-Elements - Smashing Magazine

7 Practical Uses for the ::before and ::after Pseudo-Elements in CSS

Gradient Borders in CSS

backdrop-filter - CSS: Cascading Style Sheets | MDN