色彩基本3要素

色彩分成 3 要素
1. 色相  2.明度  3.彩度

色相 
就是 我們一般說，眼睛看到的這是什麼顏色的時候
也就是紅橙黃綠藍靛紫咖啡... 這些顏色的名稱

明度
色彩的明暗程度
一個顏色加上白色明度越高
加上黑色明度越低

彩度
色彩的鮮豔程度、飽和程度，
色彩越純粹愈飽和，除非你加上白、黑、灰或其他色彩，就會降低彩度
調配水彩時也可以加上水降低彩度。
以味覺比較視覺... 像是在外面賣的濃湯，有的店家參了許多水，喝了就覺得好淡，
而有的則會讓你覺得很濃郁的這種感覺。


PHOTOSHOP 裡選色器的 HSB 模型來看

H.色相

PS 裡的色相條，皆以紅為開始紅為最後

S.飽和度

PS 裡的飽和度條狀最上面是純色( S：100% )，最下面則是白色( S：0% )

B.亮度

PS 裡的亮度條狀最上面是純色( B：100% )，最下面則是黑色( B：0% )

IE11 下 多1px 問題

用 CSS 寫一個付款步驟麵包屑
這個麵包屑下以 li 加上 before 和 after 做成指標的形狀：



IE11 中瀏覽時居然 !!!

看到沒

一個白色間隙~~
1px !  

問題在於  li 內下了個 border-radius: 5px 0 0 5px;
這是個在 IE11 才出現的 BUG ~~

於是加了支 IE11 HACK， 讓它移 1 px
 *::-ms-backdrop, .pay-step li:after { right: -27px; } /* IE11 */

問題解決 ~~

CSS HACK - 區分IE 各版本寫法

.color{ _color:green;}  ( IE6 (含 IE6 ) 以下)

.color{ *color:gray; }  ( IE7 ( 含 IE7 )以下)

.color { color:green \0; } ( IE8 + )

.color { color:green \ ; }   ( IE8 . IE9 )

:root .color { color:green \0; } ( IE9 + )

.color { color:green \9\0; }   ( IE9+ )

.color { color:green \9; }   ( IE10 ( 含 IE10 ) 以下 )

*::-ms-backdrop, .color{ color:red; }   ( IE11 )

選擇器前加前綴：

* html .color { color: red; } (IE6 ONLY )

*+html .color { color: red; } ( IE7 ONLY )

@media screen\9 { 

.color { color: black; } 

}  ( IE6 . IE7 )


@media \0screen {

 .color { color: black; } 

}  ( IE8 ONLY )


@media \0screen, screen\9 {

 .color { color: black; } 

} ( IE6 . IE7 . IE8 )


@media screen\0 {

 .color { color: black; } 

}  ( IE8 . IE9 . IE10 )
@media screen and (min-width: 0\0) {

 .color { color: black; }

}  ( IE9 . IE10 )


@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { 

.color { color: black; }

}   ( IE10 ONLY )

@media all and (-ms-high-contrast:none){
.color { color:greeny \0; }
} ( IE10 + )

@media all and (-ms-high-contrast:none){ 

*::-ms-backdrop, .color { color:green \0; }

 } ( IE11 + )

JOOMLA 問題 - 過小的PHP最大檔案上傳大小

Joomla3.4，安裝擴充套件時，按下上傳&安裝後，

出現 " 過小的 PHP 最大檔案上傳大小 " 訊息，

去資料夾找 php.ini 檔按下 Ctrl+F ，

輸入 upload_max_filesize 及 post_max_size 找到後修改數值。

CSS 簡寫

CSS 簡(縮)寫也稱作 CSS 代碼優化，將本來多行的 CSS 碼縮短，
可以節省 CSS 文件大小，優化整體網站。

以下整理了幾個常見 CSS 簡 ( 縮 ) 寫法：

一. 框模型的 外邊距 margin 和 內邊距 padding 

語法 margin : top right bottom left ;
( 記法： 上 右 下 左 )

1. 當四邊邊距都一樣時

margin : 10px 10px 10px 10px

簡(縮)寫為 
margin : 10px;

2. 上下邊距為 10px，左右為 5px 時

margin : 10px 5px 10px 5px;

簡(縮)寫為 
margin:10px 5px;
( 記法：上下 左右 )

3. 上下邊距一樣 10px 左邊距 5px 右邊距 3px

margin : 10px 3px 10px 5px

( 雖上下邊距一樣，但左右不一樣，所以不能縮寫 )

二. 字體 font

語法 font : style variant weight size family

字體屬性如下

font-style : italic;
font-variant : small-caps;  (此屬性介紹連至w3school )
font-weight : bold;
font-size : 15px;

簡(縮)寫為
font : italic small-caps bold 15px/1.8 "Helvetica",sans-serif;

三. 邊框 border

語法 border : style width color;

邊框屬性如下
border-style : solid;
border-width: 1px;
border-color : red;

簡(縮)寫為
border : solid 1px red;

四. 背景 background

語法 background : color image repeat attachment position;

背景的屬性如下
background-color : #f90;
background-image : url(background.png);
background-repeat : no-repeat;
background-attachment : fixed;  ( 此屬性介紹連至w3school )
background-position: 0 0;   ( 此屬性介紹連至w3school )
簡(縮)寫為
background : #f90 url(background.png) no-repeat fixed 0 0;

可以省略一個或多個屬性，省略的屬性樣式則為默認。

五. 圓角半徑 border-radius ( CSS3 新加屬性)

語法 border-radius : topleft topright bottomright bottomleft

( 左上 右上 右下 左下 )

-moz-border-radius-bottomleft:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
border-bottom-left-radius:5px;
border-top-left-radius:5px;
border-top-right-radius:5px;

簡(縮)寫為 

-moz-border-radius : 0 5px 5px;-webkit-border-radius : 0 5px 5px;
border-radius : 0 5px 5px;

六. 列表 lists

語法 list-style : type position image

列表的屬性如下
list-style-type : circle;
list-style-position : outside;
list-style-image : url(image.png);
list-style : circle outside url(image.png);

簡(縮)寫為
list-style : circle outside url(image.gif);

取消默認寫法為 list-style : none;