CSS3:3D画廊图片展示效果

查看演示立即下载
该特效只能在 ie9+, Chrome, Firefox, Opera, Safari 中运行。

css3-3d-gallery-picture-effects(1)

一款3D画廊形式的图片展示效果。创意来源于Chromebook里看到的画廊效果。列表采用瀑布流的效果,点击图片进入画廊视图。

对于较小的屏幕,我们使用了一些媒介查询,对布局和画廊视图做了些调整。画廊视图中,点击左右箭头可切换上一篇下一篇,另外还可以用键盘上的方向键来控制翻页。点击关闭 或者 键盘ESC可退出画廊视图。

请注意,代码中使用CSS3 3D变换效果,只有在现代浏览器支持。

纯CSS打造的开关效果

查看演示立即下载
该特效只能在 ie9+, Chrome, Firefox, Opera, Safari 中运行。

pure-css-to-create-the-effect-of-a-switch

本文将推荐一款清新扁平化的开关效果,该效果也可以用来替代原生丑陋的raido 或 checkbox。

而且,本效果的实现不需要用到任何图片,是不是觉得很神奇?!

由于使用的CSS3,这个效果只能在IE9+和新版本的chrome,safari,firefox浏览器上完美运行。我也很无奈。

希望你喜欢这个效果,并且可以从中获得一些启发!

天气app交互效果

查看演示立即下载
该特效只能在 ie9+, Chrome, Firefox, Opera, Safari 中运行。

weather-app-interactivity

今天推荐一款天气类app的界面交互效果。通过滑动切换不同日期的天气,天气小图标过度很自然。

该效果是用web技术模拟的,用到了font-face技术模拟天气图标,用css3 transtion做天气动画。表现效果非常生动有趣。

要注意的是,该效果不需要用到任何图片,和 js。

由于使用的CSS3,这个效果只能在IE9+和新版本的chrome,safari,firefox浏览器上完美运行。我也很无奈。

希望你喜欢这个效果,并且可以从中获得一些启发!

HTML5 Canvas:图片裁剪

查看演示立即下载
该特效只能在 ie9+, Chrome, Firefox, Opera, Safari 中运行。

该教程将为你讲解如何使用HTML5 Canvas特性进行图片的拉伸和裁剪。配合上传功能,就可
打造出一款不错的图片编辑器。

html5-canvas-image-cropping(1)

在上传过程中,常常会因为图片比例不对,或者图片太大而带来一些困扰。如果在上传前,
能根据用户喜好对图片进行裁剪压缩的话,那真是太好了。

以前我们常常需要依靠flash技术来完成这一操作,现在HTML5 Canvas也可实现这一效果,并
且有不亚于flash的体验。

我们把图片绘制在 Canvas画布上,并最终到处base64格式的图片,现代浏览器对这一特性及base64的支持非常好,所以你可以放心地使用它。甚至在移动设备上也可以完美执行。

html5-canvas-image-cropping(2)

过于庞大的图片会使页面执行速度变慢,甚至让浏览器崩溃。但过度压缩的图片又很容易影响图片质量,HTML5 Canvas 可以压缩图片并保持图片质量的处理方案。有需要的同学请在半情调BLOG里找,本教程就不提到这方面的技术了。