我如何重现 Theory11 的登录表单——你如何做？

我在网站 theory11.com 上遇到了一个超级酷的登录表单设计。实际上，整个网站以及他们制作的产品都设计得非常出色，只是登录表单的简洁和优雅让我印象深刻。另外，碰巧的是，那周的 CodePen 挑战是以表单为基础的，所以我花了几分钟时间尝试拼凑起来。

渐隐矢量图案

我认为非常优雅的一点是，矢量壁纸风格的图案不仅存在，而且还以径向方式逐渐淡出。我并没有试图完全匹配图案——我只是从 CodePen 的“资产面板”中抓取了一个图案，并将其作为 SVG 数据 URL 的 <html> 元素的 background-image，填充不透明度很低。然后径向渐变位于顶部，并创建了淡出效果——具有相同基本背景色的径向渐变，逐渐淡出。

:root {
  --gray: rgb(14, 19, 25);
  --gray--t: rgba(14, 19, 25, 0);
} 

html {
  background: var(--gray) url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="28" height="49" viewBox="0 0 28 49"%3E%3Cg fill-rule="evenodd"%3E%3Cg id="hexagons" fill="%239C92AC" fill-opacity="0.1" fill-rule="nonzero"%3E%3Cpath d="M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
}

body {
  margin: 0;
  height: 100vh;
  background: radial-gradient(
    ellipse at bottom center,
    var(--gray--t), 
    var(--gray) 90%
  );
}

双边框

如果您查看 theory11 网站上的双边框代码，您会发现它是通过在父元素和子元素上使用单个 2px 固体边框来实现的，并添加了一些填充以将它们隔开。当然，这是一种非常好的方法。但是它让我想起，您实际上可以使用 double 作为边框样式。您对间距的控制非常有限，但嘿，它很接近！

form {
  border: 7px double #AA8B59;
}

那些角落的框怎么样？

我很享受构建其余部分的过程，但我没有处理那些角落的框。不过我考虑过！我的第一个想法是伪元素，因为它们是添加额外风格的绝佳小工具，无需额外的 HTML。除了……您只能获得两个，而我们这里需要四个。事实证明，这就是他们的做法——他们获得了四个，因为他们同时使用了父元素和子元素（以获得边框）。

Peter Schmalfeldt 尝试用这种方法来做

查看 CodePen 上 Peter Schmalfeldt (@manifestinteractive) 的笔 theory11 登录。

Dan Wilson 通过使用多个背景渐变采取了完全不同的方法

查看 CodePen 上 Dan Wilson (@danwilson) 的笔 theory11 登录（使用背景渐变添加角落的框）。

另一种可能性是 border-image。我发现 border-image 的用例很少，而且语法很难理解，但这有点像是它的完美情况。该属性使用“9 切片缩放”，因此想象一下图像被像井字棋一样切开。然后，每个区域都可以重复或拉伸（或这些区域的变体）。像这个棕色形状这样的图形

九切片

所有这些非角部分以方向性方式重复，以形成所需的任何中间空间。

SVG 具有类似的潜力。 Mike Riethmuller 有一篇关于此的文章。我将在这里窃取他的演示

查看 CodePen 上 Chris Coyier (@chriscoyier) 的笔灵活的 SVG。

当视口大小调整时，该 SVG 的不同部分如何以不同的方式拉伸？我相信这也可以用于我们这里的表单设计。

我发现像这样有很多方法来做一些事情很有趣。有老式的方法，其中那些角落只是您根据需要定位和设置样式的一些 <div>。或者，您也可以变得非常花哨，并使用 Houdini/Paint API 来实现它！

渐隐矢量图案

双边框

那些角落的框怎么样？

评论