这个网站上有两种绘图,他们永远不被允许触碰彼此。这个规则听起来很珍贵当我这样写的时候,但它是真的使标题和背景停止为注意力战的事情。
问题它解决
早期,页面上的一切以相同的方式被绘图:像素网格精灵,硬边,一个SVG<rect>每个细胞。标题山,鸟,全部。它看起来罚款向上关闭而且完全平坦一旦你添加了任何东西意味着坐更加回到,像一个背景轮廓在文本列后。多块像素读作一个「远处的山在霾」不工作,距离在真实的视觉是柔软的,不是块的。但去完整光滑到处杀死了东西我实际上喜欢关于像素艺术的,那是它读作故意的而且手工制作而不是一个库存矢量插图。
修复不是选择一个风格。它决定,故意,哪些元素得到是脆的而且哪些得到是柔软的,而且从不让一个元素跨越两者。
近:一切你直接看在
标题而且页脚地平线条,小nav字形旁边每个部分链接,BMK字母图的山标志,404鹼鸟,月亮/太阳图标在主题转换,以及每个鸟而且鱼那真的飞或游泳跨过天空而且岸线。全部像素网格。全部构建相同的方式:我草绘形状作为ASCII网格在注解在组件顶部第一,一个字符每个细胞,在写SVG的单行之前:
// ......................RRR.MM.....................
// .....................RRRRRMM.....................
// .....................RRRRRR.....................
// ....................RRRRRRRR.....................那是实际的顶部的高标题地平线,R对于岩石,.对于打开天空,M对于月亮那只显示向上在暗模式。一旦网格读对作为ASCII,我转换它进合并<rect>运行(相邻同颜色细胞在一排塌陷进一个更宽的rect而不是一个每个细胞,什么保持DOM从膨胀在48列网格)与preserveAspectRatio="none"所以整个条带伸展填充它的容器边对边而无需曾经溅出来在奇怪的视口宽。
远:一切意味着坐回
背景岛轮廓是那个的反对。它是一个连续的形状,追踪与三次-贝塞尔曲线从一个真实参考照片我拍了Lovundfjellet,不是草绘细胞对细胞:
const MOUNTAIN_PATH =
'M145,300' +
'C160,250 175,210 195,180' +
'C210,158 225,140 240,133' +
'C258,140 275,155 290,170' +
'C305,195 320,225 335,260' +
...同样真实的山,同样的真真实的两峰侧线(我真的追踪像素版本第一,在确切的相同列而且行坐标,然后转换那些锚点进光滑的曲线为这个通过而不是开始超过从草绘)但被呈现作为一个柔软的质量而不是一个跨越的轮廓。坐在内容列后面在低不透明度,它读作气氛,方式一个真实的山做当有一个村庄而且一个水伸展在你而且它之间。晚上星座层工作相同的方式,真实的星位置,但被绘作柔软填充的圆而不是像素方,因为一个「远处」的星田由硬像素点会看像一个bug,不是天空。
为什么线条重要
规则我保持自己到是什么都不跨越两个注册。一个鸟精灵是任何一个像素细胞鸟飞跨过近层或一个光滑的轮廓环绕背景岛,从不一半个每一。时刻你混合他们在一个元素内,你的眼睛不能决定多远的东西有所谓是,而且整个深度幻觉塌陷。这是一个便宜的技巧一旦你看到它:脆的东西读关闭,柔软的东西读远,而且你不需要真的视差或模糊过滤器售卖「距离」,你只是需要一致的对待每元素并从不破裂你自己的规则中途。
我破裂它完全一次,早在重新设计,画一个光滑的背景鸟与一对硬像素口音在翼提示因为我思想它会「地面」轮廓有一点:
<!-- what I tried: smooth silhouette body, pixel-square wingtip accents -->
<path d={SILHOUETTE_PATH} class="soft-fill" />
<rect x="34" y="12" width="2" height="2" class="pixel-accent" />
<rect x="36" y="12" width="2" height="2" class="pixel-accent" />它只是看了像一个呈现的bug,像一个资产那失败到负载正确。取出了口音回在相同的会话一旦我在新眼睛的第二个早上看到它,回到一个连续的柔软填充路径以及没什么其他碰它。
部分我没有期待
我进去了这个想的它象一个纯视觉的技巧,近对远,前景对背景。什么真的售卖我在保持规则严格是它也匹配怎样注意力工作在页面。近注册元素都是东西我想要一个读者的眼睛到真的注册作为内容相邻细节,nav字形告诉你哪一个部分你在,鸟给页面生命。远注册材料是显式地装饰,aria-hidden,pointer-events: none,意思是被感觉而不是向下看。保持两个可视地明显打开出来也保持他们功能不同,那我没有计划但我高兴发生。