Articles with css

栅格系统计算器

栅格系统计算器

栅格系统(Grid System)的辅助工具不少,而那些工具多数让人填栏宽,间距,栏数这些。但是我在实际应用栅格系统的时候,是知道页宽并估计 12 栏会比较适合,虽然有公式去计算,都会觉得麻烦。 为什么就没有这么一个工具:输入页宽和分栏数,自动计算出所有可能的情况呢?因为不会有半个像素的情况,精准到像素的话,还是可能有几种情况的,还夹杂一些不实际的情况。那么根据具体效果去选择,会比埋头计算然后看效果要方便得多。 于是做了这个 webapp:Grid System Calculator 参考了 Bootstrap 和 960 Grid System 两种 CSS 实现方案,感觉更加倾向于 Bootstrap 的方案,于是参照其做法,用于生成显示效果。 为了方便 Bootstrap 的用户,以其参数配置方式输出具体参数。也提供了基于 960 Grid System 的 CSS 下载服务链接(引用 grids.heroku.com 的服务)。 这个 栅格系统计算器 采用 MIT…

Continue reading

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 那样写

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…

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

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,…

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 {…

Continue reading

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里的那个