前端经验

这里用到的技巧也很简单,就是在图片之前创建一个<span>,并在span上使用background-image生成一个遮罩的效果。这种方式既简单又灵活,demo中介绍了20多种样式,大家可以参看。


demo预览地址:http://www.webdesignerwall.com/demo/decorative-gallery/decorative-gallery-index.html?TB_iframe=true&height=550&width=840

demo下载地址:http://www.webdesignerwall.com/file/decorative-gallery-demo.zip

这种css技巧带来的好处

  • 节约时间 — 你不需要在photoshop中创建图片模板,然后为每张图片生成独立文件。

  • 保留原始图片源 — 我们不用担心日后需要更换图片主题的时候,没有原图片。因为我们根本没有修改他。

  • 相当的灵活 — 你只需要调整css就能换一个完全不同的样式。

  • 在任何站点都能工作 — 这个css技巧在任何站点,任何图片大小下都适用。

  • 解决浏览器兼容问题 — 通过了大多数浏览器的测试 (Firefox, Safari, Opera, 甚至包括行为怪异的IE6)。

基本概念

我们需要在包裹img的div中创建一个span元素,在他上面适用background-image来产生遮罩的效果。如果你不喜欢插入一个空的span标签,我们可以使用javascript来动态生成他,之后我们会介绍到。下面的代码揭示了他如何工作。

对于css代码,我们需要注意的是,需要为div设置position:relative,为span设置 position:absolute。这样你就可以通过为span设置top和left属性,来任意摆布他在div中的位置了。

IE PNG hack

为了能让透明的png图片在ie6中工作,我们需要使用到强大的 iepngfix.htc hack。下载 iepngfix.htc 文件,并在页面<head>标签中添加如下代码。

复制代码
<!--[if lt IE 7]><style type="text/css">  .photo span { behavior: url(iepngfix.htc); }</style><![endif]-->
复制代码

外观

我们只需要修改指定span元素的css,就能实现不同样式的变化。查看demo源代码,你会发现其中的奥秘。

jquery解决方案

如果你不喜欢在页面中直接添加空的span标签,可以使用下面的jquery代码,实现span的动态添加。

