当前位置:海盈网站工作室 >> 新闻中心 >> 设计前沿

CSS禅意花园 - 图片 - No Frontiers!(一)

点击数:21802012-10-23 10:04:55 来源: 海盈网络

      用圆角图像打破方框的束缚

      CSS设计中占支配地位的趋势就是居中、固定宽度的布局加上阴影效果——但Michal Mokrzycki却希望在其作品No Frontiersl中打破这一惯例。 Mokrzycki决定不限制他的三栏布局的宽度,让其可以随浏览器窗口大小的变化而自动调整。作品将尽可能地简洁,但仍足够优雅、独特。


CSS禅意花园 - No Frontiers!



      与其他严格遵守设计流程的设计师不同,Mokrzycki在设计时更喜欢即兴创作。他首先在自己的照片库里找到了合适的素材,然后不停切换于CSS和Adobe Photoshop之间,以实现他的灵感。在这个过程中,Mokrzycki发现了CSS的强大之处就在于它能够让设计师完全无拘无束地进行创作,这,也正是该作品被命名为No Frontiers!的原因。


      4.4.1 方框问题

      Web页面在历史上一直看起来如盒子一般四四方方,这并不是个意外。但具有讽刺意味的是有些人却批评CSS布局是引发这一问题的罪魁祸首!早期基于表格布局的作品均大量使用了边框和内边距,这也使此类作品看起来似乎是由一个个方框组成,页面元素之间也缺少了联系。

      那时大多数个人计算机的屏幕分辨率只有640像素×480像素——与今天的大屏幕比起来显得非常小,自然空间也变得极为珍贵。加上浏览器方框界面和计算机屏幕方框外形带来的暗示,我们只能继续在方框中不停地嵌入另外的方框。

      从视觉角度考虑,将信息埋没在一个又一个的方框中并不能使浏览者轻松找到。当然,那是一个随心所欲的时代-Web刚刚出现不久,无论是设计师还是用户都被其深深吸引,自然也就不会对界面样式太过于挑剔。

      因此,当CSS这种新的、专注于视觉表现的布局方法出现时,大多数人都在考虑如何将他们从前熟悉的表格布局改为用CSS实现。人们对分栏布局的关注,以及随后为这类布局添加的一系列修饰(例如边框)均很自然地导致早期的CSS作品被人诟病为滥用方框。

      说css对方框问题负有主要责任显得有失偏颇。随着我们越来越深入地7解CSS,包括聪明地使用图像I特别是在背景图像使用上),用层将图形、图案等装饰元素组合起来等.CSS布局模型能够实现的效果已经远远超过了从前表格布局的效果。

      No Frontiers!就通过圆角形状的装饰替代了方框那单调的边缘,整个作品给人的感觉也显得更加柔和、统一。

      4.4.2 买现曲线效果

      No Frontiers!中演示了很多为作品添加曲线效果的方法,让作品摆脱“四四方方”的样子。这些方法都需要这样或那样的背景图像支持。

      1.简单曲线:单一背景图像实现

      最简单的为作品添加曲线效果的方法就是创建一张带有曲线且内容部分空白的图像。然后用CSS将其设置为某元素的背景即可。


      本文为《CSS禅意花园》连载系列,版权归原作者及出版社所有,请勿用于商业目的活动,我们谨向原作者及CSS禅意花园网站表示敬意。
      海盈网站工作室采用标准的DIV+CSS布局制作各类型企业、行业网站,同时提供手机网站制作网站维护等全方位专业服务,欢迎咨询。

【责任编辑:(Top) 返回页面顶端