網頁載入圖片技巧

以前網頁需要一堆 Icon、Logo、甚至是美美的邊框圖片等等，需要設計很多圖檔，然後在網頁中一一使用 img 標籤來載入圖檔。

現在您可以把這一大堆 Icon、Logo圖檔，全部存成一張圖，再利用 CSS background image 來設定哪個標籤需要圖檔中的哪一個部份。

這樣的好處是，大量減少 http request

而且可以很容易的用程式去控制要去讀哪個區塊的圖片

CSS Sprite Generator

1. http://spritepad.wearekiss.com/
2. https://www.image-maps.com/
3. http://spritepad.wearekiss.com/
4. http://www.spritecow.com/
5. http://spritegen.website-performance.org/

Border Image Generator

1. https://developer.mozilla.org/en-US/docs/Web/CSS/Tools/Border-image_generator
2. http://border-image.com/#%7B%22src%22%3A%22http%3A%2F%2Fwww.w3.org%2FTR%2Fcss3-background%2Fborder.png%22%2C%22linkBorder%22%3Atrue%2C%22borderWidth%22%3A%5B0%2C0%2C0%2C0%5D%2C%22imageOffset%22%3A%5B27%2C27%2C27%2C27%5D%2C%22fill%22%3Atrue%2C%22setRepat%22%3Afalse%2C%22repeat%22%3A%5B%22repeat%22%2C%22repeat%22%5D%2C%22scaleFactor%22%3A3%2C%22setRepeat%22%3Atrue%7D

Button Generator

1. https://css-tricks.com/examples/ButtonMaker/
2. http://www.cssbutton.me/
3. http://livetools.uiparade.com/button-builder.html
4. http://button.csscook.com/
5. http://dryicons.com/demos/css3-linear-gradient-buttons-generator/
6. http://cssgradientbutton.com/
7. http://css3buttongenerator.com/
8. http://www.bestcssbuttongenerator.com/
9. http://www.cssbuttongenerator.com/

Menu Generator

1. http://cssmenumaker.com/
2. http://www.cssmenubuilder.com/home
3. http://www.cssportal.com/css-menu-generator/
4. http://css3menu.com/
5. http://www.menucool.com/drop-down-menu
6. http://purecssmenu.com/
7. http://onlinehtmltools.com/menu-generator/
8. http://www.izzymenu.com/

Read More

CSS div 切版的問題

網頁設計中，會經常用到 div 來切版面。

在設計新手經常會無法理解，為什麼版塊會跳行、超出，永遠不如自己想像的那樣。

所以要理解 Box Model。

在W3C 定義的 Box Model ，它的寬度(width)及高度(height)，是不包含邊框線寬度(border)，也不包含留白(padding)的部份，只有內容的部份。

也就是說，利用 div 劃分出來的版面，實際寬度 = maring + border + padding + width。

同理，實際高度 = margin + border + padding + height。

所以如下的設定，預設會造成版塊跳行。

新手會很困擾，為什麼外框 100%，內框是兩個 50%，加起來不是超出版面寬度，出現捲軸，破壞畫面，再不然就是內框跳到下一行，同樣也是破壞了版面。

會以為一定要用 Javascript 去計算寬高，自行來指定寬高點數。

其實不需要這麼麻煩，只要指定 CSS 的參數：box-sizing 即可。

下圖來解釋 box-sizing 參數：

box-sizing:content-box → width 及  height 是指橘色方塊的寬度及高度

box-sizing:padding-box →指黃色方塊的寬度及高度

box-sizing:border-box →指淡綠色方塊的寬度及高度

預設是用 content-box。

當你指定 box-sizing:border-box時，它包括 border + padding + content

當你指定 box-sizing:padding-box時，它只有 padding + content

所以要注意了，如果有指定 margin，就會造成版塊超出預想的寬高，box-sizing 也救不了。

如果一定要用 margin，可以利用 calc() 來計算 width / height。

在 IE 5.5 ，width & height 是包含 border & padding 的。

Read More

網頁 Menu 文字變色及換圖

說穿了很簡單，就是定義 a:hover 等相關 CSS 設定

設定超連結預設的樣式

a:link { color:#0000ff;                // 超連結文字的顏色 text-decoration:none;   // 不顯示超連結的底線 }

設定點擊(訪問)過的超連結樣式

a:visited { color:#0000ff;                // 超連結文字的顏色 text-decoration:none;   // 不顯示超連結的底線 }

設定當滑鼠游標指到超連結時的樣式，只要指定與 a 或 a:link 不同的 background image 就可以做到變換影像的效果

a:hover{ color:#ff0000;                // 滑鼠指到超連結時，文字變化的顏色 text-decoration:none;   // 不顯示超連結的底線 background:url(another_image_full_path.jpg); background-repeat:no-repeat; background-size:16px 16px; background-position:0px center; padding-left: 20px; }

設定當點擊超連結(滑鼠左鍵沒放開)時的樣式

a:active { color:#ff00ff;                // 超連結文字的顏色 text-decoration:none;   // 不顯示超連結的底線 }

不用 CSS 時，用 Javascript 也能做到，不過使用 CSS 之後，不用任何 Coding 就可以達到這種動態的效果。

Read More

網頁 Menu 增加 Icon 圖片的方法

設計網頁的 Menu 通常都是使用 <ul><li> 標籤來達成最方便，不需要太多的 Coding.

連結的部份就是用 <a> 來達成，不過影像的部份如果使用 <img> 標籤，會造成無法控制影像及超連結文字的對齊，畫面就會醜醜的。(如下圖，Sample)

 

所以要使用圖片，得利用 CSS 定義 <a> 的背景圖

background:url(圖片路徑檔名); background-repeat: no-repeat; background-size: Npx Mpx;            // 指定圖片縮放寬高，如果你的影像圖檔大小已經先處理好，這就可以省略 background-position:0px center;  // 0px 指圖片起始水平位置，center 指圖片與文字垂直對齊 padding-left: 20px;                           // 調整文字與圖片距離(含圖片寬度)

結果如下圖，Sample

最好還是事先把圖檔大小處理好，會比較省事，而且也節省傳輸頻寬，就算考慮到縮放，圖檔也不需要太大，因為 Menu Icon 本身不會需要太大。

Read More