Css secrets-Notes (unfinished), css secrets-notes

Css secrets-Notes (unfinished), css secrets-notes
Chapter 1 about this book

1. This book uses a tool function ---- $ (), which makes it easier for us to obtain and traverse all dom elements that match a specific css selector:

1 function $$(selector,context){2   context=context||document;3   var elements=context.querySelectorAll(selector);4   return Array.prototype.slice.call(elements);5 }

2. The following is an effect:

1 linear-gradient(#fff, #000);2 linear-gradient(to bottom, #fff, #000);3 linear-gradient(to top, #000, #fff);4 linear-gradient(180deg, #fff, #000);5 linear-gradient(to bottom, #fff 0%, #000 100%);

3. Check whether the property exists:

1 var root=document.documentElement;2 if('textShadow' in root.style){3   root.classList.add('textShadow');4 }else{5   root.classList.add('no-textshadow');6 }

Multiple Attributes are detected:

1 function testProperty(property){2   var root=document.documentElement;3   if(property in root.style){4     root.classList.add(property.toLowerCase());5     return true;6   }7   root.classList.add('no-'+property.toLowerCase());8   return false;9 }

Checks whether a specific attribute value is supported:

 1 function testValue(id,value,property){ 2   var dummy=document.createElement('p'); 3   dummy.style[property]=value; 4   if(dummy.style[property]){ 5     root.classList.add(id); 6     return true; 7   } 8   root.classList.add('no-'+id); 9   return false;10 }

Chapter 2 Preface

1.-ms-border-radius and-o-border-radius are not required, because ie and opera implement border-radius from the very beginning.
2. Try to reduce code duplication (DRY: don't repeat youself). When some values are mutually dependent, they should be expressed in code.
For example, the row height is twice the font size, font-size: 20px (percentage and em can be used); line-height: 2;
We recommend that you use hsla instead of rgba to produce translucent white because it has shorter characters.
Hsla (hue color 0-360, saturation 0-100%, lightness brightness 0-100%, alpha transparency 0-1 ).
Code is easy to maintain and the amount of code is small, such as border-width.
CurrentColor color keyword, the first variable in the history of css, such as: hr {height:. 5em, background: currentColor }.
3. Replace the fixed length with the percentage length;
Use max-width instead of width to get a fixed width at a large resolution, because it can adapt to a small resolution;
Do not forget to set a max-width: 100% for the replacement element;
Flexbox or display: inline-block can be implemented when an image is laid out with a determinant.
4. The expanded statement does not help you clear all other related attributes. You can use abbreviations and extensions in combination.
Disadvantages of the pre-processor: the volume and complexity of css files may be out of control, and the debugging difficulty and latency may increase.
Many Preprocessor-inspired features have been incorporated into Native css, such as calc () and color ().
For example: ul {-- accent-color: red}
Ol {-- accent-color: blue}
Li {background: var (-- accent-color.

Chapter 2 background and border

1. translucent border: by default, the background will extend to the area of the border. Background-clip: border-box (the background is clipped to the border box), padding-box (the background is clipped to the inside border box ), content-box (the background is clipped to the content box ).
2. Multiple Borders:
The box-shadow Scheme (horizontal position, vertical position, ambiguity, shadow length, color) can be stacked.
In the outline scheme, if you only need two borders, you can add the regular border with outline. The advantage of stroke is that you can use outline-offset to control the distance between it and the element edge to be negative.
3. Flexible background positioning:
Background-position: right 20px bottom 10px; the rollback scheme is to write bottom right to the background. By default, the background-position is subject to padding-box.
Background-origin: content-box. At this time, the offset of the background image from the corner is the same as that of the padding.
Calc () solution: There is a blank character on both sides of the-and + operators in calc (). Otherwise, an error will be parsed.
4. rounded corners in the border:
Two elements can be used, and a combination of box-shadow (following the rounded corner) and outline (not following the rounded corner) can be used, and the radius of expansion can be half of the radius of the rounded corner (√ 2-1) r ).
5. horizontal stripe Background:

1 background: linear-gradient (# fb3, # 58a); 2 background: linear-gradient (# fb3 20%, # 58a 80%);/* the top 20% and bottom 20% are solid colors, intermediate gradient */3 background: linear-gradient (# fb3 50%, # 58a 50%); background-size: 100% 30px;/* Create a stripe, you can change the percentage to create an uneven stripe */4 background: linear-gradient (# fb3 33%, # 58a 0, # 58a 66%, yellowgreen 0); background-size: 100% 30px; /* three stripes */

Vertical stripe Background:

background:linear-gradient(to right,#fb3 50%,#58a 0);background-size:30px 100%;

Oblique stripe Background:

1 background: linear-gradient (45deg, # fb3 25%, # 58a 0, # 58a 50%, # fb3 0, # fb3 75%, # 58a 0); background-size: 30px 30px;/* To achieve seamless stitching */2 background: repeating-linear-gradient (60deg, # fb3, # fb3 50px, # 58a 0, # 58a 100px ); /* The color scale has infinite loops. Now we specify the length in the gradient color scale */

Same color stripes:

background:#58a;background-image:repeating-linear-gradient(30deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,.1) 50px,transparent 0,transparent 100px);

6. Grid:

background:#58a;background-image:linear-gradient(white 1px,transparent 0),linear-gradient(90deg,white 1px,transparent 0);background-size:20px 20px;

Wave point:
Board:
7. pseudo-random background:
8. Continuous Image border:

Chapter 1 shape

1, border-radius: 50%/50% (percentage based on element size resolution, horizontal, vertical), can provide completely different horizontal and vertical radius for the four corners, if three values are provided, the fourth value is the same as the second value. If two values are provided, the third value is the same as the first value. The front and back of a slash have a maximum of four values.
2. parallelogram: transform: skewX (-45deg); The content can be perpendicular using nested or pseudo element schemes.
3, diamond:

1 transform: rotate (45deg) scale (1.42);/* place the image right */2-webkit-clip-path: polygon (50% 0,100% 50%, 50% 100%, 0 50%);/* the image can be placed positive and rotated without two-layer labels (not fully supported by clip-path) */3 img {-webkit-clip-path: polygon (50% 0,100% 50%, 50% 100%, 0 50%); transition: 1 s-webkit-clip-path;} 4 img: hover {-webkit-clip-path: polygon (0 0,100% 0,100% 100%, 0 100%);}/* smooth picture transition (if the padding is not wide enough, the text will be cut off )*/

4. Corner Effect:

1 background:linear-gradient(45deg,transparent 30px,#58a 0) left,linear-gradient(-45deg,transparent 30px,#666 0) right;2 background-size:50% 100%;3 background-repeat:no-repeat;

Arc angle:

1 background: radial-gradient (circle at top left, transparent 30px, # 58a 0) top left, radial-gradient (circle at top right, transparent 30px, #666 0) top right; 2 background-size: 50% 100%; 3 background-repeat: no-repeat;/* (the mixin of scss can be used for maintainability, and the text will not be cut off )*/

Inline SVG and border-image solutions. (Text will be broken)
5. trapezoid tab:
6. Simple pie chart:

1 .pie{width:200px;height:200px;border-radius:50%;background:yellowgreen;background-image:linear-gradient(to right,transparent 50%,#666 0)}2 .pie::before{content:'';display:block;margin-left:50%;height:100%;background-color:inherit;border-radius:0 100% 100% 0/50%;3 transform-origin:left;animation:spin 3s linear infinite,bg 6s step-end infinite;}4 @keyframes spin{to{transform:rotate(.5turn);}}5 @keyframes bg{50%{background:#666;}}

Chapter 2 visual effects

1. Single-side projection: box-shadow: 0 10px 4px-4px black; only bottom side projection; the fourth parameter is the expansion radius,
Bilateral projection: box-shadow: 10px 0 6px-6px black,-10px 0 6px-6px black;
2. Irregular projection:
3. dyeing effect:
Based on filters:-webkit-filter: {sepia (1) saturate (4) hue-rotate (295deg)}; sepia adds an orange-yellow color effect to reduce the saturation of the image, saturate increases the saturation. hue-rotate offsets the color of each pixel.
Based on the hybrid mode: div {background: hsla (335,100%, 50%)}; img {mix-blend-mode: luminosity}; retains the hsl brightness information of upper-layer elements, and draw the color saturation information from its lower layer.
4. wool glass effect:-webkit-filter: blur (20px );
5. Discount effect:

Chapter 2 font Layout

1. Line Disconnection: hyphens: manual (none auto); (chrome does not support this; lang attribute should be specified in the html Tag)
2. Insert A line feed: dd ::after {content: '\ a'; white-space: pre;} (not robust enough)
Dd + dt: before {content: '\ a'; white-space: pre ;}
3. banma stripes of text lines: background-image: linear-gradient (rgba (, 0 ,. 2) 50%, transparent 0); background-size: auto 3em (Row height 2 times); line-height: 1.5;
4. Adjust the tab width: the default tab-size of the pre tab is 8, and the tab-size indent size is available. Do not use the tab key to indent it.
5. Connection: font-variant-ligatures.
6. Custom underline: text-decoration, boder-bottom, or box-shadow: 0-1px gray inset;
Background: linear-gradient (gray, gray) no-repeat; background-size: 100% 1px; background-position: 0 1.02em;
7. Text effects in reality:
Convex print: color: hsl (30%, 60%); background: hsl (100%, 0.8); text-shadow: 0 1px 1px hsla ); when you use dark text on a light background,
Finally, it is determined that 80% is not transparent white. If you do not call this operation, a dark projection is used.
Hollow text effect: text-shadow: 1px 1px black,-1px-1px black, 1px-1px black,-1px 1px black; svg is better, but html code must be modified.
Text luminous effect: text-shadow: 0 0. 1em white, 0 0. 3em white;
Text highlight: text-shadow: 0 1px hsl (85%, 80%), 0 2px hsl (75%,), 0 3px hsl ), 0 4px hsl (70%, 65%), 0 5px hsl (,), 0 5px 10px black;
Circular text effect: svg is used.

Chapter 4 User Experience

1. Select the appropriate mouse cursor: cursor.
2. Expand the clickable area: the Fitts rule assumes that the shortest time required for humans to move to a target area is the logarithm function consisting of the ratio of the target distance to the target width.
Border: 10px solid transparent; background-cilp: padding-box;
3. custom check box: beautify the style with pseudo elements ('\ 2714' check box)
Switch button: similar to the check box.
4. Use shadow to weaken the background:
Pseudo-element scheme;
Box-shadow solution (box-shadow: 0 0 0 50 vmax rgba (, 0,. 8 ););
Backdrop scheme: dialog: backdrop {background: rgba (, 0,. 8 );}.
5. blur the background: filter: blur (5px );
6. Scroll tip: two layers of background, one layer generates a shadow, and the other layer blocks the White Rectangle of the shadow.
7. interactive image comparison controls:
CSS resize scheme: resize: horizontal;
Range input Control Scheme: js controls input [type = 'range'].

Chapter 2 structure and layout

1. Adaptive internal layout:
2. Precisely control the table column width:
3. Set the style based on the number of sibling elements:
4. Full background, fixed width content:
5. Vertical center:
6. Close to the footer at the bottom:

Chapter 2 transition and animation

1. Easing effect:
Bounce Animation: the speed control function of css has only one part of the beiser curve. Therefore, each speed control function has only two control points.
The cubic-bezr (x1, y1, x2, y2) function allows us to specify a custom speed control function, and obtain a reverse version by interchange the horizontal and vertical coordinates of the control anchor.
Elastic transition:
2. frame-by-frame animation:
GIF does not have Alpha transparency. Therefore, you can use a synthetic png frame for display, and then use the steps () speed control function, such as: animation: loader 1 s infinite steps (8 );
3. flashing effect: the animation changes its color to transparent.
4. Typing Animation: Make the container width the main body of the animation (wrap all the text in this container, then let the width of a word expand from 0 to its width in the form of a step animation ).
5. smooth animation:
6. animation translation along the ring path: