CSS3 绘制Windows 8 logo

27

November

2012

今天的内容非常简单,但有个比较关键的属性:perspective(透视)。所有元素都是放置在z=0的平面上perspective属性设置镜头到元素平面的距离(学过AUTOCAD的童鞋应该很容易理解吧)。是不是还有点云里雾里呢?我们来举个例子,想想你从天上俯看一座金字塔。镜头到元素平面的距离,就是塔的顶部(视点)和地面(Z-平面)之间的距离。

HTML CODE:

<div class="wrapper">
	<div class="logo"></div>
	<div class="logo_text">Windows 8</div>
</div>

[ 查看全文... ]

360安全浏览器 网站名片 以安全之名泄露隐私?

25

November

2012

由于部分原因,刚才下载了一个360安全浏览器(下文简称:360浏览器)。在打开我的网站的时,发现在地址栏旁有一个“网站名片”的按钮,处于好奇就点了下。惊奇的发现,居然能够显示出当前网站的ICP备案信息,并且列出了我的真实姓名。对此,我对此表示十分不满,也促使了我写下这篇博文。

什么是ICP备案?
ICP-(Internet Content Provider)网络内容服务商 ,即向广大用户综合提供互联网信息业务和增值业务的网络运营商。ICP备案是信息产业部对网站的一种管理,为了防止非法网站。我们来举个简单的例子,就像开办公司需要去工商部门注册并办理相关的营业执照一样,而ICP备案的目的于此类似。

此时我就不禁想问,360浏览器真的“安全”吗?这是不是在泄露站长的个人隐私呢? [ 查看全文... ]

jQuery Parallax Scrolling Website(视差滚动网站制作)

23

November

2012

唠叨一下:
一直没时间去研究视差滚动的内容,乍看之下还觉得挺难、蛮麻烦的,不知道你有没有同感?我在度娘找了半天,也没找到什么有用的资料(起码我没找到,要么就是写的像天书一样,没精力去折腾)谷歌么自从X8大以来,一直处于悲剧状态。这两天正好空闲下来,就又去找了下相关的资料。不看不知道,一看吓一跳,顿时恍然大悟,原来那么简单。。。

什么是视差滚动?
视差滚动(Parallax Scrolling)视差滚动是一个二维动画制作过程,创建一个动画前景层的速度比背景层深度的幻觉。简单的说,就是让多个层面的东西(如果你有接触过PS或FLASH,应该很容易理解"层"这个概念),以不同的速度移动,形成立体的运动效果。举个例子,当你坐在行驶中的汽车内,看着窗外近景的树木,再看远处的山或事物,你会发觉树移动的很快,而远处的事物却移动的很慢。视差滚动使用相同的原则来误导人们眼睛,以为他们所观察到的3D场景。具体描述,可以查看维基百科 Parallax scrolling [ 查看全文... ]

Ublue jQuery 弹出框 始终垂直于屏幕中间 完美兼容IE6

22

November

2012

今天继续和大家分享一个jQuery弹出框的代码。代码本身很简单,最关键的问题就在于兼容性方面。

HTML CODE:

<a class="popBtn" href="javascript:void(0)">Click Me</a>

<div class="popLayer">
	<div class="popLayerTit">
		<h2>Title</h2>
		<i class="close">[ 关闭 ]</i>
	</div>
	<div class="popLayerCon">
		<p>Text or Other content</p>
	</div>
</div>
<div class="maskLayer"></div>

[ 查看全文... ]

Ublue jQuery Tabs插件 支持自定义样式 可多次调用

20

November

2012

这是我蛮早以前写的一个插件,自己平时的一些项目也是用的这个。一个页面中可以多次调用,并且支持自定义样式。使用的方法也很简单,只要类名一一对应就行。使用方便,如果有什么问题,直接给我留言就行。

调用方法:

$(function(){
	$(".tabs").UblueTabs(); //默认调用方法

	$(".custom").UblueTabs({ //自定义选项卡区域
	tabsTit:".customTit", //自定义标签区域
	tabsTab:".customTab", //自定义标签
	tabsCon:".customCon", //自定义内容区域
	tabsList:".customList", //自定义内容列表
	tabsHover:"customHover", //自定义鼠标点击后样式
	eventType:"click" //鼠标经过标签切换内容 (此处不写则默认为hover事件 当然也可以把这里的click改成hover)
	});
});

[ 查看全文... ]

微信之父张小龙 – 微信 简单之美(四)

19

November

2012

第11章 移动互联网产品设计的15个原则

1、绝不考虑Web形态,一切考虑都基于APP。

2、产品优先级:
(1)有趣高于功能,产品必须有趣,必须Cool,才可能形成传播和口碑。
(2)功能高于交互,明确的功能满足明确的需求,用户不会在意炫酷交互效果。
(3)交互高于UI。便捷、快速的交互设计为先,围绕具体功能实现UI,而非有优质UI方案为此专门设立一个功能。

3、聚焦:一个APP只做一件事情,一个大而全的APP意味着全面的平庸。

4、永远一维化:让用户在一个维度里解决具体的问题,Twitter的Timeline就是一个好的范例。而类似Facebook、Path那样的滑出式菜单则是一个灾难,因为这使得产品拥有两个维度,加大了用户理解的困难。 [ 查看全文... ]

无觅相关文章插件,快速提升流量