最近在项目中碰到一个这样的角标设计,如下:
设计稿
像这种可以文字可变化,自适应大小的布局,自然首选 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 实现,比较容易理解,确定三个坐标,直接裁剪就可以了。
clip-path
用 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背景绘制一层半透明渐变。
tag::before{
background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3));
background-color: inherit;
}
这里的background-color:inherit就表示背景颜色是继承父级的。
CSS 滤镜中有个brightness,可以设置图像的亮度,亮度越高,图像越白,无穷大时趋近于白色,亮度越低,图像越黑,当为0时,图像就完全成黑色,刚好适用于这种场景。
CSS filter
具体实现就是:
tag::before{
filter: brightness(.7);
background-color: inherit;
}
像其他饱和度(saturate)、灰度(grayscale)滤镜也能达到类似的效果,不过这里亮度更为合适。
大家可能在一些 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的草案可以查看 https://www.w3.org/TR/css-color-5/#relative-HSL。
设计师为了突出一定的质感,在标签上加了一层“微弱的高光”,上面的截图可能不是特别清晰,可以看下面的放大对比图
富有质感的高光
能看出区别吗?能体会到设计的良苦用心吗?
看着有些类似一个是纯色填充,一个是渐变填充。为了保证颜色变量的单一性,这里的高光可以用一层半透明的白色渐变来实现
tag{
background: linear-gradient(to right bottom, rgba(255, 255, 255, 0.4), transparent) rgba(20, 30, 41, 0.76));
}
这里绘制了一个从左上角到右下角的半透明白色渐变,覆盖在原本的颜色上,效果如下
泛白
由于只是简单粗暴的叠加,导致整体偏白,有种饱和度不足的感觉,究其原因,还是由于叠加地不够自然。那么如何叠加地更为自然呢?可以采用background-blend-mode,也就是背景混合模式。
为了让叠加效果看起来更加柔和,这里可以用soft-light,如下:
tag{
background-blend-mode: soft-light
}
这样效果就好多了,非常精致,可以看看对比效果。
背景混合对比
完整代码如下:
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%);
}
整体实现其实没有太难的地方,如果设计师没什么要求,其实到第一步就可以结束了。但是如果充分还原这些富有质感的设计,也能让网站整体的视觉感受更上一层楼。下面总结一些实现要点:
来源: 前端侦探
今天这篇文章就来讲讲使用JavaScript来实现这种分屏的视觉UI效果。现在在网站上这种分屏视觉效果应用的也非常广泛,比如 Corsair website。
在css中使用伪类虽然实现了样式的改变,但由于没有过渡效果会显得很生硬。以前如果要实现过渡,就需要借助第三方的js框架来实现。现在只需要使用CSS3的过渡(transition)功能,就可以从一组样式平滑的切换到另一组样式。
js最近有个小伙伴问到了怎么实现新手引导的效果,然后便去网上找了下实现方案。可以通过css的border来实现。
设计图含有斜切角的效果时,我们一般想到的方法是切出四个角为背景,然后用border连起来,这样就能显示出该效果了,那么直接使用css呢?下面就整理css做斜边的效果。
这篇文章在不使用任何插件的情况,以最简洁的原生javascript来实现打字机效果和跑马灯效果。打字效果即把一段话一个字一个字的显示出来。
一般遮罩加上透明度opacity就是阴影效果。阴影效果和一般遮罩一样,唯一不同的是设置.mask遮罩的背景色用rgba()表示,当然hsla()也是可以的。模糊效果(毛玻璃效果) 通过 filter来实现
主要运用的是1.border 组成的直角三角形。2,before 和 after 伪元素 。3,z-index属性;将元素的长宽设置为0,并且将border的3条边设置为透明的,就会出现border颜色的直角三角形
文字选中效果,这个可能很少有人注意过。在默认状态先一般选中的文本颜色是白字蓝底的,不过可以通过CSS进行设置。::selection定义元素上的伪选择器,以便在选定元素时设置其中文本的样式。
发布iPhone XR的时候 各种心动 去官网看了一遍又一遍。闲着无聊发现 里面的介绍很用大篇幅的有背景文字来介绍。Like this:看着挺酷炫的还不错 就看了下实现方式。还挺简单的。
多元素之间如何实现过渡动画效果呢?这么写行不行呢?肯定是不行的,因为 Vue 在两个元素进行切换的时候,会尽量复用dom,就是因为这个原因,导致现在动画效果不会出现。如果不让 Vue 复用dom的话,应该怎么做呢?只需要给这两个div不同的key值就行了
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!