CSS –梅問題．教學網

　　許多從事網頁設計的朋友，應該對於margin:0 auto;這語法不陌生，當設定完後div的區塊就會水平居中，相當的簡單與方便，但若在DIV外再包覆一層，並將上層的背景充滿整個畫面時，正常情況下，父層DIV的背景則會自動延展，並充難整個視窗頁面，但今天子層DIV設定的寬度，大於視窗的顯示範圍時，下方則會出現下捲軸，當把捲軸由左向右拉時，是否會發現節，父的背景不但沒向右延伸，而留了一大塊的空白，這時有經驗的網頁設計師，就會加入width:100%或是overflow:hidden，但怎麼加似乎都沒有任何反應。　　到底這是怎麼一回事，當初梅問題網站在平板瀏覽時，也曾出現過此問題，當時梅干則是將viewport的width設成1200，則解決了此問題，但最近將width改成device-width後，卻發現到之前的狀況又發生了，而為何到底會這樣呢?其實在CSS中，將width設為100%則是抓視窗的大小，而非內容的大小，因此這時當視窗小於裡面的區塊時，當然右邊的部分就會出現露白現象，但這要如何解決呢?其實方法很簡單，只要加入一段CSS的屬性，就可解決此問題啦!至於怎麼解決此問題，現在就一塊來看看吧!

在DIV中設定寬度與marin:0 auto;是再簡不過的了。
梅問題－解決DIV寬度大於視窗，背景無法延展右邊出現露白的問題

為了讓各位方便看出DIV的區塊範圍，梅干特地加了白框，在正常情況下，父層的背景色會充滿個畫面。
梅問題－解決DIV寬度大於視窗，背景無法延展右邊出現露白的問題

但今天當視窗小於裡面所設定的範圍時，當下方出現捲軸時，再向右時悲劇發生了，右邊會出現一大塊白色。
梅問題－解決DIV寬度大於視窗，背景無法延展右邊出現露白的問題

解決辦法:
接著只要在父層的DIV加入min-width，而那數值要與子層的一樣就可以了。
梅問題－解決DIV寬度大於視窗，背景無法延展右邊出現露白的問題

這時背景就會自動延展開來啦!而設定min-width則是告知，最小寬度是多小，當視窗小於此範圍時，就依照所定的最小寬度來作顯示，如此一來問題就解決啦!
梅問題－解決DIV寬度大於視窗，背景無法延展右邊出現露白的問題

[範例預覽]

　　雖然說現在透過CSS3，可繪製出各式各樣的圖案，但還是免不了有些東西還是得透過圖片才能呈現出來，而為了有經驗的網頁設計師，都知道圖片能小盡量小，且將圖片製作成四方連續的方式來作延展，所以當每次將網頁的版型製作完成時，在images的資料夾中，就會有許多的圖檔，雖然說這些檔案都不大，因此當使用者向伺服請求檔案時，當讀取完畢就釋放了，但各位若平常有在拷貝檔案時，是否會發現到，當把一堆檔案壓成一個壓縮檔時，在傳輸上快許多，因此相同的道理，若將多張切好的圖片拼成一張雖然檔變大，但這樣只需對主機請求一次，相對的速度會快許多，而光想到要將已切好的小圖，再一一的用PS將檔案組成一大張時，是否會感到相當的麻煩，最近梅干發現一個好用的平台，可將多張圖片自動合併成一大張外，還會將每張圖片的位置，產生出CSS碼，讓使用者可快速套用，因此身為網頁設計的你，也趕快來看看囉!

CSS Sprite：

網站名稱：CSS Sprite
網站網址：http://spritegen.website-performance.org/

Step1
首先，將要合併的圖檔，全選並壓縮起來。
梅問題－《CSS Sprite》將佈景中多張圖片合併，提升網站效能

Step2
接著進到「CSS圖片合併產生器」的網站後，先點上方的語系，再點下方的選擇檔案鈕。
梅問題－《CSS Sprite》將佈景中多張圖片合併，提升網站效能

Step3
選擇剛所壓縮好的圖片檔。
梅問題－《CSS Sprite》將佈景中多張圖片合併，提升網站效能

Step4
接著再設定每個圖片的間距，以及合併後要輸出的檔案格式，和CSS輸出的前綴詞，當都設定後，再按下的合併鈕。
梅問題－《CSS Sprite》將佈景中多張圖片合併，提升網站效能

Step5
這時就會將合併好的圖片位置，產生出一連串的CSS碼，方便之後使用就不用位置算半天啦!另外別忘了也將合併好的圖片檔給下載回來喔!
梅問題－《CSS Sprite》將佈景中多張圖片合併，提升網站效能

Step6
當下載回來的圖檔，可看到全部的圖片已合併在一起了，且還是全透明的，是不是超方便的呀!
梅問題－《CSS Sprite》將佈景中多張圖片合併，提升網站效能

　　網頁文字大部分不是齊左、齊右、齊中，而在CSS中還有一個是左右貼齊，這個屬性使用的機會比較少些，原因則在於該屬性只支援IE瀏覽器，甚至用了之後文字的間距就會強制被拉開來，有時在閱讀上不是那麼的方便，所以梅干對於該屬性也沒多加的涉略，而那天早上好友突然問到，怎麼讓文字左右貼齊，並且可支援各家瀏覽器，才讓梅干對這屬性有了更進步的了解，但卻也才知道，原來都是Chrome，在Windows與MAC下，一樣的Chrome版本的瀏覽器，在支援度卻大不同，讓梅干花了點時間，終於搞定了所有的瀏覽器，因此有需要的朋友，直接貼上就可使用啦!至於怎麼作現在就一塊來看看吧!!

