文章关键字 ‘SVG’

Snap.svg-SVG实战学习必修课-实例与文档讲解

2014年01月19日,星期日


2013年10月23日,第3届(如果我没记错的话)HTML5全球开发者大会在旧金山举办。Adobe在此次大会上宣布了一件事情:建立了一个名叫Snap.svg的开源项目。其目的在于摒弃Flash插件,将Flash的特性带到web上。
Adobe表示,”Snap.svg是一个强大且直观的SVG动画内容操纵API,支持屏蔽、裁剪、全梯度和组别等使得内容更具吸引力和交互性的功能”。
Adobe支持的项目,自然其产品中会有体现,例如DreamWeaver中的PhoneGap, 这里的Snap.svg应该也会集成在其Web开发工具中,例如Edge…..

阅读全文…

CSS3 box-shadow盒阴影图形生成技术

2013年11月29日,星期五

理论上,CSS3 box-shadow盒阴影可以生成任意的图形,小月格格的靓照,含韵格格的靓照那都不在话下。本文且听后宫茶话会上关于CSS3 box-shadow盒阴影图形生成技术的分享。截图、demo源代码示意,美女靓照一个都不少。说不定,你会有别样的收获哦!【挑眉】

阅读全文…

使用CSS将图片转换成模糊(毛玻璃)效果

2013年11月21日,星期四

前段时间,iOS7不是瓜未熟就落地了嘛,然后捡瓜的人很多,然后国内外开始了各种探讨,从界面到动画,从兼容到实现等。其中,“毛玻璃”一次梆梆出世,一些爱折腾的弄潮人就可以琢磨怎么用CSS实现之,国内有之,国外也有之……

虽然本文标题也有“毛玻璃”二字,sorry,是“三字”。但是,并不是介绍如何实现毛玻璃效果的,而是介绍毛玻璃效果实现的基础——模糊。哈哈,恕我取巧,借用“毛玻璃”之词,沾沾喜气,散发芳气;蜂飞蝶舞,围观博主。

本文很单纯,就是图片模糊效果的实现。demo、源代码、截图、拓展以及御用模特应有尽有,希望本文的内容能够对您的学习有所帮助!

阅读全文…

一些SVG向下兼容优雅降级技术

2013年09月22日,星期日

对SVG有所关注的同行应该都知道,IE8-以及Android 2.3默认浏览器是不支持SVG的,实际项目,这些浏览器,至少IE8浏览器还没有到不管不问的时候,因此,在使用视网膜显示友好的SVG同时,我们还要做一点优雅降级,使IE8等考古价值浏览器也能手染余香。

本文在介绍一种新的SVG降级技术的同时,同时把以前css-tricks中提到的技术又总结了一遍。大集合什么的我做喜欢了,以后不要找来找去,因此,这里,我按照个人的理解,配合自己的一些实际测试,分享下。

demo, 截图、表格、源代码什么的应有尽有,希望本文的内容能够对您的学习有所帮助。

阅读全文…

贝塞尔曲线与CSS3动画、SVG和canvas的基情

2013年08月30日,星期五

CSS3动画、SVG和canvas都与贝塞尔曲线存在基情关系,哟呵呵呵,本文就将揭示其中不为人知的基情,习惯八卦的你可不能错过哦……

阅读全文…

近期手机网页项目一些杂碎心得分享

2012年08月31日,星期五

其实上上周就可以出此文了,只是,就跟谈恋爱一样的,要讲求时机以及心情。这会儿,看完了海贼王情报,处理了邮件,文章评论以及部分同行靠谱的提问,加上好几天没有动“笔头子”了,于是,很有兴致,分享些杂碎的知识点。
头一次写星星点点知识的分享。不过应该压力不大,貌似不需要什么严谨的逻辑。想到了就说,再堆麻将版摞起来就可以了~~
项目是做移动网页版的内容,从塞班S60到iPhone以及Android手机以及window phone都要支持。采用渐进增强策略,塞班S60布局良好,功能可以正常使用,至于模样嘛,看得过去就可以。
千奇百怪手机,显然,会出现N多让人都无力吐槽的兼容性问题。这里,share下,希望可以为后来者或是正在遇到类似问题的你提供点思路……

阅读全文…

SVG特征、支持以及一些实际使用问题

2012年08月22日,星期三

去年9月份曾写过“使用SVG实现gradient背景渐变”一文,其中有对SVG比较术语化的解释,以及SVG的创建、SVG编辑器使用、简单的实际应用等。
不过,之前的介绍,虽然也有内容,不过总给人以生硬之感,仿佛是直接从山上凿下的原石,没有美化与雕琢。而这里的介绍(自然没有重复)似乎更接地气些,应该会给你一点别样的关于SVG的收获。

一如既往,有demo,有截图,有源代码示意。希望本文的内容能够对您的学习有所帮助。

阅读全文…

小tip: 使用CSS将图片转换成黑白(灰色、置灰)

2012年08月19日,星期日

可能早就知道,像汶川这种糟糕的日子网站全灰在IE下是可以轻松实现的(filter: gray;),不过,当时,其他浏览器是无解的。不过,时代发展,如今,CSS3的逐步推进,我们也开始看到“黑白效果”大规模应用于实际的可能。

本文就将介绍如何是有CSS3的一些新方法实现图片的黑白效果。另外,最后还介绍下一款可以实现各个浏览器下图片黑白的小JS插件。有截图,有demo,有代码示意,希望本文的内容能够对您的学习有所帮助。

阅读全文…

近期折腾:使用JS以及HTML5实现鑫情动画

2012年05月2日,星期三

大学时期,因为兴趣,花了不少时间学习flash动画制作以及AS脚本。后来开发个人网站时候,一方面想自娱自乐,另一方面由于这份无法割舍的情愫,开辟了个“阳光鑫情”的频道。要知道,这玩意很耗精力的。后来,工作忙了,任务重了,还要博客这块的压力,我只是个普通凡人,无法同时专注于几个事情,因此,“阳光鑫情”就让它去海南晒太阳去了。上周五一节前的几天,基本上没有什么活,各种x, y, z因素参杂在一起,让我突然脑中灯泡一亮——我是不是可以用HTML5实现“鑫情动画”?……

本文就将展示如何使用HTML5以及简单的JavaScript代码实现类似Flash的动画效果。

阅读全文…

了解:使用CSS namespace进行分隔

2012年02月16日,星期四

一个XML文档可能包括来自多个XML词汇表的元素或属性,如果每一个词汇表指派一个命名空间,那么相同名字的元素或属性之间的名称冲突就可以解决。举一个简单的例子来说,在一个订单的XML文档中需要引用到客户和所购买的产品,customer元素和product元素可能都有一个叫做id的子元素。这时候要引用id元素会造成名称冲突,但是如果将两个id元素放到不同的命名空间中就会解决这个问题。

命名空间的声明就是将一个前缀与一个URI关联起来。

声明命名空间时,可以为命名空间定义前缀(见前例)。为命名空间定义前缀,而不直接使用命名空间的URI是因为URI为了唯一通常会很长,直接使用URI不但造成书写和阅读的不便,还会扰乱XML的语法。声明命名空间时,也可以不定义前缀。如……

阅读全文…