前端经验

这里用到的技巧也很简单,就是在图片之前创建一个<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办法对背景图片来说很给力,但是对于页面的图片来说,你需要去调整一下标签。调整图片的高和宽的数值,使图片大小成为标准大小 (如上)

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

说到网页的创意设计,你会有什么好的想法呢?今天收集分享:14个创意的网页设计作品,希望其中有你喜欢和需要的,或者可以给你带来灵感的。


1.geckoboard



2.flutter app



3.podio



4.collatebox



5.getballpark



6.mailchimp



7.codecademy



8.ducksboard



9.skitch



10.kaleidoscope app



11.influads



12.venmo



13.testflight app



14.cueup

关于游戏网站,有一个你不知道的事实,它已经成为了业界最赚钱的项目之一。如果您对游戏充满激情,如果你想跟大家一起分享你最喜欢的游戏心得、攻略、新闻甚至建议,那么这篇文章将是你绝不能错过的必读内容了,因为,也许您也正在准备设计一个这种类型的网站,或者您想在更多优秀作品中寻找你的设计灵感?是的,它们就在这里!

这里为你准备了46个能给你带来灵感的游戏网站设计!

1. 4 Sale Gaming AndasoloARTS

灵感的干货!46个为你带来灵感的游戏网站设计!4 Sale Gaming AndasoloARTS

2. sYnergy Gaming by xxxnemesis


3. NeXus Gaming by AndasoloARTS

灵感的干货!46个为你带来灵感的游戏网站设计!NeXus Gaming by AndasoloARTS

4. Renegade Gaming by prld


5. Eweb by dcjutty

灵感的干货!46个为你带来灵感的游戏网站设计!Eweb by dcjutty

6. Quero Sports by AndasoloARTS

灵感的干货!46个为你带来灵感的游戏网站设计!Quero Sports by AndasoloARTS

7. Visual Zone by zblowfish

灵感的干货!46个为你带来灵感的游戏网站设计!Visual Zone by zblowfish

8. Warfare by tobimo

灵感的干货!46个为你带来灵感的游戏网站设计!Warfare by tobimo

9. Clandesign IV by der-sebastian

灵感的干货!46个为你带来灵感的游戏网站设计!Clandesign IV by der-sebastian

10. SaturnPlay by AndasoloARTS

灵感的干货!46个为你带来灵感的游戏网站设计!SaturnPlay by AndasoloARTS

11. DInvictus by tobimo

灵感的干货!46个为你带来灵感的游戏网站设计!DInvictus by tobimo

12. TV Gaming by moelle


13. Mojawi gaming by Humadesign

灵感的干货!46个为你带来灵感的游戏网站设计!Mojawi gaming by Humadesign

14. Clandesign III by der-sebastian


15. Gaming by Raizercry

灵感的干货!46个为你带来灵感的游戏网站设计!Gaming by Raizercry

16. United Gaming by jN89


17. eSports by akses

灵感的干货!46个为你带来灵感的游戏网站设计!eSports by akses

18. StarQ by ~tobimo


19. Exxis Dawn by akses

灵感的干货!46个为你带来灵感的游戏网站设计!Exxis Dawn by akses

20. Clan Website by Jerome118


21. Powerful by ~iSHOKZ

灵感的干货!46个为你带来灵感的游戏网站设计!Powerful by ~iSHOKZ

22. Driven by michaeltinnin

灵感的干货!46个为你带来灵感的游戏网站设计!Driven by michaeltinnin

23. Visual by ~Jerome118


24. Impossible Gaming by iSHOKZ

灵感的干货!46个为你带来灵感的游戏网站设计!Impossible Gaming by iSHOKZ

25. AmazeSports by AndasoloARTS

灵感的干货!46个为你带来灵感的游戏网站设计!AmazeSports by AndasoloARTS

26. eCortys by tasii

灵感的干货!46个为你带来灵感的游戏网站设计!eCortys by tasii

27. Team Rage by Kugell

灵感的干货!46个为你带来灵感的游戏网站设计!Team Rage by Kugell

28. Aeiou by BAS-design

