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:

  1. CSS: Background and Borders
  2. CSS: Shape
  3. CSS: Visual Effects
  4. CSS: Font Typography
  5. CSS Reveals Practical Skills – User Experience [5]
  6. CSS: Structure and Layout
  7. 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 &shy 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