小編給大家分享一下CSS前景背景自動(dòng)配色技術(shù)是什么,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
為威寧等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計(jì)制作服務(wù),及威寧網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為成都做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)、威寧網(wǎng)站設(shè)計(jì),以傳統(tǒng)方式定制建設(shè)網(wǎng)站,并提供域名空間備案等一條龍服務(wù),秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達(dá)到每一位用戶的要求,就會(huì)得到認(rèn)可,從而選擇與我們長期合作。這樣,我們也可以走得更遠(yuǎn)!
一、顏色匹配效果預(yù)覽
如下GIF示意,當(dāng)我們按鈕背景色逐漸變淡的時(shí)候,文字顏色也從原來的白色變成黑色了,同時(shí)邊框也顯示出來了,其中的配色轉(zhuǎn)換是純CSS實(shí)現(xiàn)的。
自動(dòng)配色按鈕示意
拖動(dòng)R,G,B對(duì)應(yīng)滑塊,可以看到按鈕文字顏色以及邊框顏色,會(huì)自動(dòng)根據(jù)背景色不同而發(fā)生變化。具體表現(xiàn)為:
深色背景下,文字白色,無邊框。
淺色背景下,文字黑色,有加深邊框,便于和周圍環(huán)境區(qū)分開。
這種智能匹配是純CSS實(shí)現(xiàn)的,主要是使用CSS3 calc()計(jì)算,以及CSS3原生var變量。
二、配色代碼展示
HTML代碼很簡單,如下:
<button class="btn">我是按鈕</button>
重點(diǎn)和難點(diǎn)在CSS部分:
:root { /* 定義RGB變量 */ --red: 44; --green: 135; --blue: 255; /* 文字顏色變色的臨界值,建議0.5~0.6 */ --threshold: 0.5; /* 深色邊框出現(xiàn)的臨界值,范圍0~1,推薦0.8+*/ --border-threshold: 0.8; } .btn { /* 按鈕背景色就是基本背景色 */ background: rgb(var(--red), var(--green), var(--blue)); /** * 使用sRGB Luma方法計(jì)算灰度(可以看成亮度) * 算法為: * lightness = (red * 0.2126 + green * 0.7152 + blue * 0.0722) / 255 */ --r: calc(var(--red) * 0.2126); --g: calc(var(--green) * 0.7152); --b: calc(var(--blue) * 0.0722); --sum: calc(var(--r) + var(--g) + var(--b)); --lightness: calc(var(--sum) / 255); /* 設(shè)置顏色 */ color: hsl(0, 0%, calc((var(--lightness) - var(--threshold)) * -999999%)); /* 確定邊框透明度 */ --border-alpha: calc((var(--lightness) - var(--border-threshold)) * 100); /* 設(shè)置邊框相關(guān)樣式 */ border: .2em solid; border-color: rgba(calc(var(--red) - 50), calc(var(--green) - 50), calc(var(--blue) - 50), var(--border-alpha)); }
乍一看,猶如鴨子聽雷——不知所云,其實(shí)不復(fù)雜,且容我剖析下實(shí)現(xiàn)原理。
三、前景背景自動(dòng)配色原理
1. CSS屬性值范圍溢出邊界渲染特性
CSS這門語言有個(gè)很有意思的特性,就是CSS屬性值超過正常的范圍的時(shí)候,只要格式正確,也會(huì)渲染,而渲染的值就是合法邊界值。
舉兩個(gè)板栗:
opacity透明度屬性值合法范圍是0-1,但是,你設(shè)置負(fù)數(shù),或者極大值,瀏覽器也能解析,只是要么是0,要么是1而已,如下:
.example { opacity: -2; /* 解析為 0, 完全透明 */ opacity: -1; /* 解析為 0, 完全透明 */ opacity: 2; /* 解析為 1, 完全不透明 */ opacity: 100; /* 解析為 1, 完全不透明 */ }
色值,如HSL,S和L的范圍都是0%-100%,但是,你設(shè)置負(fù)數(shù),或者極大值,瀏覽器也能解析,只是要么是0%,要么是100%而已,如下:
.example { color: hsl(0, 0%, -100%); /* 解析為 hsl(0, 0%, 0%), 黑色 */ color: hsl(0, 0%, 200%); /* 解析為 hsl(0, 0%, 100%), 白色 */ }
本文的配色技術(shù)就活用了這種邊界渲染特性。
2. var變量傳遞給calc實(shí)現(xiàn)復(fù)雜計(jì)算
我們對(duì)CSS代碼從上往下逐個(gè)剖析下。
首先,在:root根選擇器上定義幾個(gè)全局CSS變量(語義上的全局):
:root { --red: 44; --green: 135; --blue: 255; --threshold: 0.5; --border-threshold: 0.8; }
其中:
–threshold
這個(gè)是color變色的臨界值,用來和當(dāng)前RGB顏色值的亮度對(duì)比。
–border-threshold
這個(gè)是邊框顏色透明度的臨界值,同樣也是和當(dāng)前RGB顏色值的亮度對(duì)比。
然后是。btn{}內(nèi)部的CSS代碼:
background: rgb(var(--red), var(--green), var(--blue));
這個(gè)很好理解,就是基本的RGB色值作為背景色。
--r: calc(var(--red) * 0.2126); --g: calc(var(--green) * 0.7152); --b: calc(var(--blue) * 0.0722); --sum: calc(var(--r) + var(--g) + var(--b)); --lightness: calc(var(--sum) / 255);
這里5行5個(gè)CSS變量,需要的其實(shí)是最后一個(gè)--lightness,就是計(jì)算當(dāng)前背景色的亮度。用的是使用sRGB Luma灰度算法①,為什么需要5行呢?因?yàn)橛?jì)算公式就是如此:
lightness = (red * 0.2126 + green * 0.7152 + blue * 0.0722) / 255
其中,R,G,B色值相乘的系數(shù)就是固定的,不同灰度算法系數(shù)還不一樣。--lightness表示亮度,范圍是0-1,此時(shí)就可以和--threshold和--border-threshold這兩個(gè)臨界值比對(duì),來確定按鈕的文字顏色,邊框透明度。
① 這里的灰度可以看成是亮度,實(shí)際上HSL的亮度計(jì)算方法應(yīng)該是,R,G,B中的色值最大值和最小值之和的二分之一。
color: hsl(0, 0%, calc((var(--lightness) - var(--threshold)) * -999999%))
設(shè)置顏色的CSS代碼。
此處calc計(jì)算翻譯成中文就是:(亮度值 – 臨界值) * 比例系數(shù)。
其中亮度值在0-1之間游走,臨界值是固定的0.5,于是:
如果亮度值小于0.5,亮度值減去臨界值為負(fù),由于我們的比例系數(shù)是很大很大的負(fù)數(shù),負(fù)負(fù)得正,于是,會(huì)得到一個(gè)巨大的正數(shù),按照邊界渲染原理,會(huì)按照100%渲染,于是顏色是白色;
如果亮度值大于0.5,亮度值減去臨界值為正,由于我們的比例系數(shù)是很大很大的負(fù)數(shù),于是,會(huì)得到一個(gè)巨大的負(fù)數(shù),按照邊界渲染原理,會(huì)按照0%渲染,于是顏色是黑色;
以上就是按鈕文字顏色變色背景下黑色,深色背景下白色的原理。
--border-alpha: calc((var(--lightness) - var(--border-threshold)) * 100);
邊框透明度是類似的原理。此處calc計(jì)算翻譯成中文就是:(亮度值 – 邊框臨界值) * 100。
其中亮度值在0-1之間游走,邊框臨界值是固定的0.8,于是:
如果亮度值小于0.8,亮度值減去邊框臨界值為負(fù),在CSS中,負(fù)數(shù)透明度會(huì)按照邊界0渲染,此時(shí)邊框完全透明;
如果亮度值大于0.8,亮度值減去邊框臨界值為正,此時(shí)的透明度計(jì)算值會(huì)在0~20之間游走,當(dāng)然,數(shù)值大于1的透明度值都會(huì)按照1渲染,此時(shí),邊框基本處于完全不透明狀態(tài),加深的邊框顯現(xiàn);
border: .2em solid; border-color: rgba(calc(var(--red) - 50), calc(var(--green) - 50), calc(var(--blue) - 50), var(--border-alpha));
設(shè)置邊框樣式,邊框顏色比背景色深50個(gè)單位值(負(fù)數(shù)為按照0渲染),然后透明度就是基于亮度動(dòng)態(tài)計(jì)算的。深色背景下,按鈕邊框透明度為0,不顯示;淺色背景下,透明度在0~1之間游走,出現(xiàn),北京顏色越淺,邊框透明度越大,邊框顏色越深,符合配色預(yù)期。
相信經(jīng)過上面的一番剖析,大家就會(huì)明白其實(shí)現(xiàn)的原理了。
改變按鈕的背景色
.btn類名下的CSS代碼是固定的,讓我們需要改變按鈕的顏色的時(shí)候,不是改。btn下的CSS,而是修改:root中的下面3個(gè)變量值:
--red: 44; --green: 135; --blue: 255;
CSS設(shè)置直接改數(shù)值,如果是JS設(shè)置,借助setProperty()方法,若不了解,可以參考這篇文章:“如何HTML標(biāo)簽和JS中設(shè)置CSS3 var變量”。
四、最后結(jié)束語
由于var的兼容性限制,這個(gè)非常有意思的CSS技巧還不太適合在大型對(duì)外項(xiàng)目中使用。
小程序可以一試,因?yàn)閮?nèi)核環(huán)境相對(duì)固定。內(nèi)部系統(tǒng),實(shí)驗(yàn)項(xiàng)目可以玩一玩,會(huì)很有意思。
這種配色技巧其實(shí)不僅可以用在按鈕上,一些大區(qū)域的布局也是可以用的,因?yàn)檫@些布局的背景色可能是動(dòng)態(tài)的 ,此時(shí),文字顏色的配色也可以借助CSS實(shí)現(xiàn)自動(dòng)化。
另外,本文demo中按鈕文字就黑白兩色,實(shí)際上,我們的相乘系數(shù)小一點(diǎn)的話,可以有更多的色值出現(xiàn),配色會(huì)更加精致。
以上是“CSS前景背景自動(dòng)配色技術(shù)是什么”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
網(wǎng)站欄目:CSS前景背景自動(dòng)配色技術(shù)是什么
標(biāo)題網(wǎng)址:http://muchs.cn/article0/pdpsoo.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站收錄、小程序開發(fā)、品牌網(wǎng)站設(shè)計(jì)、網(wǎng)站內(nèi)鏈、網(wǎng)站改版、網(wǎng)站導(dǎo)航
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)