div+css

当前位置:地方网站工作室 >> 网络技术 >> div+css >> 浏览文章

5种在设计中应用光线和阴影的简单技法

文章来源:菏泽网站建设  文章作者:Rocs blog  日期:2009年08月31日
凡是你目光所及——光线和阴影无处不在。你看到的任何东西都反射回光线,也都或多或少产生阴影。光线和阴影帮助我们去感知我们的所见,并且帮助我们理解材质纹理、尺寸大小以及位置空间。

2、渐变

在真实世界种,几乎没有什么是单一色调的。光影无处不在。巧妙的渐变运用是让设计具有深度并让设计在屏幕之上变得真实生动的绝好方法。

渐变的关键点是不要太过生硬。如果你使用Photoshop,可在图层样式中添加渐变。你可以随意的设置渐变的起始点;如果你改变了元素的大小,那么渐变也将重新调整。

点击浏览下一页

案例

nclud’s website 是渐变运用的经典教案,它告诉我们即使细微的渐变也可以在分割和组织内容版面上取得非常好效果的。

点击浏览下一页

CSS Ninjas 给人的第一眼印象是单调的颜色,但细看之下每种颜色都有着细微的渐变,使其变得具有质感。

点击浏览下一页

3、高光

高光可以平衡阴影,并且需要在靠近光源的物体边缘上使用。巧妙的设计之下,高光往往被忽略掉,因为你甚至没有注意到它。虽然不是每一处设计都适用,但是一个细小的高光往往可以让界面在光亮度上显得不同。高光越“明晰”,界面呈现上就越显光亮。

要细致的体会高光,我们需要放大拉近观察它。添加高光的一个妙计就是在200%或者更大的放大比例下工作,因为原始尺寸之下你很难清楚地观察你所做的一切。

案例

Icon Dock 以及 Newism 两者都运用一个半透明白色线条以给页面元素的顶端边缘添加一个高光。几乎难以察觉的效果却让设计十分出彩。

点击浏览下一页

点击浏览下一页

你也许已经去过Apple的网站。但是,你也许没有注意到它导航栏中元素底部的漂亮的高光效果,这让导航文字变得凹凸有致。

点击浏览下一页

追求卓越 精心缔造 菏泽网站建设 地方网络工作室
上一篇:5个CSS3技术 实现设计增强!
下一篇:网页设计潮流之2009:路在何方?
相关文章

我们能为菏泽企业做什么?

菏泽企业网站建设
DIV+CSS布局技术、底层SEO规划设计、菏泽地方网络工作室为您提供优质网站建设服务!
SEO网站推广策划
菏泽唯一SEOwhy认证的SEOER,全面的SEO推广方案,为您量身定制SEO网站推广策划!
国内顶级服务器
新网互联、中国频道、美国主机、韩国主机、地方网络工作室只提供最优质的服务器主机!
《书生商友》商机群发软件
Booksir,一步到位彻底解决中小企业网络整合营销的书生商友营销引擎!

公告

怎么联系我们?

手机:18651363941
地址:由于菏泽生存压力巨大,本人现未居菏泽,在北京就值。如有业务需要,请直接电联。
联系人:刘峰 高娜
QQ:61572536
微信:61572536
邮箱:guf521@163.com

服务宗旨

因为执着 所以专业 追求卓越 精心缔造
售后为先 宁得罪新客户  不拖拉老客户
诚信为本 新互顶级域名空间  畅爽速度