放在<head>.....</head>之間：
當要使此屬性時，一定要是一個區塊才可以。

接下來重要的地方來了，當使用中文字時，每個字與字間，要用半形的空白隔開，這樣才能將文字展開，當沒空白時，在Windows下的Chrome瀏覽器會沒有反應。
梅問題－《CSS3 text-justify》文字左右貼齊適用各瀏覽器

這是在MAC平台下的Chrome、Firefox、Safari都能正常的顯示。
梅問題－《CSS3 text-justify》文字左右貼齊適用各瀏覽器

這是在Windows平台下的Chrome、Firefox、IE也能正常的顯示。
梅問題－《CSS3 text-justify》文字左右貼齊適用各瀏覽器

[範例預覽]

　　html5 有 video 標籤可以使用以後，對很多前端設計師來說應該很方便，不特別設定的話就會直接套用瀏覽器內建的control bar，但為了美觀，當然也會去找介面漂亮的外掛比如 video.js 來增加華麗及美觀度，但有時候只要簡單的兩三個按鈕好像不一定要弄的那麼複雜，也省的loading太重，參考了w3c的一些源文件之後，找了最簡單的方式，只要加幾個 html 標籤，以及修改 css 樣式就可以了，對害怕 JS 的設計師來說應該再簡單不過了！

首先在 html 裡面放入 video 標籤，並將影片來源放到 source src 中，注意檔案格式在 type 的地方也要相對應，並注意在 <video> 標籤內不要放入controls，不然會跑出瀏覽器本身內建的播放介面喔！

^?View Code HTML

1 2 3 4 5

<video id="demo" autoplay loop>
	<source src="http://mi-o.me/html_demo/video/big_buck_bunny.mp4" type="video/mp4" />
	<source src="http://mi-o.me/html_demo/video/big_buck_bunny.webm" type="video/webm" />
	<source src="http://mi-o.me/html_demo/video/big_buck_bunny.ogv" type="video/ogg" />
</video>

接著再將下面這些控制按鈕的標籤放到 html 中，button 的 ID 表示按鈕的功能，音量調整的部份使用 volume+=0.5 跟 volume-=0.5，也可以自己調整按一次要增加或降低音量的幅度，接下來就可以設定按鈕樣式囉！

^?View Code HTML

1 2 3 4 5 6 7

<div id="buttonbar">
	<button id="play" onclick="document.getElementById('demo').play()"></button>
	<button id="pause" onclick="document.getElementById('demo').pause()"></button>
	<button id="volumeUp" onclick="document.getElementById('demo').volume+=0.5"></button>
	<button id="volumeDown" onclick="document.getElementById('demo').volume-=0.5"></button>
	<button id="volumeOff" onclick="document.getElementById('demo').volume=0"></button>   
</div>

使用 icon 符號來做為播放按鈕會更漂亮，不要忘記把 awesome 字型下載下來放到你的 css 資料夾中，並且在 html 的 <head> 中引用 css

^?View Code HTML

1	<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet">

接下來定義style樣式

^?View Code CSS

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42

#video-wrap {
	width: 500px;
	position: relative;
}
video {
	width: 100%;
	height: auto;
}
#buttonbar {
	position: absolute;
	bottom: 20px;
	right: 20px;
}
button {
	margin: 5px 0 0;
	border: 0;
	color: #fff;
	background: #f5246d;
	font: .8em FontAwesome;
	cursor: pointer;
	width: 26px;
	text-align: center;
	line-height: 22px;
	border-radius: 100%;
}
#play::before {
	content: "\f04b";
	font-size: .8em;
}
#pause::before {
	content: "\f04c";
	font-size: .8em;
}
#volumeUp::before {
	content: "\f028";
}
#volumeDown::before {
	content: "\f027";
}
#volumeOff::before {
	content: "\f026";
}

就完成囉！

Demo1：

Demo2：

Demo1 | Demo2 | Download

資料參考：
http://www.w3.org/standards/webdesign/audiovideo
video版權：
video版權屬於Big Buck Bunny.創用cc

　　今天在設計網頁時，都會使用CSS來設定版型，好處就是版面靈活好修改，同時完全不用動到HTML的網頁架構，雖然說透過CSS來設計網頁版型，相當的方便，但每當版面有多個區塊組合起來時，就得一一的計算出每個區塊大小，以及每個區塊的間距，才不會造成版型跑位的問題，且當今天若在設計自適應的網頁時，就要算半天，但現在有個更方便的CSS3屬性可用，那就是calc透過這個屬性後，可讓CSS的單位支援加減乘除，如此一來就就不用每次算半天啦!至於怎麼用，現在就一塊來看看吧!!

CSS3-calc：

支援瀏覽器：IE10+、Firefox4+、Chrome19+、Safari6+
支援運算：+ - * /
支援單位：px、em、rem、%
計算單位： 可混用計算

以前當要把div三等分時，就會在width上輸入33.3%，但現在只要在width後方加入calc(100%/3)，這時每個div區塊就會變成33.3%。
梅問題-《CSS3 Calc》讓CSS單位也可用加、減、乘、除

這時可看到每個區塊，就會變成33.3%，若要把區塊5等分時，只要將calc修改成calc(100%/5)，這樣就會變成5等分了。
梅問題-《CSS3 Calc》讓CSS單位也可用加、減、乘、除

