菜单

网页无图再不是可望

2019年2月8日 - CSS/CSS3

网页无图再不是希望

2015/08/22 · HTML5 · 1
评论
·
网页开发

原稿出处: 百码山庄   

直接以来,网页开发对优化方面做的行事没有停歇。网页无图也是为了减少页面资源请求而提议的一种畅想。无可厚非在网页开发的进度中在网页无图方面大家已经取得了彪炳史册的做到:从一开首零星的小图标资源,到新兴小图标合并成一个图形出现百事可乐图,再到新兴Webfont的产出不仅可以代表7-Up图,而且彻底解决了图标管理难,变色达成麻烦的题材。今日自己要跟大家介绍一个小工具,也是能够支持完毕网页无图这一终极目的。理论上来讲,它可以将其他一张图片转换成一个不带图片,不带背景图的净化的html标签。可是这有前提:你的处理器得有丰富的资源去支撑。

 Liya – 2015年8月31日

缘起

那是一个工作日的早上,我向过去同样如期而至了工作岗位上,启动电脑,打开浏览器我有时候发现了一篇名曰《18个你也许不信任是用CSS制作出来的东西》的篇章,出于职业敏感,也出于好奇我就点进去看了一看,发现里面有一个很风趣的文章:http://codepen.io/HugoGiraudel/full/gpcwa/,它不过用一个div标签就形成了这幅文章,于是大家多少个同事好奇使然,开头分析它的完成,逐渐有了下边即将介绍的工具的阴影。


渐入主题

既然可以利用一个标签制作出一副突出的像素图,那么是不是就表示可以用一个标签还原任一一张图纸?唯一无法回复的是图表的精细度问题。不过,如果得以精细到每一个像素点,那么高精度的还原整张图也全然可行,只是那自然消耗相当多的电脑资源。这一考虑便是催生这一个小工具的催化剂,于是自己便开头盘算起来。

当女神潘潘导师问我是否精通网页设计中的栅格系统,为何要利用栅格系统时,脑中能想到的唯有,“坚守栅格使网页看起来整齐规范”,“方便重构”,“有利于响应式布局”。。。其实对栅格系统只是一孔之见,并没有系统长远的驾驭,于是做了些功课,整理出那篇小说,希望能给新接触网页设计的伙伴们一点参照。

案例剖析

因而选用开发者工具分析以上案例的源码,我发觉其实它的达成并不难。我们精通在CSS3中新增了一个设置盒子阴影的box-shadow属性,而以此特性可以同时安装任意七个不等颜色和扩散度的阴影块,而案例正是完美的诠释了这一个新属性。

既然如此,那么大家后天来做个考试,大家在任一一张图上覆盖上一个个大大小小一样的小方格子,我们就可以将其他一张图纸分隔成一个个的小方格,大家只要知道那几个小方格的分寸、顺序和地方,我们就足以组成那张图纸,如下相比图所示:

图片 1

只是,有个难点:box-shadow的引用颜色是单色的,而种种盒子范围内的绘画是复杂的,我们怎么去处理那一个标题?

因为box-shadow只可以设置颜色,所以那几个难点的结果唯有一个,找出一个能代表那么些格子的颜色,那么选拔哪一个颜色值就不分厚薄了,可以选格子四角的妄动一个、可选主旨点,可选格子内的随机一个点,我接纳的是格子的左上角这些点。我们简单窥见,倘诺大家尽量的裁减格子,小到只剩余一个像素大小,大家就能够完全的苏醒一张图纸了。

栅格系统的多变

栅格系统(Grid
system)最早选用在17世纪末的法兰西印刷业,出版业。维基百科对其定义为:栅格设计系统(又称网格设计系统、标准尺寸系统、程序版面设计、瑞士联邦平面设计风格、国际主义平面设计风格),是一种平面设计的方式与风格。网页栅格系统是有平面栅格系统中前进而来,以规则的网格阵列来指引和正式网页中的版面布局以及信息分布。

技能已毕

