Note source: Silicon Valley Web front-end HTML5&CSS3 beginners zero basic entry complete version

[TOC]

Sprite image with gradient

1. The Sprite

Solve image flicker problem:

You can store multiple small images in a single large image, and then adjust background-position to display the responding image

In this way, images will be loaded into the page at the same time, which can effectively avoid the problem of flickering

This technique is widely used in web pages and is called CSS-Sprite

How to use Sprite:

  1. First determine the icon to use
  2. Measure the size of the icon
  3. Create an element based on the measurements
  4. Sets the Sprite image as the background image of the element
  5. Sets an offset to display the correct image

Sprite features:

  • Multiple images can be loaded into a page at a time to reduce the number of requests, speed up access, and improve user experience

Example 1

a:link {
    display: block;
    width: 93px;
    height: 29px;
    background: url(PNG "Assets/Background/Exercise 2- Background /btn.png");
    /* Default value. */ is optional
    background-position: 0 0;
}

a:hover {
    /* Set a horizontal offset; Notice it's moving to the left, so it's negative */
    background-position: -93px 0;
}

a:active {
    /* Set a horizontal offset; Notice it's moving to the left, so it's negative */
    background-position: calc(-93px*2) 0;
}
Copy the code

Let’s compare the effect from the previous exercise below. The first time it was loaded, there was a noticeable flicker

Example 2

.box1 {
    width: 109px;
    height: 33px;
    background: url("Assets/Background/Exercise 3- Sprite/Amazon-sprite_.png");
    /* Set a horizontal and vertical offset; Note the direction of movement */
    background-position: -10px -10px;
}

.box2 {
    width: 42px;
    height: 30px;
    background: url("Assets/Background/Exercise 3- Sprite/Amazon-sprite_.png");
    /* Set a horizontal and vertical offset; Note the direction of movement */
    background-position: -58px -338px;
}
Copy the code

2. Linear gradient

Gradients allow you to set some complex background colors and transition from one color to another

!!!!! The gradient is an image and needs to be set using background-image

Linear-gradient (), the color changes along a straight line.

# Red at the beginning, yellow at the end, and a transition area in the middlebackground-image: linear-gradient(red, yellow);
Copy the code

At the beginning of a linear gradient, we can specify the direction of the gradient

  • to left
  • to right
  • to bottom
  • to top
  • degDeg stands for degree
  • turnSaid circle
background-image: linear-gradient(to left, red, yellow);
background-image: linear-gradient(to right, red, yellow);
background-image: linear-gradient(to top, red, yellow);
background-image: linear-gradient(to bottom, red, yellow);
Copy the code

The basic 4-direction gradients above are easy to understand, so we won’t have to explain them all too much

Let’s look at the degree gradient

background-image: linear-gradient(45deg, red, yellow);
Copy the code

You can see that it gradients from the bottom left to the top right. Why?

I’m sure we all used protractors when we were kids

We use the origin as the starting point, the angular edge to do the gradient, and then match the concept of the four quadrants with the four corners inside the rectangle

Summary: Linear gradient at a point on the edge of the gradient at a certain Angle; The color of the gradient direction is linear, while the color of the vertical direction is consistent

And then let’s look at the winding number

background-image: linear-gradient(0.4 turn, red, yellow);
Copy the code

Since winding numbers and angles are interchangeable, I won’t repeat them here

In addition, you can specify multiple colors at the same time, which are evenly distributed by default, or you can specify the distribution of the gradient manually

Repeating-linear-gradient () is a linear gradient that can be tiled

background-image: repeating-linear-gradient(red, yellow);
Copy the code

By default, just like Linear-gradient (Red, yellow), we change it slightly

background-image: repeating-linear-gradient(red 0px, yellow 50px);
Copy the code

Since we set the div to be 200px wide and high, there will be four repetitions of the gradient

So by default, the following are the same, with the same effect

background-image: linear-gradient(red, yellow);
background-image: repeating-linear-gradient(red, yellow);
/* Since we set the width and height of the div box to 200px, [height]=200px */
background-image: repeating-linear-gradient(red 0, yellow [height]); 
Copy the code

Radial gradient

Radial gradient(effect of radioactivity)

background-image: radial-gradient(red, yellow);
Copy the code

By default, the shape of the radial gradient is calculated based on the shape of the element

  • Square –> circle

  • Rectangle –> oval

By default, circles and ellipse are automatically fitted to the box, and we can also manually specify the shape of the radial gradient

The shape of

  • circlecircular
  • ellipseThe ellipse
background-image: radial-gradient(circle, red, yellow);
Copy the code

You can also specify the position of the gradient

location

  • top
  • right
  • left
  • center
  • bottom
background-image: radial-gradient(at left, red, yellow);
Copy the code

Of course, in addition to the above values, you can also specify pixels

The size of the

  • closest-sidenear
  • farthest-sideFar side
  • closest-cornerThe near post
  • farthest-cornercorner
background-image: radial-gradient(100px 60px, red, yellow);
Copy the code

Specify its shape/size and position

Radial -gradient(shape/size at position, color position, color position, color position)

background-image: radial-gradient(circle at 50px 100px, red 50px, yellow 100px);
Copy the code

To summarize

The shape of

  • circlecircular
  • ellipseThe ellipse

The size of the

  • closest-sidenear
  • farthest-sideFar side
  • closest-cornerThe near post
  • farthest-cornercorner

location

  • top
  • right
  • left
  • center
  • bottom

Similar to linear gradients, radial gradients also have the corresponding repeat attribute

background-image: repeating-radial-gradient(circle at 50px 100px, red 50px, yellow 100px);
Copy the code

Conclusion: The gradient direction of radial gradient starts from the center of the circle and spreads around. The color on the same radius is gradient, the color on the same circle is consistent