calc有趣的是，單位可混用，剛剛是透過百分比將區塊三等分，接著利用像素單位，將每個區塊扣除5px，這時它就會自動作計算，相當的方便。
梅問題-《CSS3 Calc》讓CSS單位也可用加、減、乘、除

這時區塊就會自動變成33%，再扣除5px。
梅問題-《CSS3 Calc》讓CSS單位也可用加、減、乘、除

而calc不只限用於width，只要是數值單位的都可使用，像是margin、padding都可用，因為每個區塊都縮小5px，但中間的間隔只有2個，所以這時就可以用5px乘3再除2，這樣每個間距就是7.5px，完全不用再計算機算半天了。
梅問題-《CSS3 Calc》讓CSS單位也可用加、減、乘、除

像這樣每個區塊間，就會自動的計算出每個區塊的邊界。
梅問題-《CSS3 Calc》讓CSS單位也可用加、減、乘、除

範例預覽

　　現在製作網頁已不像以前那麼單純，只要把畫面切一切，表格套一套就好了，隨著網頁技術不斷的進化，光是CSS也從1.0一直到3.0，所以現在製作網頁，也比以前繁索的許多，有時CSS的碼都比js的還多，但CSS本身不會有除錯的功能，因此當寫完落落長時，有沒有那邊寫錯，也不得而知，所以今天要來分享個好網站，只要將CSS的原始碼貼入，立即就會檢測出，那邊有問題，甚至還會列出行數，與問題描述，方便你進行作修正，因此身為網頁設計的你，也趕快來檢查一下囉!

CSS LINT：

網站名稱：CSS LINT
連結網址：http://csslint.net/

Step1
當進入CSS LINT的網站後，將自己寫好的CSS碼，複製貼到輸入框中，完畢後再按LINT鈕。
梅問題－《CSS LINT》線上網頁CSS樣式檢查器

Step2
接著就會秀出，目前的CSS碼是否有錯誤或警告的，從下方可看到0錯誤與34個警告。
梅問題－《CSS LINT》線上網頁CSS樣式檢查器

Step3
下方就會列出所有警告的清單，包含行數與問題解說。
梅問題－《CSS LINT》線上網頁CSS樣式檢查器

Step4
就可開啟CSS碼一一的來作修正。
梅問題－《CSS LINT》線上網頁CSS樣式檢查器

Step5
當修正完畢後，再把碼貼回檢測一次，就會看到當修正後，就會減少一個啦!
梅問題－《CSS LINT》線上網頁CSS樣式檢查器

　　上周清明連假四天，梅干正好趁著這個放假期間，把樂兔米大改版，除了把頁面改成了自適應外，也加入了一些CSS3的動態效果，讓畫面有些變化，看起來比較活潑些，而有寫過CSS3動畫的朋友都知道，要寫一堆的碼，同時還要設定動畫的時間，光是CSS碼都比javascript還來的多，其實各位看到的這些動畫特效，完全不用寫到任何的CSS的碼，只要把特效類別加入html標籤後，立即就會產生出各種的動態的效果，而這些CSS3的動態效果，其實只是一個套件，且網路上也有不少的相關的資源，而今天要來分享一個，梅干覺得還不錯的CSS3動態效果的特效「CSS3 Animation Cheat Sheet」。

CSS3 Animation Cheat Sheet：

網站名稱：CSS3 Animation Cheat Sheet
網站網址：http://www.justinaguilar.com/animations/
特效清單：
/* ENTRANCES */
slideUp
slideDown
slideLeft
slideRight
slideExpandUp
expandUp
fadeIn
expandOpen
bigEntrance
hatch

/* MISC */
bounce
pulse
floating
tossing
pullUp
pullDown
stretchLeft
stretchRight

Step1
這是CSS3 Animation Cheat Sheet所有的動畫的效果的標籤，因此只要記住這些標籤，就可讓你的網站動起來啦!
梅問題－《CSS3 Animation》CSS3動畫套件讓網站動起來!

Step2
首先，先按右上角的DWONLOAD鈕，將套件下載回來，再把animations.css引用到網頁中。
加到<head>~</head>間：

Step3
當要套用特效時，只要在class後加入特效名稱就可以了。
梅問題－《CSS3 Animation》CSS3動畫套件讓網站動起來!

Step4
這時再開啟網頁後，就會有動態效果啦!是不是超EZ的呀!
梅問題－《CSS3 Animation》CSS3動畫套件讓網站動起來!

[範例預覽] [範例下載]

　　設計師們盼望已久的 CSS 混合圖層功能又往前邁進一步！Compositing 跟 Blending 屬性歷經了三年的草案，終於在 2015/4/26 進入了候選標準，離HTML+CSS可以盡情使用混合模式的日子越來越近了！其實現在就可以用啦，只是目前支援度還太低了，讓我們來看看目前的瀏覽器支援度。整體來說台灣的支援度只有剛剛好超過60%，畢竟IE整個不能看還是差蠻多，且iOS Safari的支援度除了版本外，屬性也還並不是全面支援。 CSS混合模式包含 mix-blend-mode、isolation、background-blend-mode 三種屬性。本篇先來介紹 mix-blend-mode
caniuse_blend 圖層混合

mix-blend-mode 屬性就像 Photoshop 的混合圖層效果一樣，但 Photoshop 的混合圖層有多達27種效果，且有將相似的效果分類集中在一起如下圖，而 CSS 雖不如 Photoshop 的圖層模式這麼多，但 CSS 已經能夠在各種不同的模式中演算出多達 16 種效果，如上圖粉紅色的字。
blend

