捐血一袋救人一命

江蘇拙政園

江蘇 拙政園

全家福

日本 和歌山城

賞楓之旅

千燈 夕照

水鄉千燈

蘆洲 微風運河

破曉時分

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/

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 參數:

2015-08-28_150746

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 的。

2015年8月25日 星期二

網頁 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 就可以達到這種動態的效果。

網頁 Menu 增加 Icon 圖片的方法

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

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

image

 

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

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

結果如下圖,Sample

image

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