‘新技术’ Archives

经过几个月夸张兴奋的和HTML5、Css3的约会, 前端设计师们开始真正把将新技术用于实践, 而不是炫技式的滥用。 我们在下面的例子里将很少看到由css3构建纯图像, 而是更先进和聪明的css技巧, 能够真正提高用户的网络浏览体验。
包括 优雅的css过渡效果, 控件, 流体网格,弹出视窗, 圆型遮罩, apple网站中视网膜屏幕放大特效, 进度条, 交互地图, webkit中的翻转效果, 各种框架……

50 New Useful CSS Techniques, Tutorials and Tools

http://www.smashingmagazine.com/2010/10//12/50-new-useful-css-techniques-tutorials-and-tools/

一些美妙工具的兴起, 使得人们可以在web中自如得运用字体和排版, 发挥创造力。 突破网络安全的字体的限制, 必须使用文本的图像渲染技术, 也就是把html字体通过替换为图片以保证在客户端的兼容和统一性。
文中举例的技术包括:

1 google font directory. 一种beta技术, 19种现有字体

2 Typekit  与字体开发上合作的在线引用。 收费服务, 但也有获得免费字体的机会

3 google font api, beta实验项目, JS库, 允许用户载入多种字体

4 FontSquirrel 庞大的自由字体数据库。 通过服务器提供脚本和JS。

5 sIFR 传统的技术, 基于JS和flash技术。

6 Cufon sIFR的传统竞争对手

6 Killer Text Replacement Tricks to Improve your Typography

http://www.1stwebdesigner.com/resources/text-replacement-tricks/



太阳系效果
CSS3广告 PK Flash广告
动画效果
基于动力学的动画效果
互动游戏
照片叠放效果
音乐播放器
CD封套效果
昼夜循环动画
树叶飘落的动画效果

10 Interesting CSS3 Experiments and Demos

http://sixrevisions.com/css/css3-demos-experiments/

什么是HTML5, 它如何改变WEB开发人员和web设计师的工作?这里有15个资源, 帮助你在当前追求 这份即将到来的技术。
包括一份关于HTML5的信息可视化图, 《潜入HTML5》, 《HTML5医生》, 《HTML5的W3C规范》, 《HTML5浏览器兼容性表格》等等……

Ultimate Guide to HTML Emails – Basics, Tips, Tutorials and Resources

http://sixrevisions.com/html/the-only-html5-resources-you-need-for-getting-up-to-speed/

虽然许多人认为CSS3是一个太前卫的, 暂时无法广泛使用的技术, 但这里收集的一批资源和教程非常经典。 如果你想走在同行业的前面, 应该好好看看。

包括使用css3完成完美的书籍翻页效果

在线资源管理器

CSS3实现三维柱状图。

用css3技术实现的twitter大鲸鱼

完美的阴影、渐变、圆角 等等等等

Start Using CSS3 Today: Techniques and Tutorials

http://www.smashingmagazine.com/2010/06/17/start-using-css3-today-techniques-and-tutorials/

 Page 1 of 3  1  2  3 »