如何使用纯 CSS 创建画布外反馈表单

我们将介绍创建画布外反馈表单的过程。我们不会使用任何 javascript 来实现这一点，事实上，我们将利用“css checkbox hack 技术”来构建它。听起来很有趣？

如何使用纯 CSS 创建画布外反馈表单第1张

这是我们将要构建的内容：

See the Pen How to Create an Off-Canvas Feedback Form With CSS by Envato Tuts+ (@tutsplus) on CodePen.

让我们开始吧！

1. 从页面标记开始

我们将从一个复选框及其标签和表单开始。在表单中，我们将放置一些常见的表单元素。

请记住，这里的顺序很重要。首先我们将放置复选框，然后是标签，最后是表单。

id 我们将通过将值设置为等于标签的值来将每个表单控件与其标签相关联 for ：

这是页面标记：

<input type="checkbox" id="mycheckbox">
<label for="mycheckbox" class="feedback-label">FEEDBACK</label>
<form class="form">
  <div>
    <label for="fullname">Full Name</label>
    <input type="text" id="fullname">
  </div>
  <div>
    <label for="email">Email</label>
    <input type="email" id="email">
  </div>
  <div>
    <label for="comment">Comment</label>
    <textarea id="comment"></textarea>
  </div>
  <div>
    <button type="submit">Send</button>
  </div>
</form>

2. 定义一些基本样式

现在让我们定义一些自定义变量来为我们提供布局方案以及一些重置规则，尤其是对于表单控件：

:root {
  --white: white;
  --gradient: linear-gradient(-45deg, #FFA600 0%, #FF5E03 50%);
  --form: #eeefef;
  --border-radius: 4px;
  --form-width: 500px;
  --form-mob-width: 320px;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

button,
label {
  cursor: pointer;
}

label {
  display: block;
}

button,
input,
textarea {
  font-family: inherit;
  font-size: 100%;
  border: none;
}

textarea {
  resize: none;
}

3. 样式化表单元素

现在进入力学。作为第一步，我们将在视觉上隐藏复选框：

[type="checkbox"] {
position: absolute;
left: -9999px;
}

然后，我们将做以下事情：

将复选框的标签和表单设置为固定定位元素。此外，我们会将它们放置在页面的右上角。
以垂直方向显示标签的文本。
在画布外隐藏表单。默认情况下，我们会将其向右移动 100% 的宽度。

对应的样式如下：

/*CUSTOM VARIABLES HERE*/

.feedback-label,
.form {
  position: fixed;
  top: 50%;
  right: 0;
  backface-visibility: hidden;
}

.feedback-label {
  transform-origin: top right;
  transform: rotate(-90deg) translate(50%, -100%);
  z-index: 2;
}

.form {
  width: var(--form-width);
  max-height: 90vh;
  transform: translate(100%, -50%);
  padding: 30px;
  overflow: auto;
  background: var(--form);
  z-index: 1;
}

接下来，我们将为表单元素添加一些简单的样式：

/*CUSTOM VARIABLES HERE*/

.feedback-label,
.form input,
.form textarea,
.form button {
  border-radius: var(--border-radius);
}

.feedback-label,
.form button {
  background: var(--gradient);
  color: var(--white);
}

.feedback-label:hover,
.form button:hover {
  filter: hue-rotate(-45deg);
}

.feedback-label {
  padding: 5px 10px;
  border-radius: var(--border-radius) var(--border-radius) 0 0;
}

form div:not(:last-child) {
  margin-bottom: 20px;
}

form div:last-child {
  text-align: right;
}

.form input,
.form textarea {
  padding: 0 5px;
  width: 100%;
}

.form button {
  padding: 10px 20px;
  width: 50%;
  max-width: 120px;
}

.form input {
  height: 40px;
}

.form textarea {
  height: 220px;
}

切换表格

每次我们单击复选框的标签时，表单都应该以幻灯片动画的形式出现或消失。为了实现这一点，我们将利用:checked 伪类、后续兄弟选择器( ~) 和相邻兄弟组合器( +)。

以下是所需的样式：

/*CUSTOM VARIABLES HERE*/

[type="checkbox"]:checked + .feedback-label {
  transform: rotate(-90deg) translate(50%, calc((var(--form-width) + 100%) * -1));
}

[type="checkbox"]:focus + .feedback-label {
  outline: 2px solid rgb(77, 144, 254);
}

[type="checkbox"]:checked ~ .form {
  transform: translate(0, -50%);
}

.feedback-label,
.form {
  transition: all 0.35s ease-in-out;
}

让我们讨论上面的前三种样式：

第一个选择器查找 .feedback-label 紧跟选中复选框的元素。在这里，代替+选择器，我们同样可以使用更通用的 ~选择器。然后，它会在表单之后平滑地移动这些元素。注意函数的 Y 值translate()，看起来有点混乱。如果您查看以前的规则，则最初是-100%. 现在应该是-(form width + 100%)。为了强制 calc()函数返回负值，我们将目标操作的结果乘以 -1。
第二个选择器查找 .feedback-label 紧跟在焦点复选框之后的元素。同样在这里，~选择器也可以工作。然后它给这些元素一个轮廓。这对于键盘可访问性很有用。使用 Tab 键将焦点移至复选框（标签）。接下来，按空格键切换表单状态。
第三个选择器查找.form跟随（甚至不是立即）选中复选框的元素。translate() 然后，它通过删除函数的 X 值将这些元素平滑地移动到视图中

4. 响应迅速

作为最后一个（重要的）细节，我们将为移动屏幕指定一些规则。这并不涉及任何非常激烈的事情，我们只是将表单宽度从 500 像素减少到 320 像素。

响应式风格：

/*CUSTOM VARIABLES HERE*/

@media screen and (max-width: 600px) {
  body {
    font-size: 16px;
  }

  .form {
    padding: 15px;
    width: var(--form-mob-width);
  }

  form div:not(:last-child) {
    margin-bottom: 10px;
  }

  [type="checkbox"]:checked + .feedback-label {
    transform: rotate(-90deg) translate(50%, calc((var(--form-mob-width) + 100%) * -1));
  }
}