除了主页之外,网站还有七个不同的主要区域。因此,我聘请了七位不同的插画家进行设计。这是我们将要深入研究并将其实施到网站中的第一个。它是网站的画廊部分,由Erica Sirotich完成。
我们调整HTML和CSS以腾出顶部标题的空间,这基本上是通过填充实现的。
我们使用Photoshop进行了一些调整大小操作,以使插图达到我们想要的大小。目前非常大,但我们将来可能会做一些更智能的事情,以便根据当前屏幕尺寸加载适当大小的标题图形。
我们采用的一个小技巧是在page-wrap中添加大量底部边距,因此页面末尾在底部有一些空白纹理,这为设计提供了最终效果(至少目前是这样,直到我们处理页脚)。
我们完成了画廊标题的设置,但我们还需要对其进行一些工作,添加Erica作为此插图一部分绘制的小蓝色人物插图。
你好,Chris。非常喜欢这个屏幕录制和重新设计。
我偶然发现了这种隐藏文本的方法,而无需使用文本缩进或负上/左值。
我记得我读到过,如果您使用文本缩进或负值,浏览器仍然会渲染一个大小为(-9999)的框,该框位于屏幕视图之外,但下面的代码不会这样做。
font: 0/0 a;<br/>
text-shadow: none;<br/>
color: transparent;
更多信息请参见此处:http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/
实际上,这并不重要。是的,一个框会绘制到屏幕外,但我认为唯一对性能造成影响的浏览器是最初软件上的iPad 1。这种方法不会这样做,但在技术上是无效的CSS,随之而来的是自身的风险。
Compass有一个很酷的功能,您可以使用
image-url('image-name-with-no-path.png')
代替基本的url()
来表示图像,因此如果路径发生更改,您只需在config.rb中更改它即可。(他们还为其他内容提供了一个,包括字体(即
font-url()
),但该路径似乎在config.rb中默认未定义,但您可以添加它。)