20 practical css skills for the front end

May I ask when the wages will rise? It's unclear when the song ends.
This article is also published in a certain gold, it is recommended to watch it in a certain gold, so that it is convenient to preview the effect online

1. Capitalize the first letter (or other style treatment)

::first-letterThe pseudo-class selector is used to specify the style of the first letter of the element.

jcode

2. Transparent image shadow

I believe you must have used box-shadowattributes to set shadows for boxes, but when you want to add shadows to transparent pictures, it looks like a border is added! This is where the magic drop-shadowcomes in handy.

drop-shadowThe way that works is that it respects the channel for a given image Alpha. So shadows are based on the inner shape of the image, rather than appearing outside the image.
jcode

3. Hollow text

Because text-strokeit is not a standard attribute, it is prefixed in most cases

-webkit-text-stroke: 1px #1e80ff;

jcode

4. Background text

Use background-clip: text;the drawing area of ​​the specified background, and then set the text color to be transparent.
jcode

5. Fill text effect

(The following mouse hover experience effect)
jcode

6. Web page grayscale effect

grayscale(amount)The function will change the input image grayscale. The value of amount defines the scale of the grayscale conversion. A value of 100% converts the image completely to grayscale, a value of 0% leaves the image unchanged. If no value is set, the default value is 0. (The following mouse hover experience effect)
jcode

7. The last line of flex layout is left-aligned

Have you encountered this situation when using flex layout?

1. Fixed number of elements per row
2. Each row of elements is the effect of space-between (aligned at both ends, the interval between items is equal, that is, the remaining space is equally divided into gaps)
3. The last row of elements needs to be aligned to the left

At this time we can use the following three methods:

Method 1: Use js to complete elements. For example, each line displays 3 elements, and now there are 5 elements in total. Then we can add a transparent element of the same width at the end.

Method 2: justify-contentSet it to space-betweenachieve the effect of aligning both ends, and then treat the last line specially: the idea is to select the last element, set its right margin, and squeeze it to the width that can only accommodate the last line of elements.
jcode

Method 3: justify-contentSet to flex-start, first align all elements to the left, and then calculate the spacing of each element, by setting the gapelement spacing (if the row and column spacing is different, you can column-gapset the column spacing, row-gapset the row spacing), pretend to achieve the effect of aligning both ends.

**Note:**Due to gap compatibility issues, we can use the same idea to use maigin-right, margin-bottom instead of gap to set element spacing, but the overall position needs to be adjusted, so I won’t give an example here.
jcode

8. Frosted glass background effect

Gaussian blur effects can be written using backdrop-filterboth , but there are still differences in the use of the two, and the goals of use are also different.filter

the difference:

backdrop-filter: Blur the background without affecting the image below the background

filter: Usually define the visual effect of img, modify the blur effect of the image, the larger the value, the more blurred

Here we achieve the frosted glass effect by using backdrop-filterattributes.
jcode

9. Draw a triangle

CSS drawing triangles is generally done with border.
jcode

10. White space between inline elements

Presumably you have also encountered this situation: when the elements in the row are arranged, there is obviously no border or spacing, but there is a gap.

In fact, the gap is caused by line feed or carriage return. You can write all the label codes on the same line to solve it. font-sizeBut this is a bit silly, we can reduce the gap to 0 by setting the parent element to 0. (The following mouse hover experience effect)
jcode

11. Text overflow omitted

Displaying an ellipsis after the text exceeds is also a frequently used style.

single line text overflow

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
复制代码

multiline text overflow

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

12. The list has a uniform style except for the last element

Generally, in this case, we can unify all styles first, and then set the last element style separately to override the public style.

You can also use the :not selector to directly style all but the last element.

:not(selector) The selector matches each element that is not the specified element/selector.

//html
<ul>
   <li>第1个元素</li>
   <li>第2个元素</li>
   <li>第3个元素</li>
</ul>

//css
li:not(:last-of-type){
    
    
  color: red;
}

13. Content is empty prompt

There is such a scenario: after the user searches, a long list of all posts should be displayed. When the search is empty, a prompt should be displayed: no related content found. For example, when we use vue, we often use the
content length to judge and display different content, for example:

<div class="content" v-if="content" v-html="content"></div>
<div class="tip" v-else>没找到相关内容</div>

In fact, we can use :emptythe selector to handle the display style when the content is empty.

The empty pseudo-class selector matches every element that has no child elements (including text nodes, including whitespace).
jcode

14. Set the placeholder style

input::placeholder {
    
    
   color: #919191;
   //其他样式
}	
input::-webkit-input-placeholder{
    
    
   color: #919191;
   //其他样式
}	

15. Hide the scrollbar

.element::-webkit-scrollbar {
    
      
    display: none; /* Chrome Safari */  
}

16. Text does not wrap, automatically wraps, force wraps

//不换行
.wrap {
  white-space:nowrap;
}
//自动换行
.wrap {
  word-break: break-word;
  white-space: normal;
}
//强制换行
.wrap {
  word-break:break-all;
}

17. Disable user selection

div {
    
    
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

18. Box with fixed aspect ratio

Principle: padding sets the percentage, which is relative to the width of the parent element.

So if we want to draw a box with an aspect ratio of m/npadding-bottom , we only need to set it as:
$(element\; width/parent\; element\; width)\ast (n/m)$
jcode

19. The overall tone of the elements is uniformly configured

currentcolorAs the name implies, it is the current color. It represents the color value to be applied to the current element. Use it to apply the current color value to other attributes, or to other attributes of nested elements.

For example, when writing a card now, the text color is the same as the border color, we can just set it 字体颜色, and then use keywords directly when this color is used internally currentcolor.
jcode

20. Animation pause

animation-play-stateYou can control the animation state
jcode

To be continued ~ Like and follow don't miss it!