捐血一袋救人一命

2015年8月28日 星期五

網頁載入圖片技巧

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

反應:

0 意見: