CD的年代有点久远了，为了怀念一下下，用Star Craft2为素材做了一个CD封面的效果。
注意，不是用Firefox 3.0+、chrome的青年朋友，请买票！
主要使用的属性依然是：border-radius，利用它能够对左右上下的border的width进行定义。而封面上的文字主要是用了transform属性。先看看效果：
1.圆角部分，需要定义好四个圆角的半径让他们都为整个box大小的一半：
border-top-left-radius:150px 150px;
border-top-right-radius:150px 150px;
border-bottom-right-radius:150px 150px;
border-bottom-left-radius:150px 150px;
具体属性描述可以到W3C查看：CSS Backgrounds and Borders Module Level 3
Posted in UE, Web Standard | 2 Comments »
W3C在今年7月2号宣布了终止XHTML2，那么无疑就宣布了HTML5成为了继XHTML1.1后新一代的web标准之一，即使他目前还是一个草案。即使是如此，Google是在wave中将HTML5发挥的淋漓尽致，APPLE也开始在官网中使用基于HTML5的video功能，无数的组织正在开发许许多多的基于HTML5和CSS3的应用，例如这个惊人的山寨玛丽和嘀咕网的基于CSS3的圆角应用。
我越来越感觉到：所有的所有，都是为了给高级浏览器用户[当中不乏意见领袖，他们所带来的口碑传播不容忽视 ]提供更高级的浏览体验，但向下兼容低级浏览器，当然，前提是在各个不同浏览器中，视觉和交互风格是一致的。
前段时间，也对cnscorpio.cn进行了基于HTML5+CSS3的重构，虽然算不上什么大事件，但也记录下，毕竟也练了一下手。
小花了点时间写了以下的PPT，PPT中的不少例子来自这个页面：新东西一箩筐。
如果不能观看ppt，请点击我下载。
Posted in Web Standard | 2 Comments »
突然要美化一个顽固的select元素，才发现这个还是有点点难度的，难就难在人家IE不卖帐。
1. 先说select的高度设置吧
按照常理只要给它设置height，就完事，但在IE6 下，会比实际设定高度高出几个像素，不信你就试试在不同的浏览器下运行下面的代码。
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
test select
body{font-family:tahoma;font-size:12px;margin:0;padding:0;}
.select-outter{position:absolute;top:50%;left:50%;width:500px;
height:500px;margin:-250px auto 0 -250px;background:#F6F6F6;}
bingo-1
bingo-2
解决办法，就是针对IE6用font-size来控制，但是字，就有点难看了-_-!。
Posted in Web Standard | No Comments »
Aptana，相信有不少的同学在用，他对代码的tips提醒和对js框架的特别集成把不少人给迷住了，me too，哈哈，其实我还很喜欢他对eclipse的一些继承，还有就是插件多，较灵活，例如：php的插件，ajax，svn等等。
但在使用过程中也有一些不方便，因为内核本身的一些问题，导致运行一段时间后，比较慢，比较吃内存，有时候甚至连打个字都有很大的延迟，怎么解决呢？
看了一些网络上的资料，还有自己的使用经验，跟大家说说，希望有用。
Posted in Some, Web Standard | 2 Comments »
在web页面中通常会使用多个区块来区分展现不同的信息，这多个区块一般会有一定的间隔，并在视觉上做一些处理引导。而每个独立的区块的边缘就会是视觉设计师考虑比较多的地方。
区块的边缘里，四个角是最难处理的地方，目前用的最多的，就是直角和圆角，欧美站点里，直角给人一种硬朗、商务、犀利和直接的感觉，直角风用的最普遍的就是yahoo.com了:
对于圆角，我想很多做视觉的朋友都会想到Mac、iphone，没错，圆角相对于端正的方角，更有亲和力、圆润、活泼和极度的欲参与感。这个在apple.com上随处可见，i家族的产品上，也到处是它的影子。
近一两年来，web视觉中，圆角用的越来越多，并且慢慢的往上面添加了不同的风格样式，演变除了阴影圆角，半透明圆角等等，为的就是传递上面所提到几种感觉，提升用户浏览站点过程中的美妙体验。好了，啰嗦了这么多，进入正题：如何在web页面上实现圆角？
1.图片圆角
用圆角形状的图片来对四个边角或者某些边角进行遮罩，这种方式用的最多，思路有几种：
1.1 切取需要的边角图片，一般会将其做到sprite上，然后使用使用css定位到需要的某些边角上，而最外围的块元素设置border或者background，这样从整体上看就是一个圆润活泼的圆角框了。
eg1:
上面的小圆圈就是四个边角的sprite，高为8px，宽为8px，待会的例子中将会使用它来做四个圆角。
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
图片圆角
.r-n-1{position:relative;width:200px;height:200px;margin:20px auto 0 auto;background:#F6F6F6;border:#DEDEDE 1px solid;}
.lt,.rt,.lb,.rb{display:block;overflow:hidden;position:absolute;width:4px;height:4px;background-image:url(http://www.cnscorpio.cn/tmp/r-n.png);background-repeat:no-repeat;}
.lt{top:-1px;left:-1px;background-position:left top;}
.rt{top:-1px;right:-1px;background-position:-4px top;}
.lb{bottom:-1px;left:-1px;background-position:left -4px;}
.rb{bottom:-1px;right:-1px;background-position:-4px -4px;}
1.2 由上面这种方法可以延伸出很多类似的实现方式，例如将顶部的两个圆角跟上边框切到一起，底部的两个圆角和底边框切到一起，两张独立的图片做为上下两个块元素的背景，这里就不再列举了，直接看图样。
Posted in Web Standard | No Comments »