css用户体验

选择适合的鼠标光标

禁用光标

cursor: not-allowed;

隐藏光标

cursor: url('transparent.gif');
cursor: none;

扩大可点击区域

伪元素：

button {
  position: relative;
}
 
button::before {
  content: '';
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
}

自定义复选框

awesome

自定义复选框

<input type="checkbox" id="awesome"/>
<label for="awesome">awesome</label>

input[type="checkbox"] {
  position: absolute;
  clip: rect(0, 0, 0, 0);
}
input[type="checkbox"] + label {
  cursor: pointer;
}
input[type="checkbox"] + label::before {
  content: '\a0';
  display: inline-block;
  vertical-align: .2em;
  width: 1em;
  height: 1em;
  margin-right: .2em;
  border-radius: .2em;
  background: silver;
  text-indent: .15em;
  line-height: .65;
  cursor: pointer;
}
input[type="checkbox"]:checked + label::before {
  content: '\2713';
  background: yellowgreen;
}
input[type="checkbox"]:hover + label::before {
  box-shadow: 0 0 .1em .1em #58a;
}

开关式按钮

awesome

<input type="checkbox" id="awesome1"/>
<label for="awesome1">awesome</label>

#awesome1 {
	position: absolute;
	clip: rect(0,0,0,0);
}
 
#awesome1 + label {
	display: inline-block;
	padding: .35em .5em .2em;
	background: #ccc;
	background-image: linear-gradient(#ddd, #bbb);
	border: 1px solid rgba(0,0,0,.2);
	border-radius: .3em;
	box-shadow: 0 1px white inset;
	text-align: center;
	text-shadow: 0 1px 1px white;
	cursor: pointer;
}
 
#awesome1:checked + label,
#awesome1:active + label {
	box-shadow: .04em .1em .2em rgba(0,0,0,.6) inset;
	border-color: rgba(0,0,0,.3);
	background: #bbb;
}

通过阴影弱化背景

遮罩层

.overlay {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, .8);
}
.dialog {
  position: absolute;
  z-index: 1;
}

伪元素方案

.dialog::before {
  content: '';
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, .8);
  z-index: -1;
}

存在问题：
点击背景层关闭，对于这种实现起来比较麻烦

box-shadow方案

box-shadow: 0 0 0 50vmax rgba(0,0,0,.8);
position: fixed; // 为了防止滚动页面时遮罩层弹出

存在问题：
box-shadow 只是能引起视觉上的效果 无法阻止鼠标交互（弹出层外背景中的元素仍能被点击）

backdrop方案

dialog::backdrop {
  backgroud: rgba(0,0,0,.8)
}

存在问题：
浏览器不完全支持

通过模糊来弱化背景

main.de-emphasized {
  filter: blur(5px);
}

模糊和阴影结合

main.de-emphasized {
  filter: blur(5px) contrast(.8px) brightness(.8);
}

如果浏览器不支持，看不到任何效果，最好加上box-shadow作为浏览器回退方案。

如果还需支持鼠标在该背景区域上无法交互，使用遮罩层+filter的方式。

滚动提示

在移动端用的比较多，支持向上滚动头部显示“提示”，支持向下滚动底部显示“提示”

• Ada Catlace
• Alan Purring
• Schrödingcat
• Tim Purrners-
• Lee
• Webkitty
• json
• void
• Tim Purrners-
• Lee
• Webkitty
• json
• void

代码可参考：https://dabblet.com/gist/20205b5fcdd834461e80

交互式的图片对比控件

css Resize 方案

<div class="image-slider">
  <div>
    <img src="https://img2023.cnblogs.com/blog/3116094/202302/3116094-20230225214134054-1457803797.jpg" alter="before"/>
  </div>
  <img src="https://img2023.cnblogs.com/blog/3116094/202302/3116094-20230225214134054-1457803797.jpg" alter="after"/>
</div>

.image-slider {
  position: relative;
  display: inline-block;
}
.image-slider > div {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
  resize: horizontal;
  max-width: 100%; // 防止拉动调节手柄后超出图片大小
}

除此之外，还能通过伪元素改变调节手柄的大小

.image-slider > div::before {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 12px;
  height: 12px;
  padding: 5px;
  background:
    linear-gradient(-45deg, white 50%, transparent);
  background-clip: content-box;
  cursor: ew-resize;
}
.image-slider img {
  display: block;
  user-select: none; // 防止没有点击调节手柄 拖动鼠标 误选图片的情况
}

范围输入控件方案

<input type="range"/>

然后监听Input的值，动态改变第一张图片的宽度。略。
比较推荐这种方案，浏览器支持度更高，不过需要编写额外的js代码。