栅格系统（Grid System）的辅助工具不少，而那些工具多数让人填栏宽，间距，栏数这些。但是我在实际应用栅格系统的时候，是知道页宽并估计 12 栏会比较适合，虽然有公式去计算，都会觉得麻烦。 为什么就没有这么一个工具：输入页宽和分栏数，自动计算出所有可能的情况呢？因为不会有半个像素的情况，精准到像素的话，还是可能有几种情况的，还夹杂一些不实际的情况。那么根据具体效果去选择，会比埋头计算然后看效果要方便得多。 于是做了这个 webapp：Grid System Calculator 参考了 Bootstrap 和 960 Grid System 两种 CSS 实现方案，感觉更加倾向于 Bootstrap 的方案，于是参照其做法，用于生成显示效果。 为了方便 Bootstrap 的用户，以其参数配置方式输出具体参数。也提供了基于 960 Grid System 的 CSS 下载服务链接（引用 grids.heroku.com 的服务）。 这个 栅格系统计算器 采用 MIT…
Bootstrap 里的 grid system 里面 (源代码) 有这么一段， [class*="span"] { float: left; margin-left: @gridGutterWidth; } 用 RECESS 去跑会看到提示：Universal selectors should be avoided。这个既可以说是 selector 的问题，也可以说是 RECESS 的问题，但可以在运行的时候加个参数忽略掉。 自己去写扩展时也会写到类似的规则，比如需要兼容某浏览器，如果不这样写，就会需要像 Bootstrap-IE6 那样写
从 v1.4 开始使用 Bootstrap，从此（内部）项目的 UI 告别了自制样式的时代，风格清新而且使用简便，是目前见过最好使的 CSS 框架。对于哪个妙句 “Build for and by nerds”，我都不知道说什么好了。如果想自定义样式，对于了解 LESS 的是非常容易的，但门槛并不在 LESS 本身，而是在于有些资源在国内是不能访问的。 而 v2.0 之后引入了 由 Glyphicons 提供的 Icons，应用到项目中去，顿时使整个 UI 的感觉上升了一个档次，真是锦上添花的好东西啊。 但是，需求总有惊喜的部分存在。 比如，想在字号较大的 title 位置也应用 icons； 又比如，在一个希望可以起到警惕作用的位置使用 .icon-ban-circle，无论是黑色还是白色（目前只有这两种颜色可供选择）都不能达到这个要求； 幸好是内部系统，不需要兼容什么老的 IE…
CSS 文字的发光效果通过 text-shadow 实现起来很方便的。 text-shadow: 1px 0 1px #8B4513, 0 1px 1px #8B4513, 0 -1px 1px #8B4513, -1px 0 1px #8B4513; 在 Firefox, Chrome, Opera, Safari 中的效果： 看上去这几款浏览器都支持。不过就是在 Chrome 里面，可以看见出来的效果并不好，奇怪的一点是为什么它的模糊会往里发展了，开始还以为 webkit 都这样，看了看 Safari，表现挺好的，边缘比 Firefox 还要锐利。
早有听闻 IE7+ 是支持 png 的，用下来感觉也还可以。但忽然之间，发现有一张 png 图片莫名其妙地黑底了，最先想到的是 png 的输出设置可能出现问题，于是试了 N 种设置黑底，只是黑底的形状有点不太一样，相当纳闷。没办法了，还原基本步。 <div id="box">I Believe</div> <style> #box { background: url(http://upload.wikimedia.org/wikipedia/commons/6/63/Wikipedia-logo.png) no-repeat; color: #FFFFCC; text-shadow: 1px 0 2px #897461, 0 1px 2px #897461, 0 -1px 2px #897461,…
如果希望使用半透明背景色，又觉得用24-bit PNG 太笨重，RGBA 这个时候就可以帮到你了。这个来自于 CSS3 的好东西。 应用它还有个最大的好处是，不用担心设置半透明背景会一刀切影响到子元素的透明度。 实现方案与兼容性见这篇 blog 就是应用起来，不是那么的方便，涉及到一些数值换算，比如通常我用十六进制的颜色值，小数表示的 alpha 值，而十进制的 RGB 颜色值和十六进制的 alpha 值就显得很特别，每次都进行换算比较不符合懒人的做法。 于是就有了这个小工具页。 还有就是实现细节上和上面的 blog 介绍的有点区别。 欢迎使用。Enjoy!
也不是第一次拿 IE 说事了，不过这次 IE 的 bug 还是有点意思的，也看到过有人提及这个 bug，解决的方法就是在CSS里设置它的 width 或者 height，要看具体的应用场景了，好像下面的这个例子。 <div class="composite"> <div class="item">AAA</div> <div class="item">BBB</div> <div class="item">CCC</div> <div class="item">DDD</div> </div> <style type="text/css"> .composite { background-color:#CCC; padding: 0 0 0 40px; } .item {…
我一般用脚本创建元素的同时多数会附加css来控制大小，背景色，etc. 但在<canvas>上却表现比较怪， var canvas = new Element('canvas', {styles: {width: '150px',height : '150px'}}); 再在上面画东西的时候居然发现变形了 我记得mozilla上面说是可以改变它的大小的 分析一下，canvas最终表现和一个png图像差不多，而它的默认大小是300/150，当应用css时，相当于宽度压缩了。 那不用css怎么办呢？其实很简单 var canvas = new Element('canvas', {width: 150,height : 150}); 诶，被css惯坏了…… 注: Element指的是mootools里的那个