关于容器透明度以及你可能不知道的ie hack

What’s the differences between opacity and rgba?

相信很多人都知道的一种处理透明的方法是:opacity。顾名思义,就是透明(opacity),这是css3的一个属性。

我们看下opacity透明效果:(请在现代浏览器下观看)

background-color:#000;opacity:0.5;

仔细看会发现,opacity除了会把背景色设置透明外,还会把容器里的元素都设置透明,比如上面的p。

有时候我们并不想要这样的效果,我们只是希望背景色透明,而里面的内容清晰显示,事实上这种需求会更多一些。

那么,我们就需要另外一个属性——rgba,这也是一个css3属性。下面是rgba实现同样透明度的效果:

background-color: rgba(0,0,0,0.5);

可以看到,里面的内容并没有透明,这就是opacity和rgba设置透明的区别。

Continue Reading… ‘关于容器透明度以及你可能不知道的ie hack’ »

艾维OA雏形,这不只是一次试验

艾维oa

从无到有,艾维都坚持着小团队敏捷和灵性,另一方面,随着业务规模的一步步扩大,我们又开始感觉到,仅仅能finish the job是不够的,艾维迫切需要另一次飞跃,因而有了这一次的契机,让艾维思考,我们离专业到底还有多远。

Continue Reading… ‘艾维OA雏形,这不只是一次试验’ »

经典重现:基于canvas的俄罗斯方块

最近在前端领域,HTML5可算是一个相当火的新技术, 那么作为html5中最引人瞩目的canvas画板,更是魅力无穷。

canvas是个好东西,随便google一下,就可以看到各种各样令人叹为观止的canvas应用,在介绍我的游戏demo之前,先给大家分享几个超赞的canvas应用,推荐chrome来浏览。

1. Canvas Paint

2. Canvas Gradient

3. Bomomo

4. Tunneler

5. Lines go all over the place

作为一个业余的页面仔,我意识到,在没有canvas之前,我们在网页画一条斜线也是一件多不容易的事,那么现在,我们竟然可以在网页上做出如此华丽的绘图效果,说canvas是一个质的飞跃真的一点都不为过。

当然canvas不仅仅只是用来绘图,还可以用来做游戏,比如这次的demo——俄罗斯方块。

Continue Reading… ‘经典重现:基于canvas的俄罗斯方块’ »

小试html5.基于Canvas的简易画板

最近开始接触html5的相关内容,也在重新从零开始学js,于是尝试着把相关的内容结合在一起写了一个简易的在线画板。

支持度:Chrome 1.0+,Firefox 1.5+,Opera 9.0+,Safari 1.3+

推荐浏览器:Chrome 2+,Firefox3.7+,Safari 3.1+,Opera 10.5+.

PS. 可能会出现提示安装插件的提示,是提示安装wacom数位板驱动的插件,不使用数位板的客官们直接跳过即可。

演示地址:

http://xujianye.com/test/drawingBoard/index.html

Continue Reading… ‘小试html5.基于Canvas的简易画板’ »

与其在别处仰望,不如在这里并肩——新人加入介绍贴

艾维作为一个小型团体,人数一直不多,尽可能保持在一个精简适中的状态。而近期一口气纳入三位新人,他们也确实有自己独特所在,为团队灌入了新鲜的思维与活力。

延续上一篇末未完成的,现在来介绍一下新加入的成员吧!
Continue Reading… ‘与其在别处仰望,不如在这里并肩——新人加入介绍贴’ »

你好,我们是艾维(ver 2.0)!

您好,我们是艾维工作室(ver 2.0)!

经历了前期的评估策划,全体成员的多次讨论,艾维工作室首页的改版在2011年前已经进入了实质性的工作。

艾维工作室即将两周岁的时刻,我们隆重地低调发布全新主页改版。
Continue Reading… ‘你好,我们是艾维(ver 2.0)!’ »

面向对象css

嗯嗯,前段时间看到了EO写的一切为了《重用与高效——谈CSS模块化》,觉得很强大。而最近艾维博客需要写一篇博文,所以就想用这个为主题,总结一下我收集到的有关信息和自己的一些感想,只是一些简单的例子,EO说过的我就不再啰嗦了!算是学习笔记吧。请大家狠狠地指正。谢谢~
Continue Reading… ‘面向对象css’ »

一切为了重用与高效——谈CSS模块化(补充版)

第一次听到“CSS模块化”这个词是在WebReBuild的第四届“重构人生”年会上,当时我还想,“哈,CSS也有模块化,我没听错吧?”事实上,我没听错,你也没看错,早就有CSS模块化这个概念了。之所以我把这个拿出来讨论,是因为最近艾维的一个算是比较大的项目——聪明的油出现了一些重构上的危机,因此引发了我们对页面重构中的CSS进行模块化的思考。
Continue Reading… ‘一切为了重用与高效——谈CSS模块化(补充版)’ »

uncollapsing margins||取消不需要的垂直margin折叠

前一段时间在重构一个页面时出现了一个问题,当时刚好看了《CSS权威指南》的那一部分所以后来还是很顺利地解决了,但是google了一下好像国内提及到这问题的文章都比较少比较散。在这里借这个机会总结一下。

P.S,此问题在IE8,IE9,firefox,chrome,opera中均会出现。
Continue Reading… ‘uncollapsing margins||取消不需要的垂直margin折叠’ »

Bubble – Mobile UI Design

手机界面设计Bubble。

第一次做手机界面,其中展示方式有参照一些前辈们的,受了不少Kingyo前辈的影响,当然也有其他优秀的界面作品。

Continue Reading… ‘Bubble – Mobile UI Design’ »