以下我們將圖片壓在一個粉紅色的背景上來做示範：
mix-blend-mode: normal 一般
為屬性預設的值，沒有被混合只選擇上層圖層的顏色。

mix-blend-mode: multiply 色彩增值
將背景以及來源色彩（上層圖片）的顏色相乘，並替換掉原本的顏色。結果色會至少比來源色或目標色暗。將任何色與黑色相乘則結果為黑色，將任何色與白色相乘則維持原來的顏色。

mix-blend-mode: screen 濾色
將背景以及來源色的補值相乘，得到補色相乘的結果。結果色會至少比背景或來源色還要亮。將任何色與過濾白色則得到白色；將來源色過濾黑色則結果不變。效果近似於將好幾個投影片投影在單一個投影幕上。

mix-blend-mode: overlay 覆蓋
相乘或過濾顏色，取決於背景的顏色值。當來源色過濾背景時保留原本的強光以及陰影，背景顏色並非被取代，而是與來源色混合展現背景的亮部或暗部。

mix-blend-mode: darken 變暗
保留背景以及來源色彩中較暗的色彩。背景會與來源色彩中較暗的顏色混合。

mix-blend-mode: lighten 變亮
保留背景以及來源色彩中較亮的顏色。背景會與來源色彩中較亮的顏色混合。

mix-blend-mode: color-dodge 加亮顏色（減淡）
將背景加亮來展現來源色。如果背景為黑色則不會有任何改變。

mix-blend-mode: color-burn 加深顏色
減低背景色亮度反映出來源色。如果背景為白色則不會有任何改變。

mix-blend-mode: hard-light 實光
將顏色相乘或過濾，取決於來源色的顏色值。效果近似於強烈的聚光燈照在背景圖片上。

mix-blend-mode: soft-light 柔光
將顏色加深或加亮，取決於來源色的顏色值。效果近似於漫射的聚光燈照在背景圖片上。

mix-blend-mode: difference 差異化
用亮色減去兩個來源色中的深色。如果背景為白色則為反轉色，若背景為黑色則不會有任何改變。

mix-blend-mode: exclusion 排除
效果近似於差異化但對比度較低。

mix-blend-mode: hue 色相
用來源色的色相創造出另一個顏色，結合背景原來的飽和度及亮度。

mix-blend-mode: saturation 飽和度
用來源色的飽和度創造出另一個顏色，結合背景原來的飽和度及亮度。如果在背景為灰階（無飽和度）的狀態下則不會有任何效果。

mix-blend-mode: color 顏色
用來源色的色相以及飽和度創造出另一個顏色，結合背景原來的亮度。保留了背景的灰階，且對於單色圖像的色彩化或是圖像的著色很有幫助。

mix-blend-mode: luminosity 明度
用來源色的明度創造出另一個顏色，結合背景原來的色相及飽和度。這與顏色模式的效果正好相反。

混合圖層可以讓設計師在網頁視覺的設計更加活用，比如大標文字或色塊壓在大圖背景上互相疊合後，再加上動態效果就能夠造成與圖層間多樣化的混色效果，就不再只侷限在某些效果只能在 Photoshop 上使用囉！等到之後瀏覽器相容性更高後，設計師們也不妨多多運用 mix-blend-mode 來創造更多漂亮的網站視覺！

ps. mix-blend-mode 值的中文釋義非官方中文翻譯，若有任何問題或錯誤也請不吝提出，謝謝。

參考資料：
http://dev.w3.org/fxtf/compositing-1/
https://css-tricks.com/almanac/properties/m/mix-blend-mode/
https://css-tricks.com/basics-css-blend-modes/

　　前端設計師會常常需要參考一些網站設計來刺激靈感以及參考設計，甚至是提供給案主來做參考，畢竟設計是從模仿開始，看看用一樣的技術為何別人可以做出這麼多不一樣的東西，當然撇除了技術能力有限的情況下，能多去參考其他優秀的作品絕對是前端設計師必須做的事情。　　國外非常多 CSS Awards Website ，相信也很多設計師都非常熟知，在這邊整理一些方便各位參考，若是有完整度很高的作品，這些網站也都是可以投稿的地方，除了對自我能力的肯定以外，也能夠讓更多的人看到自己的優秀作品。

1. AWWWARDS
TOP 10 CSS Awards Website awwwards

2. Best Websites Awards
TOP 10 CSS Awards Website bestwebdesignaward

3. Best Website
TOP 10 CSS Awards Website bestwebsite

4. CSS AWDS
TOP 10 CSS Awards Website cssawds

5. CSS DESIGN AWARDS
TOP 10 CSS Awards Website cssdesignawards

6. CSS DESIGN VAULT
TOP 10 CSS Awards Website cssdesignvault

7. CSS REEL
TOP 10 CSS Awards Website cssreel

8. CSS WINNER
TOP 10 CSS Awards Website cssreel csswinner

9. DiVine CSS
TOP 10 CSS Awards Website divinecss

10. Flat UI
TOP 10 CSS Awards Website flatui

當然如果你真的很想要去這些 CSS Awards Website 投稿卻對英文閱讀感到苦手，這裡也有一個付費網站可以方便各位投稿，集合了非常多受獎網站，你可以從這裡的列表單獨前往投稿，也能夠直接在這個付費網站請他們協助你投稿每一個受獎網站，只需要49塊美金，其實以時間換算也是蠻划算值得參考看看。 CSS Gallery List
TOP 10 CSS Awards Website cssgallerylist

