Poul Gernes是一位非常丰富多彩的丹麦艺术家，家具设计师，也是艺术学校的创始人。他在1989年引起了很大的轰动，在那里，他将帕拉斯哥本哈根著名的，粉饰的电影院变成了非常非常丰富多彩的东西：
这并不是每个人的品味，但是现在，在30多年后，它是国宝。尽管所有者想续订它，但许多人认为应该保护建筑物。
2016年，在格恩斯（Gernes）去世20年后，在路易斯安那州著名的丹麦艺术博物馆举行了回顾展：
我完全忘记了Gernes的“点绘制”。它是如此简单，但催眠和美丽。
让我们代码它的交互式版本！
编码Gernes
海报是使用cqi-values在container中的一个简单的6列grid，因此它的响应能力。
点的大小需要一点数学：
海报周围的黑色框架是1.25cqi，内的填充是1cqi，而6个单元格之间的间隙也为1 cqi。那就是2 × 1.25 + 2 × 1 + 5 × 1 9.5cqi。
由于容器是100cqi，因此将90.5cqi留给了点，因此每个点是：
--sz: calc(90.5cqi / 6);
使其互动
如果您可以在每种颜色上单击，然后更改它，那不是很好吗？
我们可以用<input type="color">的样式来做到这一点，当然：
input {
--sz: calc(90.5cqi / 6);
background: transparent;
border: 0;
border-radius: 50%;
height: var(--sz);
padding: 0;
width: var(--sz);
&::-webkit-color-swatch,
&::-webkit-color-swatch-wrapper {
border: 0;
border-radius: inherit;
padding: 0;
}
}
接下来，穿过绘画中间的灰色线条。为此，我们将使用两个linear-gradient：
fieldset {
background-image:
linear-gradient(90deg, transparent 50%,
var(--line, #DFDFD1) calc(50% - 2px),
transparent calc(50% + 2px)),
linear-gradient(180deg, transparent 50%,
var(--line, #DFDFD1) calc(50% - 2px),
transparent calc(50% + 2px));
}
我认为海报上的主要字体是Hoefler＆Co。的 Gotham 。免费的字体类似于 futura ，最终获得了Jost。
font-size也用cqi-units指定，而且我们有一个交互式的gernes-poster：
单击点时，您会看到浏览器的内置颜色提取器：
在本文预先准备的时候，我搜索了Gernes，并找到了以上点绘制的另一个变体：
使用一个小的JavaScript-snippet，我们可以通过迭代所有<input type="color">并从一系列颜色的数组中设置新的value来轻松更新现有海报：
const dots = [
'#006951', '#005F64', '#005192', '#D5D111', '#59AF49', '#008956',
'#A43251', '#B32A39', '#DB2832', '#2F5295', '#52589B', '#7B547D',
'#FD9026', '#FFC11C', '#F7CF00', '#D9352C', '#E64B2D', '#F4682B',
'#35714D', '#B84F59', '#0D0D0D', '#00A6A2', '#58221A', '#E4DFD4',
'#213D1E', '#635B9F', '#2F2D33', '#376470', '#2C1911', '#BE321E',
'#984618', '#003548', '#737373', '#AC4E76', '#0089C0', '#666224'
]
，然后简单：
dots.forEach((dot, index) =>
app.elements[index].value = dot
)
我们还更新背景和行：
app.style.cssText = '--bg: #1F375E; --line: #596376;'
...我们得到：
演示
这是一个编码。您可以单击海报下方的切换器，以在我们在本教程中创建的两个版本之间切换。您可以单击每个点以更改其颜色。希望您能为自己创建一个Gernes Dot-Poster！