CSS 实现角标效果的完整代码


Posted in HTML / CSS onJune 28, 2022

最近在项目中碰到一个这样的角标设计,如下

CSS 实现角标效果的完整代码

像这种可以文字可变化,自适应大小的布局,自然首选 CSS 了~下面看看如何实现的(两分钟读完)

一、圆角矩形和三角形

从设计上可以拆分成两部分,一个圆角矩形和一个三角形

CSS 实现角标效果的完整代码

假设 HTML 是这样的

<tag>审核为通过</tag>

圆角很好实现,border-radius就行,如下

tag{
  border-radius: 4px 4px 4px 0px;
  color: #fff;
  padding: 2px 6px;
  font-size: 10px;
  line-height: 16px;
  background: #EA3447;
}

小三角可以用伪元素生成,关于三角形的实现方式有很多,如果对兼容性没什么要求,建议采用clip-path实现,比较容易理解,确定三个坐标,直接裁剪就可以了

CSS 实现角标效果的完整代码

用 CSS 实现就是

tag::before{
    content: '';
    position: absolute;
    width: 3px;
    height: 3px;
    left: 0;
    bottom: -3px;
    background: #BB2A39;
    clip-path: polygon(0 0, 100% 0, 100% 100%); /*三角*/
}

二、颜色稍暗的三角形

上面的实现中,圆角矩形和三角形用了两个颜色,分别是#EA3447#BB2A39

CSS 实现角标效果的完整代码

每次都要维护两个颜色变量太麻烦了,有没有办法只用一个颜色呢?换句话说,如何将一个颜色变暗?这里有几种方式

1. 遮盖一层半透明的黑色

这个其实比较容易理解,在原有的颜色,遮盖一层半透明的黑色,原有颜色自然就变暗了

CSS 实现角标效果的完整代码

具体实现就是用CSS背景绘制一层半透明渐变

tag::before{
  background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3));
  background-color: inherit;
}

这里的background-color:inherit就表示背景颜色是继承父级的

2. 通过滤镜实现

CSS 滤镜中有个brightness,可以设置图像的亮度,亮度越高,图像越白,无穷大时趋近于白色,亮度越低,图像越黑,当为0时,图像就完全成黑色,刚好适用于这种场景

CSS 实现角标效果的完整代码

具体实现就是

tag::before{
  filter: brightness(.7);
  background-color: inherit;
}

像其他饱和度(saturate)、灰度(grayscale)滤镜也能达到类似的效果,不过这里亮度更为合适

3.未来的解决方式 color-mix

大家可能在一些 CSS 预处理中用过颜色的处理方案,比如要把一个颜色亮度降低 20%,在 less 中可能是这样

.el{
  background: darken(@color, 20%); 
}

不过这些是预处理的,变化并不是实时的,有时候可能并不能满足实际需求。

现在,新的颜色方案已经要在 CSS 中实现了,那就是 color-mix,也就是颜色混合,目前已经在草案中了,如果未来全面支持了,那么要将一个颜色变暗,可以这样来实现

.el{
  --accent: #EA3447;
  background: hsl(from var(--accent) h s calc(l - 20%));
}

这里的 from 表示将原有颜色展开,然后重新计算成新的颜色

更多关于color-mix的草案可以查看 www.w3.org/TR/css-colo…

三、富有质感的高光

设计师为了突出一定的质感,在标签上和加了一层“微弱的高光”,上面的截图可能不是特别清晰,可以看下面的放大对比图

CSS 实现角标效果的完整代码

能看出区别吗?能体会到设计的良苦用心吗?

看着有些类似一个是纯色填充,一个是渐变填充。为了保证颜色变量的单一性,这里的高光可以用一层半透明的白色渐变来实现

tag{
  background: linear-gradient(to right bottom, rgba(255, 255, 255, 0.4), transparent) rgba(20, 30, 41, 0.76));
}

这里绘制了一个从左上角到右下角的半透明白色渐变,覆盖在原本的颜色上,效果如下

CSS 实现角标效果的完整代码

由于只是简单粗暴的叠加,导致整体偏白,有种饱和度不足的感觉,究其原因,还是由于叠加的不够自然。那么如何叠加的更为自然呢?可以采用background-blend-mode,也就是背景混合模式。

为了让叠加效果看起来更加柔和,这里可以用soft-light,如下

tag{
  background-blend-mode: soft-light
}

这样效果就好多了,非常精致,可以看看对比效果

CSS 实现角标效果的完整代码

完整代码如下

