線上色彩工具收集

列出一些在自己書籤裡關於色彩的小工具~

色輪 / 色彩工具 :

Adobe
https://color.adobe.com/zh/create/color-wheel/

paletton
http://paletton.com/

colllor
http://colllor.com/

線上上傳圖片生成色票網站 :

imgr.co
http://imgr.co/

輸入 CSS 網址，查看其中色票 :

cssprism
http://cssprism.com/

輸入在線網頁，輸出色票 :

WebColourData
http://webcolourdata.com/

隨機色彩生成 :

Colourcode
http://www.colourco.de/

Colordot
https://color.hailpixel.com/

其他色票色彩靈感 :

design-seeds
選擇顏色後會出現由擁有該顏色的美麗照片色票
https://www.design-seeds.com/by-color/

Tint UI 
裡面的色票是收集一些官方的色票如 Material Design, iOS, Flat UI 等等...
http://tintui.com/index.html

日本傳統色網頁
http://nipponcolors.com/

日本傳統色字典
http://www.colordic.org/w/

中國傳統色網頁
http://zhongguose.com/
http://ylbook.com/cms/web/chuantongsecai/chuantongsecai.htm

小筆記 - WORDPRESS 搬家紀錄

先試用了 15 天的虛擬主機
把先在本機 XAMPP 建的 WORDPRESS 做好的頁面轉移到虛擬主機上
把主機商給你的帳密登入網站控制台 cPanel ，
這個平台可以管理、上傳、刪除你的網站設定、資料庫等等...
試用完了覺得可以之後決定用此主機拉，在轉移到新註冊的網域，所以還要再進行一次轉移動作。
稍微記一下步驟

C:\XAMPPP\htdocs\wordpress 把這個資料夾裡的內容全選，縮成壓縮檔，

cPanel 不能解 rar 檔，所以請壓成 zip 檔，
(可以用 cPanel 本身的上傳功能上傳，但也可以用 FileZilla FTP上傳網頁。)

去 cPanel 介面的檔案管理下的 /public_html，直接上傳剛壓縮的檔案，
上傳後右鍵 extract 解壓縮。

cPanel 最下方有個 Web Application，Wordpress 應該上傳後會出現，不須再另外灌，
但要去文件和表那裡更改你的新網址還有資料庫的資料。

傳完發現因為網址變了，所以之前在網頁內設定的圖片、連結內頁的網址等，都要改成新的，不然會看不到。

第一次傳玩時發現網頁的選單點進去都不能看，
於是更改根目錄下的 .htaccess 檔案，在最後加上

# BEGIN WordPress

RewriteEngine On
RewriteBase /wordpress/
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /wordpress/index.php [L]

# END WordPress，

不知道如何更改可以至 htaccess editor 。

修改 wp-config.php MySQL資料庫的設定

define('DB_NAME', '資料庫名稱');

/** MySQL database username */

define('DB_USER', '用戶名稱');

/** MySQL database password */

define('DB_PASSWORD', '用戶密碼');

/** MySQL hostname */
define('DB_HOST', 'MySQL主機位址');


及裡面之前另外加的用來變更域名及網址

define('WP_SITEURL', 'http://輸入新的網址/');

define('WP_HOME', 'http://輸入新的網址/');

也可以到 phpmyadmin 的 wp_options 資料表 找 siteurl、home 去改新網址

色彩基本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;