星期四, 11月 05, 2015

CSS3 網頁表示顏色的方法


                                        



本篇重點:16進位表色法、RGBA表色法、HSLA表色法


-------------------------------------------------------------------------------------------------------------

  • 16進位表色法:
     
    color: #  00   00   00 
                      G     B

     
    顏色比例小 <----------------------------------> 顏色比例大
                        0 1 2 3 4 5 6 7 8 9 a b c d e f

    e.g.  #33cccc   --> 紅色比例:3 / 綠色比例:c / 藍色比例:c

-------------------------------------------------------------------------------------------------------------


  • RGBA表色法

    color: rgba( 0~255 , 0~255 , 0~255 ,透明度0~1)

    e.g.  rgba(51,204,204,1) 

-------------------------------------------------------------------------------------------------------------


  • HSLA表色法

    color: hsla(色相0~360度,飽和度0%~100%,明度0%~100%,透明度0~1)

    e.g.  hsla(180,60%,50%,1) 

    國外流行的網頁設定方法,因為直接改色很方便。

可以參考老師寫的文章:
RGB、HSL、Hex 網頁色彩碼,看完這篇全懂了

                                        



2 則留言:

CSS3 will-change 屬性

透過 CSS3 中的 will-change 可以提前讓瀏覽器知道某個區塊將會發生什麼動畫效果, 對於在 Safari 中某些動畫造成文字粗細閃爍的 bug,可以用這個方法修復, 對於其他動畫不夠順暢時,或許可以試試看這個屬性, 但這屬性還滿新的,使用前必須看看有沒有支援。...