首先,大家着想怎么着根据图片去取到每个格子的颜色值?这么些题材并简单,HTML5为大家提供了Canvas标签,而因此Canvas大家得以选取getImageData方法取获得画布中任一一个点的颜料新闻以及透明度音信。

下一场,大家来考虑什么统筹大家的小工具。第一步,依照差其他图纸可能会顺应区其他格子大小,所以我会保留一个size选项用于安装盒子的大小;第二步,格子与格子之间是还是不是保留间隙,可能基于用户习惯会有分化,所以自己提供space选项来安装间隙大小;第三步,格子实际就是一个盒子的中间一个阴影,而阴影的模样是可以依照盒子本身暴发变化的,所以我提供radius属性来陈设格子圆角大小;最终,既然大家赢得的将是一个html标签,那么标签是可以分包各类品质的(比如:id、class等),所以我提供一个attrs属性(一个json对象),来安装生成的html元素的属性。好了,万事俱备,只欠代码完毕了!

终极,我们梳理逻辑,封装代码,落成了最基础的版本。效果如下演示:

图片 2

为了便于大家看看更实在的效应,那里给我们提供在线DEMO

栅格系统的法则

栅格系统能够按栅格数分为12列,16列,24列等,可以随心所欲设计栅格宽度和栅格与栅格间宽度。如下图所示,记页面或区块宽度为W,A代表一个栅格单元的肥瘦,a代表一个栅格的大幅度,i为栅格与栅格之间的离开,n为正整数,则有W=(a*n)+(n-1)*i,由于A=a+i,可得(A*n)-i=W。

                                 (A*n)-i = W

本条公式表述了网页的布局与网页背后栅格系统里面的关联。来考察经典的雅虎案例:

Yahoo的网站页面宽度为W=950px,每个区块与区块的区间为i=10px;假设运用方面的公式,可以生产A=40px,既Yahoo首页横向版式设计使用的栅格系统为:(40×n)-
10 =
W。只要有限支撑一个横向维度的逐条区块的n值相加等于24,即可保险页面的幅度一定是950px,950px的肥瘦也恰恰就是当n=24的时候,W的增幅值。

在栅格系统中,设计师依据需求指定差其余版式或者私分区块改变A和i的值举行统筹,这样,一个栅格系统的利用就未来初叶了。

据悉12列的栅格划分

总结

从成效上来看,我达成了图片到html元素的转移,可是或许并非是最好的网页无图完毕方案,因为工具转换出的HTML标签,设置了太多的阴影块,对浏览器的渲染并不和谐,会对用户电脑硬件有肯定的渴求,尤其是块大小为1(即全部还原图片)的时候,转换进程卓殊缓慢,倘使图片再大些,极有可能导致用户浏览器崩溃,因而提议大家测试时慎用大图做测试。而且,转换后获取的html标签和样式字符串大小将有可能远远领先图片本身的高低,所以我只可以说那是一种有效的技艺方案,但未必是好的兑现方案。(然并卵)

1 赞 4 收藏 1
评论

图片 3

经典960栅格

设计师们偏爱用苹果系统做设计,苹果下浏览器的默许宽度为960px, 在 1024 x
768 的分辨率下,大家再打开Firefox,自然状态下,Firefox窗体的大小约为 974
x 650. 减掉左右两边7px的边框,网页的骨子里尺寸为上图中的蓝色部分,高宽为
960 x 650.有趣的960就这么出现了。960只是个标志,并不是标准数。

上边列举的都是大型门户网站,它们的首页宽度为950px/960px。除了微软的Live
Search。依照上边的简练解析可以认为:当搭建页面结构复杂的门户型网站时,开发工程师们不约而同地都接纳将页面宽度定为950px/960px。为啥要选拔那几个宽度呢?大家从数学最先:960足以分解为2的6次方乘以3和5,
那使得960得以划分成以下宽度的整数倍:

2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80,
96, 120, 160, 192, 240, 320, 480

共26种(26 = 7 * 2 * 2 – 2, 减去2是去掉1和960自家),我们标记为:

N(960) = N(2^6 * 3 * 5) = 26