灵感的干货!46个为你带来灵感的游戏网站设计!Aeiou by BAS-design

29. Area 51 by Techmaster05

灵感的干货!46个为你带来灵感的游戏网站设计!Area 51 by Techmaster05

30. Encor by Pixelbauer

灵感的干货!46个为你带来灵感的游戏网站设计!Encor by Pixelbauer

31. Alien Gaming by r93-design

灵感的干货!46个为你带来灵感的游戏网站设计!Alien Gaming by r93-design

32. Area 51 Gaming by AquaDesiree

灵感的干货!46个为你带来灵感的游戏网站设计!Area 51 Gaming by AquaDesiree

33. Another one by xxxnemesis

灵感的干货!46个为你带来灵感的游戏网站设计!Another one by xxxnemesis

34. Refused by vNyL

灵感的干货!46个为你带来灵感的游戏网站设计!Refused by vNyL

35. skkr by zARTs


36. Mindless Gaming by Simon Schiener

灵感的干货!46个为你带来灵感的游戏网站设计!Mindless Gaming by Simon Schiener

37. Team Optic Gaming by Jerome118

灵感的干货!46个为你带来灵感的游戏网站设计!Team Optic Gaming by Jerome118

38. Id Gaming by ~Seeki

灵感的干货!46个为你带来灵感的游戏网站设计!Id Gaming by ~Seeki

39. Effect Gaming by RomiSh

灵感的干货!46个为你带来灵感的游戏网站设计!Effect Gaming by RomiSh

40. Team GamerArea by ~Simon-Schiener

灵感的干货!46个为你带来灵感的游戏网站设计!Team GamerArea by ~Simon-Schiener

41. Pandora Clandesign by ~Simon-Schiener

灵感的干货!46个为你带来灵感的游戏网站设计!Pandora Clandesign by ~Simon-Schiener

42. Exitus Gaming by ~tondowebmedia

灵感的干货!46个为你带来灵感的游戏网站设计!Exitus Gaming by ~tondowebmedia

43. Gaming Site by ~Moddog

压缩包里面有网页模版、常用的界面、以及icon图标等,没睡的同学,可以来领货哟。有些psd里的背景纹理也不错,设计的时候可以直接取了用,不要呼哧呼哧的每次都自己做。


里面一共有39个文件夹,超过39个psd源文件,希望大家能喜欢!


下载地址:新浪微盘 | 来自禄's Blog

末日之后做什么?求婚!2012年12月23日,46年来最冷的一天,北京三里屯上演史上最“冻”人求婚,企鹅舞和混血萝莉简直莔翻了!男主角送上25件圣诞礼物!女神林志玲竟然也来加油!速速围观。

image

12.23北京三里屯Village最“冻”人求婚

2012年度巨搞笑收集了大家身边的那些二货损友们,整蛊你来没商量,阴招损招狠招层出不穷,让你应接不暇。不得不感叹,不怕猪一样的队友,就怕狼一样的损友……

image

2012年度巨搞笑视频集锦


周杰伦全新专辑《十二新作》最新主打《公公偏头痛》 MV 官方版。歌曲由 方文山 与 周杰伦 联手创作,MV力邀模彷天王邰智源饰演公公一角,MV中周董穿着改良过的朝臣服饰,古装打扮依然「潮味」十足!还是一样的中国风,还是一样的听不清!

image

周董这口齿,还是和十年前一样,听不清啊听不清!终于有以前的感觉了~很快,很吊,很中国,很好听!

MV官方版

相信和我一样喜欢《行尸走肉》的美剧迷们不在少数,而最新统计的2012年度社交网络热门电视节目排行出炉,《行尸走肉》轻松前十!!!屌爆了!这里特地收集了30+《行尸走肉》的壁纸,献给各位粉丝们,各种高清,最后一张居然你们猜猜他是谁?!We are walking dead!!!喜欢就收了吧!


30+《行尸走肉》壁纸抢先看


相关下载地址:

新浪微盘  |  百度网盘  |  来自禄's Blog

Powered By Z-BlogPHP 1.5 Zero

Copyright webexp.cn Rights Reserved.

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