Rplus/CSS preprocessor.md

## CSS preprocessor.md

      
    Raw
  

              CSS preprocessor.md
            
          
    http://csspre.com/

  
## css.md

      
    Raw
  

              css.md
            
          
    漸層 bgi

background-image linear-gradient


Ultimate CSS Gradient Generator

http://www.colorzilla.com/gradient-editor/

可上傳圖自動擷色
output scss
input css


visual.css.tools

http://www.visualcsstools.com/

output svg(base64) + canvas
input css


讓CSS正確顯示中文字體
http://benlibra.blogspot.tw/2011/04/css.html
escape('微軟正黑體').replace(/%u/g, '\\');
=> "\5FAE\8EDF\6B63\9ED1\9AD4"

multiline ellipsis
http://zetajames.wordpress.com/2012/02/13/text-overflow/
text-overflow: ellipsis; at multi-line
{
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 6; /* 第六行要顯示點點點 */
  -webkit-box-orient: vertical;
}
Learn CSS Positioning in Ten Steps
(en) http://www.barelyfitz.com/screencast/html-training/css/positioning/
(zh) http://www.see-design.com.tw/i/css_position.html

  
## html.md

      
    Raw
  

              html.md
            
          
    <select>
  <option disabled selected style="display: none;">請選擇</option>
  <option value="xxx">第一項</option>
</select>
效果: 預設會 selected 到第一項

disabled: 但點開後第一項便會被略過無法選取
display: none;: 下拉選單中該項隱藏

適合需要提示用的 select

  
## JS.md

      
    Raw
  

              JS.md
            
          
RegExp


debug tools

https://www.debuggex.com/
https://www.regex101.com/
http://www.regexper.com/
http://jex.im/regulex/
http://regexr.com/


useful pattern

http://stackoverflow.com/a/1159389

regexp convert uppercase/lowercase


## mobile.md

      
    Raw
  

              mobile.md
            
          
偵測 mobile by js

http://detectmobilebrowsers.com/


## other.md

      
    Raw
  

              other.md
            
          
轉成 base64 可以餵 data

http://www.motobit.com/util/base64-decoder-encoder.asp


## Pic.md

      
    Raw
  

              Pic.md
            
          
將 gif 轉成 video 的線上服務

可大量壓縮圖檔大小!! 很讚!
http://gfycat.com/about


PNG lossless optimize

https://kraken.io/
http://www.smushit.com/ysmush.it/


## ref tables.md

      
    Raw
  

              ref tables.md
            
          
css selector support table

http://www.quirksmode.org/css/selectors/


web-browser new-tech support serach

http://caniuse.com/
http://html5please.com/


查字碼 uni-code / html-code

基本上太特殊的字元在使用上還是有其風險，保險還是 custom font

http://unicode-table.com/en/
http://www.amp-what.com/unicode/search/arrowhead


上傳字型轉成個種網頁用字型格式 (woff, svg, ttf)

http://www.fontsquirrel.com/tools/webfont-generator


simple list

http://www.crossbrowserbook.com/Knowledge


## SVG.md

      
    Raw
  

              SVG.md
            
          
http://codepen.io/beyondSimple/pen/stDzB

use keyframes to control svg path


replace svg with #link,

ref: SVG a element
<a xlink:link="//google.com" xlink:show="replace">


## webfont.md

      
    Raw
  

              webfont.md
            
          
Responsive font-weight

http://useiconic.com/concepts/responsive/


icon font:

http://www.iconfont.cn/
http://fontello.com/
http://icomoon.io/#preview-free
http://fontawesome.io/


## 神奇範例.md

      
    Raw
  

              神奇範例.md
            
          
Pure CSS Parallax Scrolling

http://codepen.io/keithclark/details/JycFw

(transform + 3D ;perspective: 1px)


Pure CSS Slider
http://rawgithub.com/drygiel/csslider/master/examples/dark.html

(label + input)