TOP 10 CSS Awards Website cssgallerylist

　　自從CSS3新增了許多新屬性後，讓CSS不再只是單純控制區塊的大小、顏色、靠齊.....等，透過CSS3可製作出各種不同的效果，像是圓角框、陰影、漸層....等，甚至還可透過CSS3製作出動畫與3D特效，大幅的減少圖檔的繪製，除此之外像是滑鼠滑入區塊，不再只是單純的換色、換背景，透過CSS3後，還可增加動態與3D特效，而梅干最近也收集了一些CSS3 Hover特效，讓網頁更有變化，不但有原始檔可下載外，還有詳細的說明文件，且完全無需自己寫，下載後立即就可套用於自己的專案中，因此身為網設的朋友，也趕快來下載囉!

#1 Caption Hover Effects
梅問題－五款「CSS3 hover 特效」大集合

[教學文件] [範例預覽] [範例下載]

#2 Direction-Aware Hover Effect
這一個還蠻有趣的，當滑鼠滑入區塊時，半透明的色塊會在區塊中串來串去。
梅問題－五款「CSS3 hover 特效」大集合

[教學文件] [範例預覽] [範例下載]

#3 Original CSS3 Hover Effects
梅問題－五款「CSS3 hover 特效」大集合

[教學文件] [範例預覽] [範例下載]

#4 CSS3 Hover Effects
梅問題－五款「CSS3 hover 特效」大集合

[教學文件] [範例預覽] [範例下載]

#5 3D Thumbnail Hover Effects
這個還蠻特別的，看起來很像折頁的感覺，但只用到CSS3的3D屬性，就可產生此效果。
梅問題－五款「CSS3 hover 特效」大集合

[教學文件] [範例預覽] [範例下載]

　　現在CSS3功能愈來愈強大，像是大家所熟悉的圓角框、影陰，完全不用繪製任何的圖像，立即就能套用此特效，除此之外先前小米也分享過CSS3的混合模式，其特效就像在Photoshop一樣，可將二張圖片進行融合，完全不用再透過影像軟體，甚至CSS3內建也支援一些濾鏡特效模組，像是飽和度、色相、對比、亮度、模糊.....等特效，完全不用透過Photoshop立即就能將照片套用各種不同的風格特效。　　而網路上也有相關的套件的模組，只要將特效名稱加入指定的區塊中，立即就能將照片套用此風格特效，就像是PS作出來的一樣，因此有了這個CSS Filter濾鏡特效後，免PS！立即就能將照片套用各種不同的風格特效，同時套用也相當的簡單，因此身為網頁設計的你，也趕快來看看囉!

CSS Filter：

網站名稱：filter.css
連結網址：http://simurai.com/filter.css/

Step1
進入css濾鏡特效網站後，上方大約有13種的風格特效可使用，當點上方的特效縮圓，下方的範例照片立即就可預覽套用後的結果。
梅問題－《CSS Filter濾鏡模組》免PS!立即將照片套用不同的色彩風格

Step2
當套用後，下方就會顯示css3相關濾鏡屬性所套用的數值，而這些特效都已整理成套件，所以只要點下方的按鈕，立即可下載此css特效濾鏡。
梅問題－《CSS Filter濾鏡模組》免PS!立即將照片套用不同的色彩風格

Step3
進入GitHub 網站後，點右下的Donwload ZIP鈕，立即可下載此濾鏡模組。
梅問題－《CSS Filter濾鏡模組》免PS!立即將照片套用不同的色彩風格

Step4
接著將網頁向下拉，就會看到套用的方式，而方法也相當的簡單，先將CSS載入到網頁中，再將要套用的特效的div中加入濾鏡名稱，立即就可套用，而所有的濾鏡特效名稱就在下方。
梅問題－《CSS Filter濾鏡模組》免PS!立即將照片套用不同的色彩風格

Step5
下載解壓縮後，就會看到以下的檔案，這時只要將filter.css複製到自己的專案中就可以了。
梅問題－《CSS Filter濾鏡模組》免PS!立即將照片套用不同的色彩風格

Step6
接著就可照片套用各種不同的風格特效啦!效果還蠻不錯的，如此一來就不用再開PS啦!
梅問題－《CSS Filter濾鏡模組》免PS!立即將照片套用不同的色彩風格

　　說到css preprocessor大家可能比較熟悉SASS或LESS，透過SASS或LESS可讓一些重覆的屬性，可透過變數的方式來完成，但要要使用SASS時，則需要安裝RUBY才能執行，而LESS則需要使用note.js，但無論是SASS還是LESS，在撰寫上也較嚴謹，一切都要符合它的邏輯與結構，因此這對於設計人員，則會感到有些棘手，而那天有好友強力的推薦梅干使用Stylus，不但寫法相當的自由與隨性，更棒的是若會寫SASS的朋友，也可在直接使用，因此在寫作上更加的自由，但要如何讓Sublime Text也支援Stylus呢?現在就一塊來看看吧!!

Step1
首先，開啟Sublime Text，接著按Ctrl+Shit+P鍵，再打Install Package。
梅問題－Sublime Text也可寫Stylus

Step2
再輸入Styluss。
梅問題－Sublime Text也可寫Stylus

Step3
這樣就安裝完畢了。
梅問題－Sublime Text也可寫Stylus

Step4
接著開啟新檔案，再點右下角選擇文件格式，就可看到Stylus。
梅問題－Sublime Text也可寫Stylus