tag{
  border-radius: 4px 4px 4px 0px;
  color: #fff;
  padding: 2px 6px;
  font-size: 10px;
  line-height: 16px;
  background: linear-gradient(to right bottom, rgba(255, 255, 255, 0.4), transparent) var(--bg, #EA3447);
  background-blend-mode: soft-light;
}
tag::before{
  content: '';
  position: absolute;
  width: 3px;
  height: 3px;
  left: 0;
  bottom: -3px;
  background-color: inherit;
  filter: brightness(.7);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

四、总结一下

整体实现其实没有太难的地方,如果设计师没什么要求,其实到第一步就可以结束了。但是如果充分还原这些富有质感的设计,也能让网站整体的视觉感受更上一层楼。下面总结一些实现要点:

  • 自适应尺寸的尽量用 CSS 实现
  • 三角的实现推荐 clip-path,更容易理解
  • 充分考虑实现的可维护性,比如能用一个变量,就不要用两个变量,CSS 同样如此
  • 叠加一层半透明的黑色可以实现图像变暗
  • 图像变暗还可以通过 CSS 滤镜 brightness 实现
  • 未来还可以通过颜色混合 color-mix 来实现,可以提前了解一下
  • 背景混合模式可以让颜色叠加根据自然

到此这篇关于CSS 实现角标效果的文章就介绍到这了,更多相关CSS 实现角标内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
CSS3之背景尺寸Background-size使用介绍
Oct 14 HTML / CSS
使用css3背景渐变中的透明度来设置不同颜色的背景渐变
Mar 31 HTML / CSS
利用纯CSS3实现动态的自行车特效源码
Jan 20 HTML / CSS
CSS3实现多样的边框效果
May 04 HTML / CSS
浅析CSS3 中的 transition,transform,translate之间区别和作用
Mar 26 HTML / CSS
CSS3实现渐变背景兼容问题
May 06 HTML / CSS
html5嵌入内容_动力节点Java学院整理
Jul 07 HTML / CSS
HTML5 Canvas——用路径描画线条实例介绍
Jun 09 HTML / CSS
HTML5使用drawImage()方法绘制图像
Jun 23 HTML / CSS
html5使用canvas绘制文字特效
Dec 15 HTML / CSS
HTML5自定义属性前缀data-及dataset的使用方法(html5 新特性)
Aug 24 HTML / CSS
Html分层的box-shadow效果的示例代码
Mar 30 HTML / CSS
CSS SandBox应用场景及常见问题
CSS的calc函数用法小结
Jun 25 #HTML / CSS
flex布局中使用flex-wrap实现换行的项目实践
Jun 21 #HTML / CSS
css3手动实现pc端横向滚动
Jun 21 #HTML / CSS
使用CSS自定义属性实现骨架屏效果
Jun 21 #HTML / CSS
css如何把元素固定在容器底部的四种方式
css中有哪些方式可以隐藏页面元素及区别
Jun 16 #HTML / CSS
You might like
用来给图片加水印的PHP类
2008/04/09 PHP
解析php curl_setopt 函数的相关应用及介绍
2013/06/17 PHP
phpMyAdmin自动登录和取消自动登录的配置方法
2014/05/12 PHP
Codeigniter中禁止A Database Error Occurred错误提示的方法
2014/06/12 PHP
PHP实现执行外部程序的方法详解
2017/08/17 PHP
laravel 输出最后执行sql 附:whereIn的使用方法
2019/10/10 PHP
javascript 变量作用域 代码分析
2009/06/26 Javascript
DIV菜单层实现代码
2010/11/19 Javascript
详解JavaScript中的客户端消息框架设计原理
2015/06/24 Javascript
jQuery幻灯片特效代码分享--鼠标滑过按钮时切换(2)
2020/11/18 Javascript
AngularJS实现标签页的两种方式
2016/09/05 Javascript
用原生js做单页应用
2017/01/17 Javascript
jQuery html表格排序插件tablesorter使用方法详解
2017/02/10 Javascript
JS数组交集、并集、差集的示例代码
2017/08/23 Javascript
AngularJS双向数据绑定原理之$watch、$apply和$digest的应用
2018/01/30 Javascript
vue实现重置表单信息为空的方法
2018/09/29 Javascript
vue+VeeValidate 校验范围实例详解(部分校验,全部校验)
2018/10/19 Javascript
Python类的专用方法实例分析
2015/01/09 Python
Python and、or以及and-or语法总结
2015/04/14 Python
解决Python requests库编码 socks5代理的问题
2018/05/07 Python
python简单操作excle的方法
2018/09/12 Python
python数据处理之如何选取csv文件中某几行的数据
2019/09/02 Python
在keras下实现多个模型的融合方式
2020/05/23 Python
Html5中的桌面通知Notification的实现
2018/09/25 HTML / CSS
京东全球售:直邮香港,澳门,台湾,美国,澳大利亚等地区
2017/09/24 全球购物
Shell脚本如何向终端输出信息
2014/04/25 面试题
医院护士专业个人的求职信
2013/12/09 职场文书
预备党员思想汇报范文
2013/12/29 职场文书
小学假期安全广播稿
2014/09/28 职场文书
2014年加油站站长工作总结
2014/12/23 职场文书
结婚典礼主持词
2015/06/29 职场文书
使用Html+Css实现简易导航栏功能(导航栏遇到鼠标切换背景颜色)
2021/04/07 HTML / CSS
HTML+CSS+JS实现图片的瀑布流布局的示例代码
2021/04/22 HTML / CSS
Python opencv缺陷检测的实现及问题解决
2021/04/24 Python
Angular性能优化之第三方组件和懒加载技术
2021/05/10 Javascript
一行Python命令实现批量加水印
2022/04/07 Python