css画布背景_快速提示：如何使用纯CSS创建画布外反馈表单

css画布背景

在这个超级快速的教程中，我们将逐步完成创建画布外反馈表单的过程。 我们不会使用任何JavaScript来完成此操作，实际上，我们将利用“ CSS checkbox hack技术”来构建它。 听起来很有趣？

这是我们将要构建的：

让我们开始吧！

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

4.积极响应

作为最后一个（重要的）细节，我们将为移动屏幕指定一些规则。 这并不涉及任何真正的麻烦，我们只是将表单宽度从500px减小到320px。

响应式：

/*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));
  }
}

结论

就是这样，伙计们！ 在不花费太多精力的情况下，我们设法实现了有用的画布外反馈表。 我希望您喜欢这个练习，并学到了一些新知识，可以在不久的将来付诸实践。

让我们再次看看我们构建了什么：

一如既往，感谢您的阅读！

翻译自: https://webdesign.tutsplus.com/tutorials/quick-tip-how-to-create-an-off-canvas-feedback-form-with-pure-css--cms-33996

css画布背景