可點選QR code
ARTICLE
1
用css讓div垂直置中的方式
在網頁排版上，要讓div垂直置中是經常遇到的問題，這裡介紹幾個常見的解決方式。
1.line-height
這是初學者一開始會學到的方法，雖然相當簡單，但僅適用於單行文字排版，兩行以上的話行距會變大。
範例：
See the Pen wEwqWb by Ya (@bok770) on CodePen.
2.偽元素(before，after)+ display:inline-block
此方法可適用於單行或多行文字，以及區塊置中
缺點是需多寫一行css（偽元素）
範例：
See the Pen dqbzpe by Ya (@bok770) on CodePen.
3.display:table+table-cell
在最外層寫一個偽table，也就是display:table，然後在要垂直置中的區塊，加上display:table-cell以及vertical-align: middle
範例：
See the Pen bxbrgX by Ya (@bok770) on CodePen.
4.Flexbox
最方便彈性的方法，可以讓區塊內容自適應外面的容器，只要在最外層寫上
display:flex、align-items:center;(垂直置中) 、justify-content:center;(水平置中)即可
關於Flexbox的排版詳細可見CSS3的flexbox版面配置－flex container(容器)可用的屬性
範例：
See the Pen OoLjmY by Ya (@bok770) on CodePen.
ARTICLE
2
用css修改input placeholder的文字樣式
placeholder為input輸入框的預設文字，默認樣式為灰色字，但可以透過css來美化，
不過若只寫以下的css會發現沒有作用
input[placeholder], [placeholder], *[placeholder]
{
color:blue;
}
必須針對不同的瀏覽器做不同的設定。一些基本的樣式都可以套用在placeholder上，例如：字型、顏色、大小等等。
Webkit瀏覽器(如：chrome、Safari等等)
::-webkit-input-placeholder
Firefox 4-18瀏覽器
:-moz-placeholder
Firefox 19+瀏覽器
::-moz-placeholder
IE10瀏覽器
要注意的是IE9以下不支援
範例：
See the Pen KBRqvN by Ya (@bok770) on CodePen.
ARTICLE
3
將 Facebook 粉絲專頁嵌入至網頁
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = 'https://connect.facebook.net/zh_TW/sdk.js#xfbml=1&version=v3.1';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
在網頁設計上，可能需要將Facebook粉絲專頁的貼文內嵌至網頁內，而Facebook官方本身就有提供這方面的嵌入設定，就算對網頁不熟悉也可以輕鬆操作。
Facebook 嵌入粉絲團的設定頁：https://developers.facebook.com/docs/plugins/page-plugin
在頁面上可以看到許多的設定項目，而且可以隨時預覽呈現的方式。
首先貼上粉絲專頁的網址，寬度與高度的單位為像素，只要填入數字即可，下方的勾選項目可依據自身需求勾選。
確定好沒問題之後點選「取得原始碼」，會跳出兩種原始碼，分別為JavaScript SDK和iframe
其中iframe頁籤較為單純直接，只要複製貼上於網頁中要顯示的位置即可。缺點是必須設定寬度和高度，無法自動適應寬度變化，不支援RWD
而JavaScript SDK插入方式有兩段原始碼，第一段需插在<body>之後，第二段原始碼之前。而第二段則是跟iframe一樣，插入在要實際顯示的位置。
一般較推薦使用JavaScript SDK，只要設定時不指定寬度，且勾選「搭配外掛程式容器寬度」，插入的粉絲專頁即可在180~500pixel的範圍內自動縮放。
範例：
一化網頁設計
ARTICLE
4
用CSS讓過長文字自動以「…」呈現
在網頁設計上，為了讓版面更整齊，時常需要讓文字限制在固定尺寸的區塊內，
當文字超過設定的框架時會自動顯示「…」的刪節號。而使用CSS便可以達到這個效果。
方法便是在文字區塊內加上text-overflow: ellipsis; 、white-space: nowrap; 及 overflow:hidden;
如下範例：
See the Pen pZRmMy by Ya (@bok770) on CodePen.
然而可以發現的是，如此一來僅能顯示單行文字，若是需要顯示多行文字的話便不實用了。
不過CSS還有另一項新的屬性：-webkit-line-clamp，不僅可顯示多行文字，還可以控制要顯示的行數，超出的部分一樣會顯示「…」的符號。用法為設定要顯示的行數，例如要顯示三行便設定-webkit-line-clamp: 3
要配合的屬性包含：
display: -webkit-box;以及 -webkit-box-orient: vertical; text-overflow:hidden;
範例：
See the Pen pZRXJb by Ya (@bok770) on CodePen.
缺點是此項屬性兼容性不佳，目前僅支援有webkit的瀏覽器，如：chrome、Safari、Opera，並不支援IE和firefox。
ARTICLE
5
用CSS畫出三角形圖案
以前在網頁裡加上三角形需使用圖片方式加入，
然而現在可以直接用CSS設計出想要的三角形了，而且語法相當簡潔。
主要會用到的就是邊框（border）概念，
一個元素會有四個邊框，每個邊框之間會呈現45度角，
於是利用這項特性，讓其中一個邊框消失，對稱的兩邊用相同的顏色，
如此一來就可以形成三角形了。
See the Pen PBZmWb by Ya (@bok770) on CodePen.
範例：
See the Pen oMbWXr by Ya (@bok770) on CodePen.
ARTICLE
6
CSS的overflow屬性─控制頁面捲軸效果
在網頁設計上，若是希望圖片或文字呈現在一定的範圍內的話，便可以透過CSS的overflow屬性，讓文字與圖片排在固定的範圍內，若超出設定的範圍，會自動變成捲軸的形式，有助於控制版面的編排。
設定值如下：
overflow: auto－自動使用捲軸，當文字超出範圍時才會出現捲軸
See the Pen pZJpbr by Ya (@bok770) on CodePen.
overflow:visible－文字或圖片會直接超出範圍，不使用捲軸。
See the Pen xJGpEy by Ya (@bok770) on CodePen.
overflow:hidden－自動隱藏超出的文字或圖片。
See the Pen yqNpVz by Ya (@bok770) on CodePen.
overflow:scroll－不管文字有無超出範圍都會自動產生捲軸
See the Pen RBPxKw by Ya (@bok770) on CodePen.
overflow:inherit－繼承父元素
See the Pen JBdMEw by Ya (@bok770) on CodePen.
ARTICLE
7
Superslide.js－只需一個插件即可呈現網頁大部分的特效
一個網站設計上使用數個特效是常態，然而要根據不同的特效分別插入不同的插件，可能會稍嫌累贅，而且有時還會發生插件之間衝突的情況。而這次介紹的jQuery .superSlide.js，是將網頁上常見的特效都統一歸到同一支js裡，常見的大圖輪播、頁籤切換、圖片滾動等特效，都可以直接用這支js實現！讓你不用特別為每個特效分別搜尋所需的插件，也不用擔心數個插件有代碼衝突的問題，相當方便管理。
首先到官網下載套件：http://www.superslide2.com/
「基礎效果」頁面有特效的範例和常用參數的設定
http://www.superslide2.com/demo.html
可以直接在該頁面選擇數值，預覽呈現的效果。
如下圖為頁籤切換的特效，右邊列有效果(fade)、觸發方式(trigger)、效果速度(delayTime)等的參數設定，可以依自己的需求做設定
而隨著設定值的不同，下方當前調用代碼的寫法也會不同，可以直接複製到自己的專案裡。
「查看參數」頁面可以一覽Superslide可以設定的參數
http://www.superslide2.com/param.html
ARTICLE
8
使用css製作滑鼠移入圖片的放大效果
當滑鼠移到圖片上會有放大的效果，這在網頁設計上是很常見的，而這效果用CSS就可以做出來了唷！
transform可以設定圖片放大的倍率，
transition可以做出圖片緩慢放大的效果，
而滑鼠移入所產生的變化要用:hover來實現。
外面的框設定overflow:hidden是為了隱藏在圖片放大時超出的部分，
transform: scale(1.1)為圖片放大的倍率
transition:all 0.5s ease 0s為圖片放大所需的時間和特效
範例：
See the Pen gKQjOy by Ya (@bok770) on CodePen.
ARTICLE
9
text-shadow－CSS的文字陰影
就像CSS的box-shadow可以幫區塊加上陰影一樣，CSS也有能用來幫文字上陰影的屬性－text-shadow。
可設定值如下：
text-shadow: h-shadow v-shadow blur spread color;
h-shadow：水平位移距離
v-shadow：垂直位移距離
blur：模糊半徑
spread：擴散距離
color：顏色
範例：
See the Pen gKoYLe by Ya (@bok770) on CodePen.
也可以運用此屬性達成以下效果：
光暈效果，只要將前兩個值(h-shadow、v-shadow)設為0即可。若要加強效果可多寫幾次。
See the Pen qKpWmR by Ya (@bok770) on CodePen.
文字輪廓
若有四個陰影，能夠為文字加一層輪廓。不過還可以用CSS另一個屬性text-stroke來呈現。
See the Pen NzXKyJ by Ya (@bok770) on CodePen.
ARTICLE
10
多組圖片輪播套件──slick.js
之前的文章Flexslider－－方便好用的圖片輪播、滑動切換套件介紹了Flexslider此套件，主要是以一張張圖片作輪播，而這次我們介紹另一套可以多組圖片輪播切換的套件，可應用於更多張圖片的展示。
此套件必須包含slick.js、jquery.min.js、slick.css、slick-theme.css這些檔案
可於slick官網下載，官網上更是陳列了許多項不同的輪播樣式，附上原始碼可以複製貼上。
詳細使用步驟如下：
首先到官網，點擊上方的「get it now」
頁面會滑到該對應位置，點擊「Download Now」即可下載壓縮檔，或是選擇直接複製外連網站的連結。
官網上展示了許多樣式，提供下方的原始碼複製貼上。
解壓後的檔案，只要點進名稱為「slick」的資料夾即可找到需要的js和css檔了唷！放進自己的專案裡，依據自身需求修改檔案路徑和設定即可套用了。