Step5
這時就可開始寫Stylus，同時再將它進行儲存。
梅問題－Sublime Text也可寫Stylus

Step6
這時再把Stylus放在Prepros就可自動進行Compiler。
梅問題－Sublime Text也可寫Stylus

Step7
這時只要進行儲存，就會自動將stylus轉成css，同時可看到在stylus中，不但支援所有SASS的寫法外，也可直接在stylus中直接寫css，也可正常的打包與轉成css，因此這對於熟悉css的朋友，相當的方便，完全不用擔心要重新學習，更加的容易上手。
梅問題－Sublime Text也可寫Stylus

Step8
在剛的混寫也可正常的輸出css檔，是不是超隨性的呀!因此若想縮短css的寫作時間，又不想重新學習的朋友，stylus不妨可參考看看。
梅問題－Sublime Text也可寫Stylus

看更多的stylus用法：https://learnboost.github.io/stylus/

梅問題－CSS資源-Can I use?線上快查HTML5/CSS3各屬性的瀏覽器支援度

　　隨著HTML5、CSS3讓設計網頁變得方便，同時在版面規畫上也更加的靈活，甚至也大幅的減少一些圖像繪製，直接透過CSS3就可作出像是圓角框、影陰、光暈、漸層.....等特效，且就連目前各裝置的問題，也可透過CSS3的Media Queries來製作出 Responsive Web Design的自適應網頁，再搭配HTML5的標籤語意，讓網頁在SEO上更有加分的動作，但CSS3所增加的新屬性還真不少。　　雖然都可使用，但並非所有的瀏覽器都支援，因此要如何知道，該屬性的瀏覽器支援度呢?除了透過CSS3的字典外，現在還有更方便且快速的方法，直接透過Can I use這平台線上就查詢出，瀏覽器對此CSS3屬性的支援度如何，以及瀏覽器要那個版本以上才支援，都可在此網站中，一次看清楚，因此下回當要新屬性時，不妨先查查看，再決定是否要使用它。

HTML5/CSS3瀏覽器支援度查詢：

網站名稱：Can I use
網站連結：http://caniuse.com/

Step1
當進入網站後，點一下後方的Settings。
梅問題－CSS資源-Can I use?線上快查HTML5/CSS3各屬性的瀏覽器支援度

Step2
接著在左手邊，就可設定要檢測的瀏覽器的種類，預設的部分是目前主流的瀏覽器。
梅問題－CSS資源-Can I use?線上快查HTML5/CSS3各屬性的瀏覽器支援度

Step3
立馬來測試看看，將要查詢的屬性，直接輸到上方的輸入框中，接著下方立即就會出現瀏覽器的支援狀況，可看到Global的部分已有8成都支援，同時在下方，灰色框中就是各瀏覽器支援的版號。
梅問題－CSS資源-Can I use?線上快查HTML5/CSS3各屬性的瀏覽器支援度

Step4
紅是完全不支援，至於淺綠色的，則需要加入前綴詞以可使用，當點一下立即就會出現所需的前綴詞。
梅問題－CSS資源-Can I use?線上快查HTML5/CSS3各屬性的瀏覽器支援度

Step5
另外再來試試看，常會用的選擇器的屬性，竟然支援度高達到96%，有了這網站後，就可隨時方便查詢css個屬性，在瀏覽器的支援度，因此下回當要用新屬性時，不妨先查查看吧!!
梅問題－CSS資源-Can I use?線上快查HTML5/CSS3各屬性的瀏覽器支援度

　　現在製作網頁愈來愈複了，不再像以前只需透過Photoshop+Dreamwaver，就能快速的將平面轉成網頁，之所以現在會使用Jade、SCSS不外乎就是希望能縮短網頁切版的製作時程，同時也減少重覆性的屬性編寫，與減少畫面跑版，找尋標籤忘了結尾的問題，而透過Jade Html - Templat，正可以解決html標籤開關門的問題，接下來網頁的樣式，就可交給SCSS來幫忙解決，而SCSS是相當適合已經熟悉CSS的網頁設計師來使用，使用上完全沒任何的不適感，同時還能善用SCSS所提供的像是變數、巢狀、函式....等機制，讓在寫CSS時更具結構化，同時要修改時也更加容易，因此對於SCSS感興趣的朋友，也一塊來看看。

SCSS 變數(Variables)：
在SCSS中，當要使用變數時，只要使用$當起頭，後方再放入所要設定的參數值就可以了，這對於設定網站的標準色相當的方便，如此一來就不用每次往返的查詢當初所設定的顏色是什麼。
var.scss

^?View Code SCSS

1 2 3 4 5 6 7 8 9 10

$color1 : #FD1B3F;
$color2 : #F7E02A;
$color3 : #6AC217;
$color4 : #403ED3;
$color5 : #ffffff;
$color6 : #000000;
a{
	background: $color6;
	color:$color5;
}

var.css

^?View Code CSS

1 2 3 4

a {
  background: #0000;
  color: #ffffff;
}

在變數的地方，除了是文字外，也支援數學的運算。
var-1.scss

^?View Code SCSS

1 2 3 4 5

$num:5px;
 
.container{
	margin:$num*2 $num;
}

var-1.css

^?View Code CSS

1 2 3

.container{
	margin:10px 5px;
}

SCSS 巢狀(Nesting)：
巢狀結構算是最常被使用的，透過巢狀式的結構，可清楚的知道元素上下層的關聯性，同時也可減少重覆的編寫開頭。
nessing.scss

^?View Code SCSS

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

