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));
}
}
结论
就是这样,伙计们! 在不花费太多精力的情况下,我们设法实现了有用的画布外反馈表。 我希望您喜欢这个练习,并学到了一些新知识,可以在不久的将来付诸实践。
让我们再次看看我们构建了什么:
一如既往,感谢您的阅读!
css画布背景