Full directory
This series of articles, mainly around the CSS3 attributes, to achieve a variety of common effects, these effects are our actual combat development can often use the effect:
- CSS: Background and Borders
- CSS: Shape
- CSS: Visual Effects
- CSS: Font Typography
- CSS Reveals Practical Skills – User Experience [5]
- CSS: Structure and Layout
- CSS Revealed Combat Skills – Transitions and Animations [7]
preface
One: hyphen line break
1. Two sides to it
text-align: justify;
Copy the code
The effect is as follows:
2. Hyphens
The hyphen is $shy. If we still want to use a hyphen to break a line, we can go to the control just by moving to,
登 记 : None // To hide the hyphen still: manual // to show the hyphen still: auto // AutomaticCopy the code
The code is as follows:
<div>
the onlu way to get rid of a temp ­ tation is to yield to it;
</div>
Copy the code
width: 100px;
height: 100px;
border: 1px solid #ddd;
text-align: justify;
hyphens: manual;
Copy the code
The effect is as follows:
Two: Insert a newline
In our actual development process, this kind of thing is often needed, probably most of the time, directly want to add a “< BR >” where the line, this scheme is no problem, but every place to add a BR, maintainability will be relatively poor, so, is there a better scheme?
In fact, there is one Unicode character that specifically represents a newline character :0x000A1. In CSS, this character can be written as “\000A”, or reduced to “\A”. We can use this as the content of the ::after pseudo-element and add it to the end of each element,
The code is as follows:
span::after {
content: '\A';
}
Copy the code
When we set it up, it doesn’t work. Why? This is because the newline is merged with its adjacent whitespace, so the result is still no newline, so the next thing to do is, how do I not merge the newline with the whitespace? Answer: White-space: pre;
The code is as follows:
span::after {
content: '\A';
white-space: pre;
}
Copy the code
Three: text line zebra stripes
When it comes to zebra stripes, the first thing that comes to mind is the selector: nTH-child (odd/even), which sets the styles of odd and even lines separately, but this method is set for multiple tags, such as ul with multiple Li’s.
But if it’s just a paragraph of text, how do you set a zebra stripe?
First, let’s look at the final result:
Plan 1: Cut paragraphs into different labels
Cut paragraphs into multiple sections and place them under multiple tags, and then style the tags with nTH-Child, but this is obviously too low. And adding so many new tags also affects performance.
Plan 2: Only one label
Gradient is used to achieve the stripe background, and vertical center with row height. The code is as follows:
//css width: 300px; The line - height: 1.6 em. background-image: linear-gradient(to bottom,#ddd 50%, transparent 0);Background - size: 3.2 em 100%; background-origin: content-box;Copy the code
Pair programming (English: Pair programming) is an agile software development method in which two programmers work together on a computer. One person typed the code, and the other reviewed every line of code he typed. </p>Copy the code
Four: adjust the TAB width
Json. stringify(data, NULL, 4)
The third parameter controls the tightening size
Scheme 2: use the new property tab-size to control
tab-size: 4;
Copy the code
Five: Customize the underscore
1. Underline
The code is as follows:
text-decoration: underline;
Copy the code
The effect is as follows:
2. The border
The code is as follows:
border-bottom: 1px solid # 000;// Make the border closer to the textCopy the code
3. The box – shadow
The code is as follows:
box-shadow: 0px 1px; The line - height: 0.9 em. // Make the border closer to the textCopy the code
4. Background
The code is as follows:
background: linear-gradient(green, green) no-repeat; background-size: 100% 1px; background-position: 0px 1em; // Set the starting position of the backgroundCopy the code
5. New CSS features are ready
In other words, there are actually new properties that can set the effect of the underline,
Text-decoration-color Specifies the color of the underline or other decorative effects. Text-decoration-style Specifies the style of the decoration (such as line, dotted line, wavy line, etc.). Text-decoration-skip Specifies whether to exclude Spaces, falling characters, and other objects. Text-underline -position is used to fine-tune the placement of underscores.Copy the code
Of course, some browsers may not yet support these new features.
Six: the real text effect
1. Hollow fonts
How it works: By setting offsets in four directions, and then combining the effects of all offsets together, you achieve a border-like effect. The code is as follows:
width: 300px;
height: 150px;
background: green;
color: #fff;
font-size: 80px;
text-align: center;
text-shadow: 3px 3px red, -3px -3px red, -3px 3px red, 3px -3px red;
Copy the code
2. Luminous effect outside the font
The code is as follows:
width: 300px;
height: 150px;
background: green;
color: #fff;
font-size: 80px;
text-align: center;
text-shadow: 0px 0px 10px yellow;
Copy the code
3. Text bump effect
Implementation principle: The main idea is to use a long series of cumulative projection, no blur and gradually stagger the span of 1px, make the color gradually dark, and then add a layer of strong blur at the bottom of the dark projection, so as to simulate the complete stereo effect.
The code is as follows:
width: 300px;
height: 150px;
background: green;
color: #fff;
font-size: 80px;
text-align: center;
text-shadow: 0px 0px 2px hsl(0,0%,85%),
0px 0px 4px hsl(0,0%,75%),
0px 0px 6px hsl(0,0%,65%),
0px 0px 8px hsl(0,0%,55%),
0px 0px 10px hsl(0,0%,45%);
Copy the code