.container {
    width: 1170px;
    margin:0 auto;
 
    .post {
        border: solid 1px #ccc;
        padding: 10px;
        .post-info{
	    	background:#eee;
	    	font-size: 12px;
	    	padding: 10px;
	    	p {
	    		color:#333;
	    	}
    	}
    }
}

nessing.css

^?View Code CSS

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

.container {
  width: 1170px;
  margin: 0 auto;
}
 
.container .post {
  border: solid 1px #ccc;
  padding: 10px;
}
 
.container .post .post-info {
  background: #eee;
  font-size: 12px;
  padding: 10px;
}
 
.container .post .post-info p {
  color: #333;
}

SCSS 函式(Mixins)：
函式的部分，可將一些重覆性的屬性給行寫好，像是CSS3的動畫，或是一些CSS3的新屬性，前方需加前綴詞的部分，就可透過函式來完成，同時函式本身還具備參數的機制，因此也可入參數，使用上就更加靈活。
mixins.scss

^?View Code SCSS

1 2 3 4 5 6 7 8 9 10

@mixin css3-transition() {
	transition: width 2s;
	-moz-transition: width 2s;
	-webkit-transition: width 2s; 
	-o-transition: width 2s;
}
 
.post {
    @include css3-transition();
}

mixins.css

^?View Code CSS

1 2 3 4 5 6

.post {
	transition: width 2s;
	-moz-transition: width 2s;
	-webkit-transition: width 2s; 
	-o-transition: width 2s;
}

而也可透過參數的方式，來設定函式裡面的設定值。
mixins-1.scss

^?View Code SCSS

1 2 3 4 5 6 7 8 9 10

@mixin css3-transition($i) {
	transition: width $i;
	-moz-transition: width $i;
	-webkit-transition: width $i; 
	-o-transition: width $i;
}
 
.post {
    @include css3-transition(5s);
}

mixins-1.css

^?View Code CSS

1 2 3 4 5 6

.post {
	transition: width 5s;
	-moz-transition: width 5s;
	-webkit-transition: width 5s; 
	-o-transition: width 5s;
}

SCSS 繼承(Extend)：
繼承聽起來很複雜，其實簡單的來說，就是CSS中的群組，可將共用到的放在一起，而寫法也相當的簡單。
extend.scss

^?View Code SCSS

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

body {
  margin:0
  padding: 0;
  color: #333;
}
 
h1 {
  @extend body;
  font-size:30px;
}
 
h2 {
  @extend body;
  font-size:24px;
}
 
p {
  @extend body;
  font-size:15px;
 }

extend.css

^?View Code CSS

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

body, h1, h2, p {
  margin:0;
  padding: 0;
  color: #333;
}
 
h1 {
  font-size:30px;
}
 
h2 {
  font-size:24px;
}
 
p {
  font-size:15px;
}

　　以上這五個是最常被使用到，當然SCSS也具備一些像for迴圈與if判斷式，這邊梅干就不多作介紹，而工具是要提升工作效能，因此對於for迴圈與if判斷有興趣的朋友，可再自行研究，而這五大類，就足以解決版型樣式設定上的大大小小需求，同時在SCSS中，若這五大類都不需使用時，也可直接寫CSS也是可以的，同時不會出現任何的錯誤，這有別於SASS，因此梅干才說SCSS相當適合網頁設計師來使用，因此還在觀望的朋友，不妨有空也可使用看看喔!

梅問題－SCSS教學-透過SCSS輕易設計出如Bootstrap的Grid System網格系統

　　先前曾分享過SCSS的基本用法，應該可感受到SCSS所帶來的便利性，以及寫法上與CSS差不多，但支援性變得更多，因此只要善用這些基本的語法，就能套用在任何的專案上，同時讓CSS更具結構化，同時也可減少一些重覆性的編寫，除此之外透過這些用法，也能設計出如Bootstrap的Grid System網格系統，且寫法也相當的簡單，因此梅干就簡單的運用SCSS來設計出像Bootstrap的網格系統，甚至也可自行修改符合自己所需的網格數或間距，因此對於RWD網格系統感興趣的朋友，也一塊來看看囉!

這邊梅干也仿照了Bootstrap，將畫面分割成12欄，同時html所用的前綴詞也與Bootstrap一樣，像是col-xs-*、col-sm-*、col-md-*、col-lg-*，且在解析的判斷，也用了三組，分別從768、992、1200像素等，因此可以說是一個相當簡易版Bootstrap的網格系統。

這時當視窗解析不同時，版面也會自動的調整啦!同時透過過上方的code，應該可感覺到，其實自行開發網格系統，一點也不困難，所以各位也可透過SCSS設計出符合自己所需的網格系統來啦!
梅問題－SCSS教學-透過SCSS輕易設計出如Bootstrap的Grid System網格系統

CSS3-calc：

支援瀏覽器：IE10+、Firefox4+、Chrome19+、Safari6+
支援運算：+ - * /
支援單位：px、em、rem、%
計算單位： 可混用計算

這時區塊就會自動變成33%，再扣除5px。
梅問題-《CSS3 Calc》讓CSS單位也可用加、減、乘、除

像這樣每個區塊間，就會自動的計算出每個區塊的邊界。
梅問題-《CSS3 Calc》讓CSS單位也可用加、減、乘、除

範例預覽

