-
-
Save Rplus/7671448 to your computer and use it in GitHub Desktop.
漸層 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
- RegExp
-
debug tools
-
useful pattern
- http://stackoverflow.com/a/1159389
regexp convert uppercase/lowercase
- http://stackoverflow.com/a/1159389
-
- 偵測 mobile by js
http://detectmobilebrowsers.com/
- 轉成 base64 可以餵 data
http://www.motobit.com/util/base64-decoder-encoder.asp
-
將 gif 轉成 video 的線上服務
可大量壓縮圖檔大小!! 很讚! http://gfycat.com/about -
PNG lossless optimize
-
css selector support table
http://www.quirksmode.org/css/selectors/ -
web-browser new-tech support serach
-
查字碼 uni-code / html-code
基本上太特殊的字元在使用上還是有其風險,保險還是 custom font -
上傳字型轉成個種網頁用字型格式 (woff, svg, ttf)
http://www.fontsquirrel.com/tools/webfont-generator -
simple list
http://www.crossbrowserbook.com/Knowledge
-
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">
-
Responsive font-weight
http://useiconic.com/concepts/responsive/ -
icon font:
-
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)
Javascript Chart Libraries
http://blog.webkid.io/javascript-chart-libraries/
quick overview about open source javascript chart libraries (mostly D3 based)
以 Firefox 開發者工具在 GitHub 上除錯 fetch()
http://blog.mozilla.com.tw/posts/7293/devtool-github-fetch
video
未讀
http://www.oxxostudio.tw/
認真在寫前端技術文的部落格
http://www.myscriptfont.com/
客製化手寫字型服務
contenteditable detect snippet
via: http://stackoverflow.com/a/18316972/3893926
主要修正 Chrome 支援 rich-text 輸入方式
在一些需純文字區塊會有 copy & paste 卻帶有 style 的狀況
var isSupportsPlaintextEditable = (function () {
var div = document.createElement('div');
div.setAttribute('contenteditable', 'PLAINTEXT-ONLY');
return div.contentEditable === 'plaintext-only';
})();
console.log(isSupportsPlaintextEditable);
http://howtocenterincss.com/
各式 center 方式
- asda
- asdasd
http://navnav.co/
很多選單的 demo
layout
https://cssanimation.rocks/
css animation news & cool sample