创建非矩形网页页面元素的常用技术和实例代码
非矩形设计正在变成一种时尚,比如波浪形、菱形、三角形等:
而随着技术发展,这种设计在技术实现上也变得更容易。
本文以最简单的三角形为例,演示使用5种方法来达到非矩形设计的界面效果。
使用透明图片遮盖
优点是兼容性好,IE都能搞定,缺点是性能差。
使用SVG多边形元素
http://wow.techbrood.com/fiddle/33382
优点是能制作很复杂的形状并且在桌面浏览器上得到很好的支持。和其他方法相比,这是目前最推荐的方式。
使用CSS3裁剪路径(clip-path)特性
http://wow.techbrood.com/fiddle/33383
这个方法技术上最先进,性能也理应最好,但可惜兼容性上面,还有一些浏览器不支持(尤其是过时的IE)。
使用CSS3扭曲变换(skew)特性
http://wow.techbrood.com/fiddle/33384
缺点需要引入新元素,并且得小心skew会使得所有子元素也被变形,另外得小心动画的处理。
使用border-radius来实现
(小练习,请自行实现,类似于用border-radius来实现一个三角形。)
总结和建议
推荐使用第2种方法(使用svg),理由是性能比方法1好,兼容性比方法3好,且能实现更为灵活的形状。
如果css3的路径裁剪(clip-path)特性得到更为广泛的支持,那么再切换到纯CSS3的方式。
最新评论
- 相关文章
html5跨平台实战-第一周-水平测验-新闻列表页面
这是一个DIV+CSS布局页面的一个实例,主要介绍POSITION定位、导航UL LI的制作、利用浮动原理对页面分栏、分列的页面布局。新闻页面的效果图
踏得网精选2016年度10大最佳HTML5动画
踏得网精选2016年度最酷最新的HTML5动画集,评选标准为:创意新颖度+实现技术难度+趣味程度。使用一些在线H5生成工具的作品,因其主要使用图片和CSS3套路动画,...
如何使用BabylonJS加载OBJ或STL模型
BabylonJS(也就是babylon.js,这是一个和three.js类似的WebGL开发框架),更多的用在游戏领域。
本文说明和演示如何使用babylon.js来加载一个标准3d模型文...WebGL Roadmap
Unity 5.0 shipped with a working preview of our WebGL technology in March this year. Since then, Google has disabled (by default) NPAPI support in the...
函数式JavaScript编程基础概念:Curry和Partial Application
本文介绍JS函数式编程中的两个概念:柯里(Curry)和部分应用程序(Partial Application)。什么是应用程序(Application)将函数应用于其参数以产生返回值的过...
CSS3弹性布局内容对齐(justify-content)属性使用详解
内容对齐(justify-content)属性应用在弹性容器上,把弹性项沿着弹性容器的主轴线(main axis)对齐。该操作发生在弹性长度以及自动边距被确定后。 它用来在存...
使用HTML5 Canvas实现的界面元素截屏功能
深入理解Three.js(WebGL)贴图(纹理映射)和UV映射
本文将详细描述如何使用Three.js给3D对象添加贴图(Texture Map,也译作纹理映射,“贴图”的翻译要更直观,而“纹理映射”更准确。)。为了能够查看在线演示效...
如何使用Three.js加载obj和mtl文件
OBJ和MTL是3D模型的几何模型文件和材料文件。在最新的three.js版本(r78)中,以前的OBJMTLLoader类已废弃。现在要加载OBJ和MTL文件,需要结合OBJLoader和MTLLoade...
WebGL入门教程4 - 使用纹理贴图(Texture Map)
3D建模和纹理贴图的关系就好比人体和皮肤(或着装)的关系,3D建模用来处理空间属性,而贴图适合用来处理细腻的表面属性。如果不使用贴图,而想在表面达到足够的...
jQuery Ribbles - 基于WebGL的水面涟漪动效插件
使用jQuery
使用requestAnimationFrame和Canvas给按钮添加绕边动画
要给按钮添加酷炫的绕边动画,可以使用Canvas来实现。基本的思路是创建一个和按钮大小相同的Canvas元素,内置在按钮元素中。然后在Canvas上实现边线环绕的动画。...
更多...