“Graphic相关”目录存档

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都与贝塞尔曲线存在基情关系,哟呵呵呵,本文就将揭示其中不为人知的基情,习惯八卦的你可不能错过哦……

阅读全文…

前端设计必会技能-gif动画图片制作

2013年01月15日,星期二

gif动画图片是web制作中非常常用的,可以说是前端必会技能。本文就介绍了如何在Adobe flash以及Adobe photoshop中制作gif动画图片。很多截图,希望本文的内容能够对您的学习有所帮助。

阅读全文…

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

2012年08月22日,星期三

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

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

阅读全文…

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

2012年08月19日,星期日

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

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

阅读全文…

HTML5 Canvas,WebGL,CSS Shaders,GLSL的暧昧关系

2011年10月10日,星期一

技术的发展日新月异,说不定回家钓几天鱼,就出来个新东西了。新事物新技术发展的初期,你无法预见其未来之趋势,生命诚可贵,没有必要花过多时间深入研究这些新东西,不过,知道了大概,了解个全貌还是很有必要的。虽不是时代缔造者,也不至于落后于时代发展大潮。
互联网的发展相当的神速,其他不说,就前端技术这块,出现的些新名词或生名词就让人眼花缭乱,应接不暇,比如说:HTML5 Canvas, WebGL, CSS Shaders, GLSL等。你是否有这样的疑问……

阅读全文…

使用SVG实现gradient背景渐变

2011年09月23日,星期五

现在现代浏览器都对CSS3的渐变支持良好,加上IE的渐变滤镜,可以在不使用图片的情况下实现各个浏览器的两色渐变效果。这里,再简单介绍下如何使用svg实现元素背景的垂直渐变,水平渐变,斜向渐变,或是径向渐变,以及更加复杂的多层渐变。

耳熟能详的唠叨:本文提供demo页面,丰富的截图以及必要的源代码展示。希望本文的内容可以对您的学习有所帮助。

阅读全文…

基于canvas画布的两个炫酷效果展示

2011年05月17日,星期二

HTML5 canvas这个玩意用通俗的话来讲就是一块用来画画的布,不过这不是普通的布,这是个类似于神笔马良的那个神笔一样神奇的东西,可以画出很多精湛美妙的东西。本文就展示两个基于canvas的炫酷效果,可以让我们对canvas的潜力有个比较直观的认识。一如既往,有demo页面,有效果截图,相关源代码展示。本文甚至还有video视频展示,总之,希望本文的内容能够对您 学习有所帮助。

阅读全文…