社區(qū)精選 |視覺(jué)還原小技巧！CSS 實(shí)現(xiàn)角標(biāo)效果
今天為各位小伙伴推薦的是社區(qū)作者 XboxYan 的文章，在這篇文章中他介紹了一些提升視覺(jué)還原的小技巧，讓我們一起來(lái)學(xué)習(xí)吧！
一、圓角矩形和三角形
<tag>審核為通過(guò)</tag>
tag{
border-radius: 4px 4px 4px 0px;
color: #fff;
padding: 2px 6px;
font-size: 10px;
line-height: 16px;
background: #EA3447;
}
tag::before{
content: '';
position: absolute;
width: 3px;
height: 3px;
left: 0;
bottom: -3px;
background: #BB2A39;
clip-path: polygon(0 0, 100% 0, 100% 100%); /*三角*/
}
二、顏色稍暗的三角形
1. 遮蓋一層半透明的黑色
tag::before{
background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3));
background-color: inherit;
}
2. 通過(guò)濾鏡實(shí)現(xiàn)
tag::before{
filter: brightness(.7);
background-color: inherit;
}
3.未來(lái)的解決方式 color-mix
.el{
background: darken(@color, 20%);
}
.el{
--accent: #EA3447;
background: hsl(from var(--accent) h s calc(l - 20%));
}
三、富有質(zhì)感的高光
tag{
background: linear-gradient(to right bottom, rgba(255, 255, 255, 0.4), transparent) rgba(20, 30, 41, 0.76));
}
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%);
}
四、總結(jié)一下
自適應(yīng)尺寸的盡量用 CSS 實(shí)現(xiàn) 三角的實(shí)現(xiàn)推薦 clip-path，更容易理解 充分考慮實(shí)現(xiàn)的可維護(hù)性，比如能用一個(gè)變量，就不要用兩個(gè)變量，CSS 同樣如此 疊加一層半透明的黑色可以實(shí)現(xiàn)圖像變暗 圖像變暗還可以通過(guò) CSS 濾鏡 brightness 實(shí)現(xiàn) 未來(lái)還可以通過(guò)顏色混合 color-mix 來(lái)實(shí)現(xiàn)，可以提前了解一下 背景混合模式可以讓顏色疊加根據(jù)自然
SegmentFault 思否社區(qū)小編說(shuō)
自 2022-07-01 起 SegmentFault 思否公眾號(hào)改版啦！之后將陸續(xù)推出新的欄目和大家見(jiàn)面！（請(qǐng)拭目以待呀~?）
在「社區(qū)精選」欄目中，我們將為廣大開(kāi)發(fā)者推薦來(lái)自 SegmentFault 思否開(kāi)發(fā)者社區(qū)的優(yōu)質(zhì)技術(shù)文章，這些文章全部出自社區(qū)中充滿智慧的技術(shù)創(chuàng)作者哦!
希望通過(guò)這一欄目，大家可以共同學(xué)習(xí)技術(shù)干貨，GET 新技能和各種花式技術(shù)小 Tips。
歡迎越來(lái)越多的開(kāi)發(fā)者加入創(chuàng)作者的行列，我們將持續(xù)甄選出社區(qū)中優(yōu)質(zhì)的內(nèi)容推介給更多人，讓閃閃發(fā)光的技術(shù)創(chuàng)作者們走到聚光燈下，被更多人認(rèn)識(shí)。
「社區(qū)精選」投稿郵箱：[email protected]
投稿請(qǐng)附上社區(qū)文章地址
評(píng)論
圖片
表情