User Experience of new feature applications in CSS3 and new feature experience in css3
I. cursor
- The not-allowed cursor is added and access is not allowed.
- Hiding the cursor is useful in the touch mode application. css2.1 requires a transparent image, while css3 directly uses
cursor:noneYou can.
- Complete code:
curosr: url(transparent.gif');cursor: none;
2. Expand the hot zone
- In the case of small buttons, it is difficult to be clicked by the mouse.
- The Code is as follows:
.btn{ position: relative; cursor: pointer;}.btn:after{ position: absolute; content: ''; top:-10px; right: -10px; bottom: -10px; left: -10px;}3. custom check boxes
- Built-in check box beautification
- Implemented using the checked pseudo-class selector provided by css3
- It is best to use em for setting units such as width, height, and alignment to make buttons more flexible.
- Sample Code:
<Head> <meta charset = "UTF-8"> <title> Document </title> <style> input [type = "checkbox"] {display: none ;} input [type = "checkbox"] + label: before {content: '\ a0';/* Do not wrap Spaces */display: inline-block; background: silver; border-radius :. 2em; margin-right :. 2em; width :. 8em; height :. 8em; line-height :. 65em; text-indent :. 15em;} input [type = "checkbox"]: checked + label: before {content: '\ 2713'; background: yellowgreen ;} </style>
- Button implementation
- Implementation of pseudo-class selector + label Modification
- Sample Code:
4. Use shadow to weaken the background
- In traditional mode, a background element and a content element are added. The background mask blocks all elements, and the content element displays everything.
- Add a pseudo element to the body, just like the traditional method, to reduce the background element.
- Focus on box-shadow implementation
- The implementation method creates a huge shadow for content elements, without being offset or blurred.
- H5 unit introduction (using units to solve the problem of incomplete display of the screen mask layer)
- Em: relative parent-level font-size, 1em = 16px;
- Rem: font-size relative to the root element
- The following two methods are available: for example, the VIP address is 1% higher than that of the viewport in a modern browser, and the VIP address is higher than that in a modern browser. The VIP address is the same as that in a vw;
- Vmax and vmin
- Both ie10 and modern browsers support vmin, While ie does not support vmax.
- Vmin indicates a small value in the two VWS.
- Vmax indicates the large value in the two VWS.
- 1vmax indicates a large value between 1ku and 1vm.
- Ch and ex
- Both ie9 + and modern browsers are supported, based on the relative unit of the current font-family
- Ch: the width of the character 0
- Ex: height of lowercase character x
- When a page has a scroll bar, the edge of the mask layer is exposed, unless position: fixed is used to locate the page, but the page itself has a scroll bar.
- Box-shadow does not generate interaction events (the mask layer of independent elements). It can only provide visual guidance.
- Box-shadow is only applicable to scenarios where no scroll bar or guide layer is used.
- Sample Code:
.wrap{ margin: 0 auto; width: 200px; height: 100px; box-shadow: 0 0 0 50vmax rgba(0, 0, 0, .8);}
5. blur the background
- Use blur to blur the background
- Because the elements of The blur application are blurred to all child elements, other elements except the highlighted element are included under a main element.
- Sample Code:
<Head> <meta charset = "UTF-8"> <title> Document </title> <style> main {transition :. 6 s;} main.de-emphasized {filter: blur (2px);} main.de-emphasized + dialog {display: block ;} </style>
6. Scroll prompt
- Use radial-gradient to make a circular radial gradient
- Radial-gradient (center, shape, size, start-color,..., stop-color );
- Center: a coordinate value indicating the origin position. The default value is 50%.
- Shape: ellipse (elliptical) by default. It can be set to circle (positive circle)
- Size: four values: closest-side, farthest-side, closest-corner, and farthest-corner)
- The angle is the closest and farthest angle from the center of the circle, four angles
- Sample Code:
VII. Image Comparison controls
- With the css3 attribute resize, you can set none (unchangeable), horizontal (horizontal), vertical (vertical), and both (all) values.
- When both is used, a prompt is displayed in the lower right corner.
- Sample Code:
- The range label of h5 is used to monitor the value changed by the range component using the oninput event of Js.
- Sample Code:
