首页 > 龙岗网站设计 > 网站设计领域CSS的提示和技巧
2017
04-11

网站设计领域CSS的提示和技巧

网站设计领域CSS的提示和技巧
spriting是技能在网站设计领域获得大量的信誉。我们最初看到这些技术适用于高流量的网站,如雅虎!和Digg。随着时间的推移,即使是小规模的Web应用程序开始应用精灵的前端设计规格。

我们会在一些主要的好处,对你的网站设计使用精灵图像。好处是可以通用的图标,发现图形、背景图案等等。也有许多无法识别的工具前端雪碧发展和缩短项目。

为什么使用精灵?

一个简短的描述spriting据了解最简单的前端开发技术。而不是保存按钮和图标作为单独的图像应该结合成一个单一的图像文件,使用CSS定位之间的移动。作为一个例子,一个按钮的设计可能有3个州–标准,悬停,并单击“添加到一个文件–彼此间隔。

带来的好处是明显的因为他们都指向网站优化。下载一个单一的Sprite图像需要更少的时间,只需要一个单一的HTTP请求。这可能看起来不是很多游客100日,但随着时间的推移,你会认识到巨大的性能优势。

这个概念也可以应用到不只是按钮但几乎任何图形。背景图片在形式和页面元素是最优雅的。精灵也可以解释许多网页图标如警报和信息块。
如何实现方式

步骤是相当简单的实现一个通用的精灵形象。这个过程的第一链是搞清楚什么图像应该包含在你的精灵图形。这是最值得注意的是,与精确的宽度/高度要适合每个图标图像内的PNG文件。

你可以如果你发现过程更容易添加额外的填充元素之间。多余的空格一般不会增加太多的图像文件,虽然全优化最好是偷工减料,尽可能。
41133.jpg

如果你是一个精心设计,有时间看看细节建议玩弄你的核心文件。许多设计师调用这个对象掌握图像。尝试处理每个图标等图形软件Adobe Photoshop检查文件大小。在某些情况下,每个单独的图标文件的总和将比持有一个掌握图像。

在这一点上你要把注意力集中在每一个图像到您的网页。这可以通过CSS背景属性url()方法下面是一个应用相同的图像分成若干要素的例子。

。地球,
 
。编辑,
 
。保存,
 
。错误,
 
。成功{
 
背景:url(' / IMG /图标。png”)没有重复;

从这我们也采用同样的背景图像分成不同的类。从这里我们可以知道这些将用来显示为代表的图标。现在这对我们并没有什么帮助,但是,因为我们得到的是我们平面打过同一块。CSS也有背景位置属性移动图标和网页元素。

。全球{背景位置:0 20px;}
 
。编辑{背景位置:0 40px;}
 
。保存{背景位置:0 60px;}

在以上示例代码我们有3类的前面。我们所做的是把每个类的图标相对的形象定位。这种特殊的图形有每个图标下面的一个又一个垂直间隔由20px每。这是我们不断向下移动的位置每次20px原因。
CSS修改

现在,我们的核心数据集创建额外的规则,明确每一页的项目很简单。很多时候你不能指望把图标作为背景图像,一切都会顺利的。额外的填充到任何块元素的边缘的加入会给背景图标闪耀的房间。

这是特别真实的案例雪碧的网站导航菜单。如果你显示在你的导航栏很重要有间距对齐。这可能需要与改进数的一些时间,但一旦一切都是你的设计看起来金黄!

使用翻转效果时,也很容易这样做因为你处理相同的图像尺寸。所需要的是一个完美的镜头在侧翻和标准的链路状态。在利用网格线Adobe Photoshop你可以把你应该搬到/右,精确匹配的像素多少。
最好的精神资源工具

网上有很多个人的工具来帮助精灵的创建和操作。我遇到的最容易的是spriteme它提供了这些工具大部分合而为一。你可以拖拽上传单个图像文件和服务将放在最有效的方式。

不仅如此,发电机就会吐出每个图像的精确坐标在主文件。这是因为许多开发商花了几个小时试图把布局的正常工作,在这个层面上失去焦点的祝福。这样的工具spriteme可以节省项目时间和繁重的工作小时。

雪碧图像的生成不是一个关键的发展在设计行业。它有很多的承诺向高端性能结果和减少丢失的数据包。进入作为一个网页设计师,因为大多数的客户都将享受到更快的加载时间,这是一个很好的实践。这个过程也让事情变得更容易,当谈到滚动效果。

即使没有任何图形设计软件,你仍然可以轻松地创建和管理一个主精灵形象。除了SpriteMe有许多在线工具提供类似服务。如果在页面跳转研究一些选项看。虽然精灵是一个工具,使用它需要一个网页设计师的工具箱创建吸引人的用户意识的设计。


本文》有 0 条评论

留下一个回复