　　透過CSS可以控制網頁版型的樣式與格式，甚至也可設定文字的大小、色彩與字距.....等，但到底文字的字級要多大比較好，甚至字距要多寬比較恰當，讓使用者閱讀起來比較舒服，每次改完後，得先儲存瀏覽，才能看到結果畫面，到底是否恰當，而最近梅干發現一個超好用的線上平台，立即就調整立即顯示，目前網頁的字級與字距，甚至還可設定頁寬，如此一來就能快速的設定出，一個舒服合適的網頁文字的字級與字距啦!

GRIDLOVER

網站名稱：GRIDLOVER
網站連結：http://www.gridlover.net/try

Step1
進入網站後，先點上方的HTML，將原來的假字，換成中文，由於中文字比較複雜，因此等下在調整上會比較不會有落差。
梅問題－Gridover線上CSS設定文字大小、行高、邊距

Step2
當輸入完畢後，回到原來的畫面，接著透過上方的控制把，可即時的設定文字的大小、行距、字距。
梅問題－Gridover線上CSS設定文字大小、行高、邊距

Step3
甚至也可改變文字的單位，像是常用的px、em、rem。
梅問題－Gridover線上CSS設定文字大小、行高、邊距

Step4
除了上方可設定文字的樣式外，在右邊的欄位中，也是用拖拉的方式，來調整頁面的設定。
梅問題－Gridover線上CSS設定文字大小、行高、邊距

Step5
都設定好後，再點上方的PREVIEW鈕，就可即時的預覽所設定的文字樣式，是否閱讀起來感到舒服。
梅問題－Gridover線上CSS設定文字大小、行高、邊距

Step6
當確認沒問題後，就可把右邊的CSS樣的碼複製，並貼回自己專案的網頁中啦!
梅問題－Gridover線上CSS設定文字大小、行高、邊距

　　CSS3新增許多方便的屬性，像是之前與大家分享的calc，讓在CSS下也能加、減、乘、除，同時支援不同單位的運算，相當的方便，最近CSS3又新增了變數的屬性，讓在CSS中也能像平常在寫SASS或LESS一樣，將重覆的參數，直接用一個名稱代替，比方像常遇到的色碼，當今天將版型設計好後，一旦有一個區塊的色碼要修改時，那就相當的累人，得將用到的色碼，全部給替換掉，但現在有了這變數的功能後，當下回要修改色碼時，只要改一個值，立即全部的套用的色碼，就會變成新的，相當的方便，而目前除了IE外，其它瀏覽器皆支援，也可正常的運作，而這麼好用的變數功能，要如何使用呢?現在就一塊來看看吧!!

Step1
使用方法相當的簡單，只要--變數名稱，後方就是變數的值，這邊梅干分別建立了三組色彩的變數，分別為color1~clor3，這名稱可以任意設定。
梅問題－CSS3教學－CSS3新增自訂變數屬性的功能

Step2
設定好後，當要使用時，只要var()並在括弧間，加入剛所設定的變數名稱，就可將設定好的變數給套用進去啦!
梅問題－CSS3教學－CSS3新增自訂變數屬性的功能

Step3
當套用後，區塊就會變成指定的顏色，同時支援Chrome、Firefox、Safari，至於IE目前依然是不支援的。
梅問題－CSS3教學－CSS3新增自訂變數屬性的功能

　　現在在設計網頁時，已經捨棄用table排版而改用DIV，再搭配CSS的樣式設定後，就可設計靈活的版型，甚至搭CSS3後，還可設計出RWD響應式網頁，雖然說透過div排版很方便，但當div區塊中再包個div、img或一串文字時，要把區塊中的元素水平與垂直居中時，則會發現到在設定上相當的麻煩，不像table來的那麼簡易，但現在只要透過CSS3中的fle屬性後，就可讓div區塊中的元素水平與垂直居中，比起用CSS2來的方便許多，因此有需要垂直居中的朋友，現在也一塊來看看吧!!

#html

<div class="container">
  <div class="content">CSS3區塊垂直居中梅問題</div>
</div>

#css

.container{
    width: 50%;
    height: 500px;
    background: #FF5B27;
    display: flex; /*顯示模式設為flex*/
}

.content{
    width: 250px;
    height: 80px;
    background: #fff;
    margin: auto;/*當在flex下，設為auto時，就會垂直與水平居中*/
    display:flex;
    align-items:center; /*文字水平居中*/
    justify-content:center;/*文字垂直居中*/
}

#預覽
這時除了區塊居中外，就連區塊內的文字也會跟著一起居中。梅問題－CSS3教學-利用CSS3中的Flex屬性，讓區塊垂直水平居中

#圖片居中
這時當圖片要居中時，只需把文字改成圖片即可。

#html

<div class="container">
  <div class="content"><img src='img.jpg'></div>
</div>

#預覽

[範例預覽] [範例下載]

　　先前曾透過百分比，來將Bootstrap的廣告輪播系統變成全螢幕，但這時圖片就會依照比例，等比的將圖片放到滿版，這時當螢幕的比例與圖片不符時，就會發現到，廣告輪播的切換鈕跑到下方去，同時還會出現捲軸，因此這時若要解決此問題，就只能透過jQuery來計算當前螢幕的顯示比例，再去縮放圖片，但現在有更簡單的方法啦!透過CSS3的新單位vh與vw，就可完成全螢幕啦!而vh與vw到底是什麼單位呢?現在就一塊來了解吧!

CSS3新單位vw：
vw：view width指的是螢幕可視範圍寬度百分比，用法與%相當雷同，當設為10表示為可視範圍10%的意思。
梅問題－CSS3的新單位vh/vw，讓Bootstrap廣告輪播也可全螢幕