CSS3系列教程:HSL 和HSLA
使用CSS3 HSL宣告同樣是用來設定顏色的。下一個呢? HSLA? 是的,這個和RGBA的效果是一樣的。
HSL宣告使用色調Hue(H)、飽和度Saturation(s)和亮度Lightness(L)來設定顏色。
- Hue衍生於色盤:0和360是紅色,接近120的是綠色,240是藍色。
- Saturation值是一個百分比:0%是灰度,100%飽和度最高
- Lightness值也是一個百分比:0%是最暗,50%均值,100%最亮。
隨想:為什麼是”ligntness”呢?或許我更習慣Photoshop中的”Brightness”呢……
瀏覽器相容性:
目前HSL和HSLA被Firefox、Google Chrome、和Safari瀏覽器較好的支援,而且不需要任何字首
CSS3 HSL
上面的演示由以下樣式實現
div.hslL1 { background:hsl(320, 100%, 50%); height:20px; } div.hslL2 { background:hsl(320, 50%, 50%); height:20px; } div.hslL3 { background:hsl(320, 100%, 75%); height:20px; } div.hslL4 { background:hsl(202, 100%, 50%); height:20px; } div.hslL5 { background:hsl(202, 50%, 50%); height:20px; } div.hslL6 { background:hsl(202, 100%, 75%); height:20px; }
瀏覽器支援:
- Firefox 3.05+
- Google Chrome 1.0.154+
- Internet Explorer 8-
- Opera 9.6 +
- Safari 3.2.1 +
CSS3 HSLA
上面的效果由以下樣式實現:
div.hslaL1 { background:hsla(165, 35%, 50%, 0.2); height:20px; } div.hslaL2 { background:hsla(165, 35%, 50%, 0.4); height:20px; } div.hslaL3 { background:hsla(165, 35%, 50%, 0.6); height:20px; } div.hslaL4 { background:hsla(165, 35%, 50%, 0.8); height:20px; } div.hslaL5 { background:hsla(165, 35%, 50%, 1.0); height:20px; }
瀏覽器支援:
- Firefox 3.05+
- Google Chrome 1.0.154+
- Internet Explorer 8 -
- Opera 9.6-
- Opera 10
- Safari 3.2.1+
CSS3系列教程|前端觀察
特別宣告,本系列文章譯自:Zen Elements,非常感謝Alex的辛勤工作。
Special Staterment: this series posts were translate from Zen Elements, thanks Alex for his great work so much.
相關推薦
CSS3系列教程:HSL 和HSLA
使用CSS3 HSL宣告同樣是用來設定顏色的。下一個呢? HSLA? 是的,這個和RGBA的效果是一樣的。 HSL宣告使用色調Hue(H)、飽和度Saturation(s)和亮度Lightness(L)來設定顏色。 Hue衍生於色盤:0和360是紅色,接近120的是綠色,240是藍
CSS3系列教程:背景圖片(背景大小和多背景圖)
背景圖片/紋理有很多種使用方式,常常用於為新增網站的最佳的介面美化。現在它在CSS3中被重視,我們可以應用多背景圖和背景圖片尺寸來實現更完美的效果。 CSS3的背景圖片大小可以寫成 background-size:Apx Bpx; Apx = x軸(圖片寬度) Bpx = y軸
CSS3系列教程:邊框半徑和圓角
頁面中圓角的實現是個很頭疼的問題,雖然現在有很多種實現方法,但是都是比較麻煩的。在本文中,讓我們看看如何使用CSS3 border-radius來實現圓角DIV。 跨瀏覽器相容性 就像在上一篇《CSS3系列教程:簡介》中提到的,並不是所有的瀏覽器支援CSS3,但是那些比較好的瀏覽器選
CSS3系列教程:多列/多卷
使用CSS3可以為你的網站建立多列,而不用為每列制定特定的層或段落。 與多背景圖片一樣,CSS3多列也是我最喜愛的一個技術。我想這條CSS3屬性有在報紙和雜誌佈局中以外的很多潛在的用途。如果你在某個想法或個人網站中使用了這種方法,請在下面的評論中提交你的連結,我很高興能確認這種方法能用
CSS3系列教程:嵌入字型/網路字型
想要製作一些很酷的頭部效果而且擺脫網站安全字型並且不使用圖片檔案?那麼就使用CSS3嵌入字型吧! 要使用一款字型,我們首先需要使用‘@font-face’屬性。這必須先準備好我們要用的字型檔案。 儘管這樣,讓我們簡單的學習一下字型方面的歷史。@font-face屬性從CSS2就已經考
CSS3系列教程:RGBA
使用新的CSS3的”RGBA”宣告,不僅僅讓我們像通常一樣設定RGB顏色,而且還可以設定其透明度。 RGBA像RGB一樣設定顏色,而這個”A”——RGBA中的最後一個值——允許我們設定該元素的透明度。就像opacity宣告一樣,一個opacity值為1的元素是完全不透明的,而一個opa
CSS3系列教程:邊框顏色
現在我們來看一看如何為邊框的border-color新增更多的色彩。 使用CSS3的border-radius屬性,如果你設定了border的寬度是X px,那麼你就可以在這個border上使用X種顏色,每種顏色顯示1px的寬度。如果說你的border的寬度是10個畫素,但是隻聲明瞭5
CSS3系列教程:簡介
CSS3不是新事物,更不是隻是圍繞border-radius屬性實現的圓角。它正耐心的坐在那裡,已經準備好了首次登場,呷著咖啡,等著瀏覽器來鋪上紅地毯。你看,瀏覽器需要跟上了…… 注意:瀏覽器需要改進 儘管把玩CSS3是很有趣的事情——就像接下來我要演示的幾篇教程中表現的那樣,但是需
CSS3系列教程:陰影
陰影大約從CSS2就開始有了,但是隻有Safari一個瀏覽器支援它,到現在依然是這樣。陰影在CSS3中可以應用在邊框和文字上,就像圖片的陰影效果一樣。 一般可以分為box-shadow和text-shadow兩類。 CSS3的box-shadow和text-shadow可以寫做:bo
CSS3系列教程:透明度
CSS3透明…不透明…漸變…隨便你怎麼叫它吧!這裡是一些使用CSS3透明度的指南以及一些例子。 其實這個firefox很久以前就支援了,而IE一直不支援! “opacity”宣告用來設定一個元素的透明度:層、文字、圖片等…一個opacity的值為1的元素是完全不透明的,反之,值為0是
Hyper-V 2016 系列教程10 快照功能 檢查點 和原還虛擬機
hyper-v microsoft windows server 2016 windows 10 虛擬化相對於XenServer和VMware Esxi來說, Hyper-V的快照功能比較簡潔和簡單。(1)打開 Hyper-V管理器,功能菜單,操作 | 檢查點,如下圖所示。(2) 執行後,會顯示如下檢查點的s
Hyper-V 2016 系列教程40 使用 PowerShell 實現虛擬機自動化和管理虛擬機
windows server 2012 2016; hyper-v;虛擬化註:以下內容部分取自微軟官網:可以在 Hyper-V 主機上的 Windows 10 或 Windows Server 技術預覽版虛擬機中使用 PowerShell Direct 運行任意 PowerShell,而無論網絡配置或遠程管理
Hyper-V 2016 系列教程54 SCVMM 2016 布署前 Windows評估和部署工具包 Windows ADK安裝
windows server 虛擬化 在布署SCVMM 2016安裝前,必須要下載 Windows ADK安裝,不然是不能安裝SCVMM 2016的,下面分享一下如何下載和安裝Windows ADK。(1) 下載官方網頁如下圖。(2) 雙擊下載好的可執行EXE文件,選擇安裝路徑如下圖,然後點擊“下
JXLS 2.4.0系列教程(五)——更進一步的應用和bug修復
erl dir 問題 create sna 過程 idl es2017 cal 註:本文代碼建立於前面寫的代碼。不過不看也不要緊。 前面的文章把JXLS 2.4.0 的基本使用寫了一遍,現在講講一些更進一步的使用方法。我只寫一些我用到過的方法,更多的高級使用方法請參
Linux系列教程(五)——Linux鏈接命令和權限管理命令
密碼 mission pos link 掩碼 Owner 最大的 linux系統 passwd 前一篇博客我們講解了Linux文件和目錄處理命令,還是老生常淡,對於新手而言,我們不需要完全記住命令的詳細語法,記住該命令能完成什麽功能,然後需要的時候去查就好了,用的多了我
Linux系列教程(九)——Linux常用命令之網絡和關機重啟命令
route 註意 端口號 post rac pos 名稱 window ebo 前一篇博客我們講解了Linux壓縮和解壓縮命令,使用的最多的是tar命令,因為現在很多源碼包都是.tar.gz的格式,通過 tar -zcvf 能完成解壓。然後對於.zip格式的文件,使用g
Linux系列教程(十五)——Linux用戶和用戶組管理之用戶管理命令
總結 usr 而且 ron 初始 切換 密碼規則 一個 郵箱目錄 上篇博客我們介紹了用戶管理的相關配置文件,包括用戶信息文件/etc/passwd,用戶密碼文件/etc/shadow;然後介紹了用戶組信息文件/etc/group,用戶組密碼文件/etc/gshadow。
Linux系列教程(十七)——Linux權限管理之文件系統系統屬性chattr權限和sudo命令
系統屬性 brush 選項 all 好的 幫助 博客 簡單 命令 上篇博客我們介紹了權限管理的ACL權限,通過設定 ACL 權限,我們為某個用戶指定某個文件的特定權限。這篇博客我們將介紹權限管理中用的比較多的兩個命令 chattr 和 sudo 。 1、設定文件系統
NetworkX系列教程(11)-graph和其他數據格式轉換
sha 小書匠 ans mar http 導入 src 如果 apt 小書匠 Graph 圖論 學過線性代數的都了解矩陣,在矩陣上的文章可做的很多,什麽特征矩陣,單位矩陣等.grpah存儲可以使用矩陣,比如graph的鄰接矩陣,權重矩陣等,這節主要是在等到graph後,
webpack4 系列教程(四): 單頁面解決方案--代碼分割和懶加載
hub 名稱 ava mas dirname 相關 static tps 界面 本節課講解webpack4打包單頁應用過程中的代碼分割和代碼懶加載。不同於多頁面應用的提取公共代碼,單頁面的代碼分割和懶加載不是通過webpack配置來實現的,而是通過webpack的寫法和內