栅格系统计算器

栅格系统(Grid System)的辅助工具不少,而那些工具多数让人填栏宽,间距,栏数这些。但是我在实际应用栅格系统的时候,是知道页宽并估计 12 栏会比较适合,虽然有公式去计算,都会觉得麻烦。

为什么就没有这么一个工具:输入页宽和分栏数,自动计算出所有可能的情况呢?因为不会有半个像素的情况,精准到像素的话,还是可能有几种情况的,还夹杂一些不实际的情况。那么根据具体效果去选择,会比埋头计算然后看效果要方便得多。

于是做了这个 webapp:Grid System Calculator
grid-system-calculator

参考了 Bootstrap960 Grid System 两种 CSS 实现方案,感觉更加倾向于 Bootstrap 的方案,于是参照其做法,用于生成显示效果。

为了方便 Bootstrap 的用户,以其参数配置方式输出具体参数。也提供了基于 960 Grid System 的 CSS 下载服务链接(引用 grids.heroku.com 的服务)。

这个 栅格系统计算器 采用 MIT 协议开源使用。

Replace [class*=”span”] in LESS

Bootstrap 里的 grid system 里面 (源代码) 有这么一段,

[class*="span"] {
  float: left;
  margin-left: @gridGutterWidth;
}

RECESS 去跑会看到提示:Universal selectors should be avoided。这个既可以说是 selector 的问题,也可以说是 RECESS 的问题,但可以在运行的时候加个参数忽略掉。

自己去写扩展时也会写到类似的规则,比如需要兼容某浏览器,如果不这样写,就会需要像 Bootstrap-IE6 那样写 Continue reading

Font Awesome – Iconic Font for Bootstrap

从 v1.4 开始使用 Bootstrap,从此(内部)项目的 UI 告别了自制样式的时代,风格清新而且使用简便,是目前见过最好使的 CSS 框架。对于哪个妙句 “Build for and by nerds”,我都不知道说什么好了。如果想自定义样式,对于了解 LESS 的是非常容易的,但门槛并不在 LESS 本身,而是在于有些资源在国内是不能访问的。

而 v2.0 之后引入了 由 Glyphicons 提供的 Icons,应用到项目中去,顿时使整个 UI 的感觉上升了一个档次,真是锦上添花的好东西啊。

但是,需求总有惊喜的部分存在。
比如,想在字号较大的 title 位置也应用 icons;
又比如,在一个希望可以起到警惕作用的位置使用 .icon-ban-circle,无论是黑色还是白色(目前只有这两种颜色可供选择)都不能达到这个要求;
幸好是内部系统,不需要兼容什么老的 IE 版本,使用 png 实现的 icons,欸~~

解决方案总是会有的。 Continue reading

CSS 文字发光效果

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 还要锐利。 Continue reading

IE 中 png 黑底(半透明失效)的那点事

早有听闻 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, -1px 0 2px #897461;
    filter: Dropshadow(offx = 1, offy = 0, color = #897461) Dropshadow(offx = 0, offy = 1, color = #897461) Dropshadow(offx = 0, offy = -1, color = #897461) Dropshadow(offx = -1, offy = 0, color = #897461);
    
    height: 200px;
    padding: 5px;
    width: 200px;
}
</style>

这个应用场景很简单,有一张 png 作为背景图,上面有些文字,对文字施加了一些发光效果(实际上阴影来实现)。在 firefox 和 IE 下的表现见下图: Continue reading

小工具:生成半透明背景色的 CSS 代码

如果希望使用半透明背景色,又觉得用24-bit PNG 太笨重,RGBA 这个时候就可以帮到你了。这个来自于 CSS3 的好东西。

应用它还有个最大的好处是,不用担心设置半透明背景会一刀切影响到子元素的透明度。

实现方案与兼容性见这篇 blog

就是应用起来,不是那么的方便,涉及到一些数值换算,比如通常我用十六进制的颜色值,小数表示的 alpha 值,而十进制的 RGB 颜色值和十六进制的 alpha 值就显得很特别,每次都进行换算比较不符合懒人的做法。

于是就有了这个小工具页

还有就是实现细节上和上面的 blog 介绍的有点区别。

欢迎使用。Enjoy!

DIV Background Bug in IE

也不是第一次拿 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 {
    background-color: #666;
    padding: 0;
}
</style>

简单得就是两层 div,有深浅不同的灰色背景。当里面那层 div 只包含像 text、input 这类的元素(我暂时还不致于无聊到逐一去尝试)时,它的背景色就不显示的,不过也不是永远不显示。

DIV no background in IE

DIV no background in IE


有趣在这里。当你用另外一个窗口,例如 QQ 聊天窗口,在上面移来移去,哈哈,那个背景色出现了,但只是一部分——被重绘的那部分,当时给一个同事看的时候,他还问:这是怎么实现的啦……
囧!!
DIV 的背景出现在重绘之后

DIV 的背景出现在重绘之后


目前我还没想明白到底是为啥出现这种状况。解决的方法也是相当的离奇,不知道是 IE 的 box model 的问题还是什么,不过通过设置 width 和 height 可以解决 IE 不止一个 bug,大概不会是 IE 计算区域的占地面积而造成的吧!

.exprItem {
    background-color: #666;
    _height: 1px;
    padding: 0;
}

上面通过一个 CSS hack 是其中一个解决方法,这种写法只有 IE 认得出来。因为通常情况下,我都希望元素自己去管理其领地而不要来问我应该拨多少地。

* IE version is 6.0.2900.2180.xpsp_sp2_gdr.080814-1233

Canvas的奇怪变形

我一般用脚本创建元素的同时多数会附加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里的那个