A website with a well-designed interface is always more attractive to users. Good interface design is still based on the ability of the UI designer, but in order to replicate the designer’s UI, your CSS writing ability is very important.

CSS, like JS, is constantly evolving. With the increasing support for CSS3 in various browsers, CSS can play a more and more important role. Skilled use of CSS technology can write an excellent interface, but also reduce the workload of JS.

Here are some ways to use CSS smartly.

Borders and backgrounds

Translucent border

For translucent borders, the opacity of the border color is usually set directly, but in the case of elements with a background color, the background color will extend into the border area, affecting the display of the border. You can use background-clip to solve this problem.

<style>.transparent-border { width: 100px; height: 100px; Border: 10 px solid rgba (0,0,0,0.2); background-color: blue; background-clip: padding-box; // border-box | padding-box }</style>
<div class="transparent-border"></div> 
Copy the code

Multiple frames

Borders can be written using border, or simulated using box-shadow, using the fourth parameter of the property, the size of the shadow. Since box-shadow can be multiple, we’ll use it for multiple borders. Note that the first projection is at the top and does not affect the layout or respond to mouse events.

<style>
.multiple-border {
    width: 100px;
    height: 100px;
    margin: 20px;
    box-shadow: 0 0 0 5px # 655.0 0 0 10px deeppink;
    border-radius: 5px;
}
</style>
<div class="multiple-border"></div> 
Copy the code

Striped background

The stripe background can be written with a linear gradient, using a solid color for each interval.

Note that in linear gradient, if we set the position of the second color to 0, it will always be adjusted by the browser to the position of the previous color

<style>
div {
  width: 100px;
  height: 100px;
  background: linear-gradient(# fB3 33.3%,# 58A 0, # 58A 66.6%, yellowgreen 0);
  background-size: 100% 45px;
  margin: 20px;
}
</style>
<div></div>
Copy the code

The shape of

The ellipse

Border-radius can specify horizontal and vertical radii separately by separating the two values with a slash (/)

<style>
div {
  width: 100px;
  height: 75px;
  border-radius: 100px / 75px;
  background: linear-gradient(# FB3 33.3%,# 58A 0, # 58A 66.6%, yellowgreen 0);background-size: 100% 45px;
  margin: 20px;
}
</style>
<div></div>
Copy the code

parallelogram

The first method uses two labels, with the first layer twisted in the X-axis direction and the inner layer twisted back to ensure that the text appears properly.

<style>
.button { display: inline-block; background-color:#fb3; transform: skewX(-45deg); }
.button > span { display: inline-block; transform: skewX(45deg); }
</style>
<a href="#yolo" class="button">
    <span>Click me</span>
</a>
Copy the code

The second way is to use pseudo-elements.

<style>
.button {
    position: relative;
/* Other text color, inner margins, etc... * /
}
.button::before {
    content: ' '; /* Create a rectangle with a false element */
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: -1;
    background: #58a;
    transform: skew(-45deg);
}
</style>
<a href="#yolo" class="button">
    Click me
</a>
Copy the code

The diamond

<style>
.picture {
    width: 25px;
    height: 25px;
    transform: rotate(45deg);
    overflow: hidden;
    margin: 20px;
    background: #58a;
}
.picture > span {
    display: inline-block;
    transform: rotate(-45deg);
}
</style>
<div class="picture">
    <span>Pic</span>
</div>
Copy the code

Trapezoidal Tab

Trapezoid can also be achieved with CSS3, the principle is to use CSS3 3D effect, the rectangle “back” to form a trapezoid.

The effect

Visual effect

Unilateral projection

Blur 4px: This essentially means that at the edge of the shadow the color transition between the shadow color and the pure transparent color is approximately twice the length of the blur radius (such as 8px in this case)

With the negative shadow size can achieve a one-sided projection.

box-shadow4:0px 4px -4px black;
Copy the code

Adjacent side projection

box-shadow: 3px 3px 6px -3px black;
Copy the code

Bilateral projection

box-shadow: 5px 0 5px -5px black.-5px 0 5px -5px black;
Copy the code

Irregular projection

Filter: drop-shadow(2px 2px 4px rgba(0,0,0,.5));Copy the code

conclusion

CSS function is still very powerful, in the continuous learning OF JS at the same time, can not forget to improve CSS skills. The tips above are from CSS Revealed