基于地方的算法,可以取得:

N(360) = N(2^3 \ 3^2 * 5) = 22*

N(480) = N(2^5 \ 3 * 5) = 22*

N(720) = N(2^4 \ 3^2 * 5) = 28*

N(750) = N(2 \ 3 * 5^3) = 14*

N(800) = N(2^5 \ 5^2) = 16*

N(960) = N(2^6 \ 3 * 5) = 26*

N(1000) = N(2^3 \ 5^3) = 14*

N(1024) = N(2^10) = 9

N(1440) = N(2^6 \ 3^2 * 5) = 34*

N(1920) = N(2^7 \ 3 * 5) = 30*

N越大,可结合的宽窄值就愈多。对栅格系统的话,那代表越灵活。

时下多数显示屏都协助 1024 x 768
及其以上分辨率。为了使得的利用显示屏宽度同时确保栅格的灵活度,可以见见960是那个体面的。那样,在此时此刻主流荧屏下,960就改为网页栅格系统中的最佳宽度了,也许不久的明日,将会流行1440。

动用栅格系统的优势

对此设计师来说,栅格系统更加多的是一种布局考虑,可以更有逻辑地拓展设计工作。灵活地运用栅格系统,不仅可以让整个网站相继页面的布局保持一致,让网页的音讯突显更为美妙易读,让规划稿有更好的布局,更能够通过匹配分歧组合,做出过多不错和特有的排版设计。使用网格系统,可以使网页设计给用户正式感和规范感,还拥有一种结构明显的设计感,提升用户体验。网格系统不代表鲁人持竿,一味根据网格线来进行布局。网格系统的意义在于更灵活的声援设计师有序布局,而不是限量设计师的宏图。

对往日端开发职员的话,栅格系统的采纳,给全体网站的页面结构定义了一个标准,大大升高了网页的规范性。在栅格系统下,页面中拥有组件的尺码都是有规律的可选取的,那对于大型网站的付出和护卫的话,能节约不少资产。

乘机响应式设计的流行,栅格系统先河被授予新的含义,那就是,一种响应式设计的贯彻格局。响应式的中央思想是为同一个页面设计多样搭架子形态,分别适配分裂屏幕尺寸的装置。

能够阅览,一个页面可以拆分成多个区块来明白,而正是那一个区块共同组成了这一个页面的布局。根据分歧的显示屏尺寸意况,调整那些区块的排版,就足以已毕响应式设计。而借助栅格系统,设计与前端开发人士可以很不难的规划和创办响应式的页面布局。

栅格系统是一种格式化的规划工具,使用栅格系统是一种好的习惯,设计师可以更让人瞩目于内容呈递,更注意于强调根本。当然,规矩是用来打破的,当大家驾驭了布局的见识,了然了栅格的伎俩之后,也无需拘泥于栅格的款型,可以对其“革命”,进行翻新。

资源干货

对此新手来说,使用栅格系统有早晚的财力,须要数学基础,懂比例,会总括,但现在互联网上曾经有过多帮忙设计栅格系统的工具和模版,可以即拿即用。那里介绍多少个常用工具。

960.GS

动用960.GS相应是最简便易行的栅格方法,下载960栅格系统,地址http://960.gs/集合图层,置入网页文件,选用混合形式叠加,并锁定,便得以服从其栅格设计网页。

GuideGuide

本条是免费的好用PS外挂,输入数值就会活动画参考线。在规划网页前先将参考线全体拉出来。至于哪些设置和操作方法,网络上已经重重人写了,可以参照那里:PS
参考线插件GUIDEGUIDE下载及运用验证

WebZap

另一款PS外挂神器,但是要付钱,拥有无敌的布局爆发器,可只通过点击操作,在几分钟内做出网页原型。下载和演示地址:http://webzap.uiparade.com/

参考文章

网站网页栅格化

Grid的运用:ps外挂

网页的栅格系统规划

网页设计中的960栅格系统

Maintainable responsive
layouts

Using the 960 Grid System as a Design
Framework

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图