复制代码
<script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function(){    //预添加 span 标签  $(".photo a").prepend("<span></span>");   });</script>
复制代码

#1. 简单画廊

让我们使用之前介绍的技术,来创建画廊吧。

#1b. 迷你icon

这个例子为了展示了,如何在图片上面放置不同的icon。我们需要为span标签设置不同的css class 名称。

#2. 带文字的图片

该例子为了展示了如何创建带文字连接的画廊。

#2b. 弹出文字

#3. 迷你纸夹

#4. 软木板画廊

sIFR版本(文字替换)

在这个版本中借助 sIFR, 实现将em中的文字替换为手写体。

#4b.胶带效果

#5.黑框艺术画廊

#5b.金边艺术画廊

#6.水彩效果

 

sIFR版本

#7.高光效果

#8.木板画廊

最后我们展示如何使用background-image来实现木板的效果。

最后评论

我们可以看到这种css技巧相当的灵活,他极具创造性,他将图片和css有机的结合在了一起。你也可以使用这种方式,创建自己不同风格的画廊。

在网页设计中创建背景材质通常是根据设计方向展开设计的第一步,也是确定设计基调的重要环节。虽然大多数情况下,网页背景材质是非常细微和低调的,但是由于整个背景的范围较大,所以会给人强烈的心理感受。


一、使用现成的图案来创建网页背景材质。

1、下载现成的图案样式,或者自己动手创建图案,下面是收集的一些经典的图案文件,其中包括五类图案样式。

点击下载

2、如果下载的图案色调不符合设计要求的话,可以通过图层混合模式来进行调整。比如我们想要创建浅色的背景材质,但是手头的图案样式是暗色的,如果图案叠加的混合模式为正常的话,创建出来的效果如下图:

pattern-normal.jpg

但是我想用这款图案做出浅色的背景来,该怎么做呢?这时候就可以通过调整图案叠加的混合模式来实现。在背景色不完全是白色的情况下,一般像上面的图案,通过调整混合模式到亮光就能得到如下图的效果。

pattern-lighter.jpg

3、还不满意的话,比如想要亮度再稍微再亮一点,还可以通过新建调整图层来实现。在这个例子中,使用色阶调整图层就可以实现我们的设计目标。你还可以通过添加黑白图层来给整个背景材质去色,通过色相饱和度图层调整背景材质的色相以及明暗值。

pattern-lighter-level.jpg

4、通过在图案图层上方新建一个颜色填充图层,调整该图层的图层混合模式,我们可以给图案图层添加一定的颜色。比如加一点黄色进去,或者加一点蓝色。当然这里我们依然可以通过添加色相以及饱和度调整图层来给本来是灰度的材质上色,具体方法就是在色相饱和度调整图层的对话框中勾选着色框,然后调整色相的滑动块来实现。

hue-saturation.jpg

patter-color.jpg

patter-color-blue.jpg

二、应用滤镜来创建网页材质背景。在使用滤镜来给网页背景添加材质的方法中,最常见到的莫过于使用滤镜中的添加杂色命令来实现需要的效果了。应用步骤为,先将图层转转为智能对象,目的是方便随时调整滤镜值。然后应用滤镜>杂色>添加杂色命令即可,非常简单。一般来说,添加杂色时,滤镜数值的设置非常低,一般使用1%就够了,而且效果非常好,数值太大材质看上去不够自然。

具体设置如下图所示:

add-noise.jpg

杂色背景效果如下图:

noise-pattern.jpg

三、使用笔刷来添加质感。使用笔刷来创建网页背景材质也很简单,一般的步骤是,将前景色调整为白色,选择画笔工具,调整好大小,在新建的图层上随机添加一些笔刷效果,通过多建几个图层,调整不同图层的图透明度可以让添加的材质看上去更自然和真实。之后将图层的混合模式调整为叠加或者柔光让笔刷效果和背景更好的融合。下面的图片是添加了划痕和做旧效果的笔刷后,未更改图层混合模式之前和更改后的效果:  

brush.jpg

brush-layer-softlight.jpg

除了上面的做旧风格常用到这种方法外,笔刷方法的应用还常常出现在水彩风格的网页设计过程中。

四、使用材质图片来创建网页背景比如我们要让网页背景看上去是纸质的感觉。当然可以通过添加不同层次的滤镜效果模拟来实现类似于纸张的材质,但是相较于直接把一张纸质材质的图片拖到文档中,通过调整图层的混合模式以及上面提到的各种调整图层来实现的话,后面的一种方法做出来的效果往往要更真实和自然。类似的还有木质的背景材质的实现。

下面的截图展示了木质背景材质的效果:

wood-texture.jpg

五、总结实际上,在创建网页背景材质时,上面讲到的方法都会涉及到,只不过依据设计目标,有时只会用到其中的一种方法,比如杂色背景的话,应用添加杂色的滤镜命令往往就够了,有时却要复杂一些,可能上面的方法都会用得到。所以我们要依据总的设计目标来选择性的使用,但是这些方法不用说都是网页设计中必须要掌握的,这样我们的设计手法才能灵活多变。

如今,我们有具备视网膜屏幕的iPhone,iPod,ipad和 Mac。这些产品拥有大量的用户,随着苹果产品的不断创新和增加,(Retina)视网膜屏幕技术的使用也越来越广泛。就像您周围看到的,这群庞大的用户正逐渐深入到人们的生活。接下来,咱们就看看如何把这项技巧运用在网页设计当中,让你的作品也看起来更加锐利,清晰。


起初,我觉得视网膜屏幕并没有多大的用户基础,毕竟这是个新技术, 然而,当我浏览了一下软件分析数据,发现苹果的所有设备都已经支持了视网膜屏幕技术,包括Macbook 13寸和15寸的使用者,再加上Chrome, firefox,IE浏览器的支持,使得视网膜屏幕技术的使用者越来越庞大起来,所以作为网页开发者不得不重视他们的视觉体验了。

如何制作图片

你会猜测视网膜技术是把图片存储成高分辨率的,提高单位面积的像素率 ?呵呵,这可不是关键。其实,你只需要做一步,把你的图片存成他的像素的两倍大小,也就是把一张200×200的图片存成400×400的。然后把大图的尺寸改成小图的,这样你的图片就会在高分辨率屏幕上看起来犀利很多。上面的方法听起来很简单,但是我们如何去做呢?

AI里的图片

矢量图片是最佳途径。假如我们有个logo是AI的或eps的,这样我们改起来很方便,因为我们可以随意的调整他的大小,无论是在AI里还是在PS里,然后导出就可以了(在ps里可以粘贴成适量对象,我觉得这很废话,相信各位都会)。

Photosho里的矢量工具

但是,我们如何用photogshop做呢?photoshop不是矢量软件,这不表示ps不能做矢量图片,形状图层就可以制作出完美的矢量图像,放大两倍完全不是问题。

快速处理图片

现在有个关键问题,设计师们放大或缩小图片不是什么问题,但是如果你 已经做好了你的网页,然后你想让这个页面也支持视网膜屏幕,我想你也不能毫无办法的把页面上的图片去重新做一份两倍大小的吧。盲目的放大 又会产生锯齿。下面就是我的办法:在图像—图像大小里面有个选择叫“邻近”。 这个操作对于小图标和单色图像很有用处,虽然不如矢量图片放大两倍之后 的效果好,不过在时间紧急的时候是个不错的选择。

将大图缩小成小图的办法是否可行?

你也许会问我做一张大图,然后缩小一倍,这样不行吗? 理论上来说,在印刷领域这是没啥问题的,不过在网页设计当中,是以像素为基础的,以至于我们缩小图片之后,也会产生锯齿,而且图片越小锯齿越明显!

将图片用代码的方式表现

当我们把这一大一小两张图片都准备好了,就可以把他们加到网页里面了, 我们首先重命名一下那些大图,比如s.jpg。

Javascript这样做

<script src="js/retina.js"></script>

第一是很简单的,把图片关联到retina.js.script,如上所示:

CSS这样做

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {header h1 a {background-image: url(images/blogspoon-logo@2x.png);background-size: 164px 148px;}}

然后,手动的添加css样式,添加代码:(如上) min0-device-pixel-ratio:2,是看设备是否是高分辨率的视网膜屏幕 background则是设置背景图片的尺寸。

HTML这样做

<img src="images/snarf@2x.jpg" width="300px" height="150px" />

上述的css办法对背景图片来说很给力,但是对于页面的图片来说,你需要去调整一下标签。调整图片的高和宽的数值,使图片大小成为标准大小 (如上)

好嘞!完成以上操作,您就可以让访问者通过他们的视网膜屏幕更清晰锐利的访问您的网页作品了,是不是很酷?赶紧来改造您的页面吧。

《Pennant》是一款为美国棒球职业联赛发烧友制作的软件,它可以查看1952年到2010年间的超过115000场比赛数据,这款iPad软件ui设计非常棒,超酷的数据可视化,重新审视数据图表,让你知道数据是有生命的,里面包含了动态的柱图、条图、饼图、气泡图、南丁格尔玫瑰图等生动的数据图表。

image

Pennant 界面


Pennant 视频演示

怀着敬畏,好奇,崇拜的真心接受了科普。这个方法表面看起来很简单,但是其实要做好还是很难的!!一定要做到同步,即使有个零点几秒的误差也会被远处的敌人辨别出来。即使以后晚归的时候开门、脱鞋之类的,怕吵醒家人也可以试试这个方法,无声无息,益处多多!

基于CSS3的动画越来越火爆,各大网站都开始尝试使用CSS3来达到更炫的用户体验,Google的logo也一次次吸引着大家的眼球,但光鲜的CSS3动画后面,可能是前端攻城师不断修改查看修改查看反复的一个过程,对时间、位置的精确把控,意味着巨大的工作量,于是,iAnimator来了!


简介

动画制作软件一般为本地客户端软件,如Sencha Animator 、EDGE等,功能非常强大,但是生成的代码过于庞大臃肿,并且收费,而iAnimator采用WEB方式来实现可视化的CSS3动画制作,轻巧、快速,可扩展性强

基于iAnimator制作动画,因为可视化,及预置的特效,及众多属性面板,可以大大提高动画制作的精确性,减轻前端开发人员工作量

主界面

iAnimator - CSS3动画制作工具!前端攻城湿必备工具!iAnimator主界面

特色

 1、批量上传图片素材

iAnimator - CSS3动画制作工具!前端攻城湿必备工具!

 2、丰富的属性面板

iAnimator - CSS3动画制作工具!前端攻城湿必备工具!

 3、图层、帧的灵活控制

iAnimator - CSS3动画制作工具!前端攻城湿必备工具!

 4、可视化图层编辑

iAnimator - CSS3动画制作工具!前端攻城湿必备工具!

 5、丰富的特效库

iAnimator - CSS3动画制作工具!前端攻城湿必备工具!

 6、快速预览

iAnimator - CSS3动画制作工具!前端攻城湿必备工具!

 7、快速集成

iAnimator - CSS3动画制作工具!前端攻城湿必备工具!

iAnimator - CSS3动画制作工具!前端攻城湿必备工具!

后期的一些想法

1、图层将支持父层、子层,以更灵活的管理图层

2、加入 锁定、可见 快捷按钮

3、属性面板支持 更多的CSS3属性,如box-shadow、text-shadow

4、系统对firefox的支持

5、动画对IE、opera的支持

6、图层帧间的状态更多清晰的展示出来

7、加入事件驱动,如mouseover、click触发动画

8、加入场景,结合事件驱动,在不同场影之间的动画切换,将动画制作更加气势磅礴


另:

代码托管于git上,如果有兴趣的朋友,可以参与进来一起维护,谢谢

https://github.com/kundy/iAnimator

PS:该项目是组内牛人kundy开发的一个工具,已经在Qzone的一些项目中使用,很赞的说,省时省力效果好。

相关文件下载地址:

官方网站:http://ianimator.kundy.net/

Powered By Z-BlogPHP 1.5 Zero

Copyright webexp.cn Rights Reserved.

本站基于 阿里云服务器 + Ename域名 + Z-Blog 构建   |   站点地图   |   辽ICP备13003381号-4