"CSS Secret" - summed up 47 Css tips (five): User Experience

Note: This case comes from the "CSS Secret" book. CSS code Description section using the Stylus precompiled.

Select the appropriate mouse cursor

Use cursor property cursor enhance friendly tips ~

• default: default cursor (typically an arrow)
• crosshair: indicating selection cursor displays (cross lines).
• pointer: The cursor appears as a link pointer (a hand)
• move: The cursor indicates an object can be moved. (+ Crosshair arrow)
• e-resize: This indicates the cursor may be moved to the right (east).
• w-resize: This indicates the cursor may be moved to the left (west). (Chrom and Firefox performance in the same e-resize)
• n-resize: The cursor indication may be upward (north) moves.
• s-resize: this cursor edge may be moved downward (south). (Chrom and Firefox performance in the same n-resize)
• ne-resize: This indicates the cursor may be moved upward (north / east) and the right.
• sw-resize: This indicates the cursor may be moved down (South / West) and left. (Manifested in chrom and Firefox with the same ne-resize)
• nw-resize: This indicates the cursor may be moved upward (North / West) and left.
• se-resize: This indicates the cursor may be moved down (South / East) and to the right. (Manifested in chrom and Firefox in the same se-resize)
• text: This indicates the text cursor (I-shaped cursor).
• wait: The cursor indicates the program is busy (usually a table or hourglass).
• help: The cursor indication of available assistance (often a question mark or a balloon).

	<div style="cursor: help">	此光标指示可用的帮助（通常是一个问号或一个气球）。</div>

PS: Tested in FireFox and in chrom

• e / w-resize the left and right pointing arrow
• s / n-resize arrow pointing up and down
• ne / sw-resize lower left upper right pointing arrow
• nw / se-resize lower right upper left pointing arrow

PS: Because here a screenshot of the cursor will disappear, but to use language to describe ~

Expand the clickable area

Use :: before pseudo-element to expand the hit area.

• Using his benefits can click to expand the scope of the element at the same time without fear of the border will be stretch.
• Mixin recommended method, followed by a direct call like ~

.button
	position relative
	&:before
		content:''
		position absolute
		top -10px
		left -10px
		right -10px
		bottom -10px
		cursor pointer

Custom check box

Settings check box style has been a headache. First look at the box in several states:

• The default style
  
• Check the state
  
• Selected
  
• Disabled
  

<input type="checkbox" id="box">
<label for="box">复选框~</label>

input[type="checkbox"]+label::before // label前添加自定义的复选框，+是后代元素选择器
	content: '\a0'/* 不换行空格 */
	display: inline-block
	vertical-align middle // 与label垂直居中
	width 16px
	height 16px
	margin-right 5px
	border-radius 3px
	background: #fff
	border solid 1px #ccc
	text-indent: 3px // 将段落的第一行缩进3px，\2713图标向右偏移3px
	line-height: 16px
input[type="checkbox"]:checked+label::before // 勾选状态
	content:'\2713'
	background: #1296db
	color #fff
input[type="checkbox"]:focus+label::before // 被点击状态
	box-shadow: 0 0 1px 1px #58a
input[type="checkbox"]:disabled+ label::before // 禁用状态
	background: gray
	box-shadow: none
	color: #555
input[type="checkbox"] // 隐藏原有复选框
	position: absolute
	clip: rect(0,0,0,0) // clip 属性剪裁绝对定位元素。

By mask Mask to weaken background

The article suggests ways to increase the dialog background 4, four methods have advantages and disadvantages.

• Add an html element package, use the fix positioning
  disadvantage is likely to add an additional html elements; the advantage is good control, easy to add a click event, easy to control.

.overlay{ /* 用于遮挡背景 */
	position fixed
	top 0
	right 0
	bottom 0
	left 0
	background rgba(0,0,0,.8)
	.lightbox /* 需要吸引用户注意的元素 */
		position absolute
		z-index 1

• before pseudo-element program
  drawback is pseudo-elements can not bind a separate JavaScript event handler . Means you can not increase the click event.

.dimmed::before
	position fixed
	top 0
	right 0
	bottom 0
	left 0
	z-index 1
	background rgba(0,0,0,.8)

• box-shadow scheme
  1vmax corresponds to greater values of both the 1vw and 1vh. 100vw equal to the entire width of the viewport, 100vh is the height of the viewport. Therefore, to meet our needs minimum is 50vmax. Since the projection is extended in the four directions at the same time, the final size of the mask layer will be 100vmax plus the size of the element itself.
  The disadvantage is that when you scroll the page edge mask layer may be exposed . It will not increase the click event.

box-shadow 0 0 0 50vmax rgba(0,0,0,.8)

• backdrop embodiment
  disadvantage is the poor compatibility.

dialog::backdrop
	background rgba(0, 0, 0, .8)

PS: In the dialog box I realized the first method or use. If you want to dialog more full-function, then the first event is a way to add more interactive. But sacrifice some browser performance. Let the browser rearranges redrawn.

To weaken by blurring the background

Or through the blur -implemented properties. Now realize blurred background is to increase the html element to achieve it. Before writing a dialog components, to see: Based Vue achieve dialog box assembly

• Compared to directly add layer mask, blur the background personally think looks better, more suitable for use in the PC side.
• You can also take advantage of scale properties of the elements scaled so that the dialog closer to the user.
• You can also increase the use of transition transition effects.

<div class="blur-bg">
	<div class="main">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>
	<div class="dialog">对话框~</div>
</div>

.blur-bg
	width 300px
	height 180px
	margin 3px auto 0
	position relative
	.main
		filter blur(2px)
	.dialog
		position absolute
		top 50%
		left 50%
		transform translate(-50%, -50%)
		background #f2f2f2
		padding 10px

Scroll tips

Use background-attachment local, scroll property to optimize rolling.

• When scrolling below the top plus a shadow represents the part as well as content.
• Shadow can gradually disappear.
  

overflow auto
	width 300px
	height 150px
	padding 10px
	border solid 1px #ccc
	background linear-gradient(white 15px, hsla(0,0%,100%,0)) 0 0 / 100% 50px,
			radial-gradient(at top, rgba(0,0,0,.2), transparent 70%) 0 0 / 100% 15px,
      		linear-gradient(to top, white 15px, hsla(0,0%,100%,0)) bottom / 100% 50px,
		    radial-gradient(at bottom, rgba(0,0,0,.2), transparent 70%) bottom / 100% 15px
	background-repeat no-repeat
	background-attachment local, scroll,local, scroll // local:会随着内容向下而向下，白色遮住阴影；scroll：随着页面滚动

Interactive Picture contrast controls

Use resize: horizontal property division to complete the picture. Not need to use js control can drag the dividing line dividing picture Zoom back and forth.

.image-slider
	position relative
	display inline-block
	margin-left 50%
	transform translate(-50%)
.image-slider > div
	position absolute
	top 0
	bottom 0
	left 0
	width 50% /* 初始宽度 */
	max-width 100%
	overflow hidden /* 让它可以裁切图片 */
	resize horizontal
	&::before // 三角形箭头
		content ''
		position absolute
		bottom 0
		right 0
		width 12px
		height 12px
		background white
		cursor pointer
		padding 5px
		background linear-gradient(-45deg, white 50%, transparent 0)
		background-clip content-box
.image-slider img
	display block