網頁載入圖片技巧

以前網頁需要一堆 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/