Hello, my name is 💎 three diamonds from Tech Galaxy.

In the last section we covered boxes, the box model, and all the important points and issues in normal flow. In this section, take a look at the details of Flex typography.

Today, on this special day, I added 1024 holiday eggs to this article. Read and study carefully and you will find your own rainbow!

Flex typesetting

In the previous chapter “Learning browser Principles in Implementation,” you already had a more detailed exposure to Flex typography. Here we are basically going to review Flex’s typography techniques.

Flex’s typography logic is still divided into three steps:

• collectboxfor
• To calculateboxArrangement in the main axis
• To calculateboxArrangement in the direction of intersecting axes

For Flex typesetting, there is no text, so we collect all the boxes for Flex typesetting. Because Flex can be adjusted in the direction of layout, we do not use the normal top, left, bottom, right system to describe. It’s described in terms of principal axes and intersecting axes.

branch

• Divide the elements according to the spindle size.
• Every time we add an element to the current row, we compare it to the remaining space of the row.
• If the current row is full, a new row is created and the new element is placed on the next row.
• If you set upno-wrap, forces allocation to enter the first row. (We will deal with the overflow when we calculate the principal axis.)

Calculate the principal axis

• Find all Flex elements
• The remaining dimensions of the main axis are proportionally allocated to these elements
• If the remaining space is negative, all Flex elements are 0 and the remaining elements are compressed equally

If a Flex value is 1 and a Flex value is 2, if a Flex value is 1 and a Flex value is 2, if a Flex value is 300px, then a Flex value will be 100px and a Flex value will be 200px.

If the remaining space is negative, all elements with flex attributes are set to 0. And then I’m going to do geometric compression of the rest of the elements.

Calculate the cross axis direction

• Calculates the row height based on the maximum element size of each row
• According to the line heightflex-align 和 item-alignTo determine the location of the element

CSS animations

There are three main types of CSS that control presentation:

1. Information that controls the position and size of elements
2. Controls the position and the render information actually seen at the end
3. Interactive with animation information

Let’s look at some more CSS properties.

Animation

First, I will introduce some of the most straightforward features of CSS. Animation is the first step. Animation consists of two parts:

• use@keyframesTo define the key frames of the animation

@keyframes myKeyFrame {
  from { background: red; }
  to { background: yellow; }}Copy the code

First we can use keyframes @rule to define a keyframe. And then we use from and to, and they all define CSS declarations (CSS properties and value declarations)

• useanimationProperty to use the part of the keyframe

div {
  animation: myKeyFrame 5s infinite;
}
Copy the code

In a specific CSS rule we can set the animation property. The Animation property is divided into several parts. Here we define an Animation keyframe for the div tag, which is the myKeyFrames we defined above. Then we define 5 seconds and make it an infinite loop, infinte means the animation is infinite.

Ok, let’s see what a real example looks like:

<style>
  @keyframes myKeyFrame {
    from {
      background: red;
    }
    to {
      background: yellow; }}div {
    animation: myKeyFrame 5s infinite;
  }
</style>

<div style="height: 100px; width: 100px"></div>
Copy the code

The code here is the same as what we just described, the style tag contains the myKeyFrame that we set. We then add the animation property to the div tag and bind it to our pre-set myKeyFrame. The result is as follows:

If we open the console, we see that the background property of this element is not changing, but if we take the computed property of this element, we see that it is changing all the time. This is the basic usage of CSS animation.

Animation attributes

Let’s take a look at the properties of Animation in detail. The properties of Animation consist of six parts:

• animation-name— Time curve
• animation-duration— The duration of the animation
• animation-timing-functionThe time curve of the animation
• animation-delay— The delay before the animation starts
• animation-iteration-count— The number of times the animation is played
• animation-direction— Direction of animation

Keyframes to define

@keyframes myKeyframe {
  0% { top: 0; transition: top ease }
  50% {top: 30px; transition: top ease-in }
  75% { top 10px; transition: top ease-out  }
  100% { top: 0; transition: top linear }
}
Copy the code

Keyframes can be defined using % or from to. From is roughly equal to 0%, and to is roughly equal to 100%.

We can define a lot of properties in each keyframe. A common trick is to define transition inside the animation instead of using timing-function of the animation to change the value.

In this case, different timing-function can be used for each key frame. Unlike animation, once a value is pointed to, its entire timing-function is determined, so there is no way to specify segments.

The Transition to use

Transition is similar to animation and has four properties:

• transition-property— Attributes to be transformed
• transition-duration— The duration of transformation
• transition-timing-function— Time curve
• transition-delay– the delay

Cubic- Bezier Cubic Bezier curves

Timing-function is derived from a cubic Bezier curve. All of our Timing- functions are related to the cubic Bezier curve.

Cubic Bezier can be started at Cubic-bezier.com.

Let’s start by looking at the graph on the far right of this website. The horizontal axis shows TIME and the vertical axis shows PROGRESSION. The time on the horizontal axis is a proportional time, in % percent. And the vertical axis represents the progress of the property change and it’s also proportional progress, so it’s also in % percent units. The interval for both axes is 0 to 1 (0% to 100%).

Here, we can move the two control points, red and green, at will, to get the corresponding animation curve.

If we want our animation to have a bounce in the middle, we can move our control point to something like the following. Then click “GO!” , you can view the effect.

The animation curve drawn in the right line will be assigned to our red animation block. Click “GO!” The animation of the red square is consistent with the graph we drew.

Here we can see that, according to our graph, our red square does bounce back a bit in the middle and then get to our point. Here we’ll notice that the end time is the same, regardless of the curve we define. If we set duration to 1 second, the entire animation will be 1 second.

And this is what happens when we set Bessel curves three times.

Here we can also bounce this out of the corresponding range, and we can see the effect:

Seeing the effect above, we can make the red square bounce over the end point, and then bounce back. This is our definition of a cubic Bezier curve.

In CSS animations, there are actually several built-in cubic Bezier curves:

• ease— is a standard slow curve, experienced countless predecessors to find out, is also one of the most natural curve form
• linear— is a straight line, equivalent to degenerate into a linear curve, which we do not need to use
• ease-in– Slow start, usually used to exit animation
• ease-out— Slow stop, used to enter animation
• ease-in-out–ease-in 和 ease-outSymmetric animation of

How does Cubic- Bezier work?

Next, let’s look at cubic- Bezier in detail.

A Bessel curve

First let’s look at this picture, which shows a black solid point moving on a straight line. This point is moving in a straight line from P0 to P1, and then there’s a t that’s going from 0 to 1 in time. This is what we call a “Linear Curve,” or a straight line.

Quadratic Bessel curve

The quadratic Bezier curve has three fixed points P0P_0P0, P1P_1P1 and P2P_2P2, and P1P_1P1 is a control point.

In a quadratic Bezier curve, we have two intermediate points, Q0Q_0Q0 and Q1Q_1Q1, which can move on corresponding lines as time goes from 0 to 1. And Q0Q_0Q0 and Q1Q_1Q1 can be joined together to create a line (the green line).

• The point Q0Q_0Q0 can be moved over the line connecting P0P_0P0 and P1P_1P1, resulting in a linear Bezier curve (gray line).
• The point Q1Q_1Q1 can be moved over the line connecting P1P_1P1 and P2P_2P2, resulting in a primary Bezier curve (gray line)
• Point B represents our moving black dot, starting at P0P_0P0 and ending at P2P_2P2, but only if the black dot does not go beyond the green line connecting Q0Q_0Q0 and Q1Q_1Q1. What we end up with is a quadratic Bezier curve (red line).

Still don’t understand what’s going on? It’s just a bunch of lines that are joined together, and at the end the edges of the lines draw a curve. If you played with line drawing as a child, you may have a sense of deja vu about the concept.

Cubic Bezier curves

In the cubic Bezier curve, we add an additional control point. We then do Bessel interpolation again between the blue dots generated by the two green lines, and we get a cubic Bessel curve. And we can also see that the last thing that’s drawn is a red track.

Here we see that the Bezier curve is controlled by t, but actually in the bezier curve that we just looked at on the website, the horizontal axis is time, the graph here is X, and the progress is Y.

So the definition of Bezier curve is often not used to directly calculate the shape of bezier curve. So if we want to figure out what X is

The equation and the coordinates for phi and Y are the Newtonian integrals. Newton integral method is a famous numerical algorithm, if we want to achieve Newton integral, we can directly copy the corresponding code in WebKit, and then write it in JavaScript is very simple. But if we want to reason this thing out for ourselves, it’s a little more complicated. But we programmers are engineering oriented, so we don’t have to pursue mathematical proof. Leave that to our scientists.

Bessel curve fitting

Bezier curves Theoretically, we can use control points to fit any shape.

Let’s say we want to fit an arc, or something that looks like a semicircle. But can we make a semicircle at all? Well, we don’t really know. But there are two things about Bessel curves that you can always fit:

1. Straight line – just place both control points on the straight line of both points
2. Parabola – mathematically it can be proved that bezier curves fit perfectly

In this case, it turns out that the circle doesn’t fit directly. Because if we think about it, how do three points fit into a circle? But we can use Bezier curves to fit arcs piecewise. Although there is no perfect fitting scheme for arcs, the thinner the arcs are, the better our fitting results will be. So that’s the math, but anyway Bessel curves have a very powerful ability to fit.

Eggs are coming!

Today is a special day, is the day of programmers, in 1024 today I give my best wishes to the students:

Programmer friends, in this belongs to own festival please write a special procedure: input happy language, compile moving text, insert beautiful module, run interesting process, compress boring psychology, interrupt irritable mood, release happy code, execute happy cycle.

In order to thank all the fans who follow me in this year, and the students who will follow me in the future, HERE I selflessly contribute my personal collection: 69 hd 3K 4K programmer’s must-have encouragement wallpaper! ~

Do you really want it? Is it a little chicken cold? 🤣 may now many students are Shouting “HOW should I get it!” . Don’t worry.

It’s easy to pick it up, and it’s not easy for bloggers to write high-quality articles all year long. Your attention and likes are the biggest motivators. Here is a small request, I hope you can meet me.

Follow my public account “Technology Galaxy”, and reply “1024 give me the power “to get the download link! Isn’t that easy? But this simple thing can give bloggers a lot of power! Thanks again to my fans for their continued support and to the students who will be following me soon!

Hope to see here also for the blogger this article three in a row: like, favorites, follow so that the blogger 1024 sections perfect!

I also want to thank the Nuggets for giving me this platform to share my technical knowledge happily. Thanks also to the nuggets operation students who work hard for us bloggers every day. I also wish you a happy 1024 holiday! 🎉

Color Color

Let’s move on to color. First of all, we need to know some basic knowledge about color.

Generally speaking, we think that the light we see is a monochromatic light. But in nature, we rarely see true monochromatic light. Most of the time light is a mixture of multiple colors.

The color of light is actually the length of the light wave. Our human eyes have a visible range of light between 400 nanometers and 760 nanometers. Some people are gifted, and they may go beyond that. Some people see more red, some see more purple. So everyone has a visual bias.

Therefore, there is no pure color light in nature. Some light is closer to the pure color of human beings. For example, laser pointer, which we played when we were young, will have red or green laser when pressing a button. (For those of you who like stroking cats, you probably get to play with this a lot.)

The laser pointer’s light intensity is very high, so it can also hit the ground to produce a very concentrated bright spot. But not if it’s a color flashlight, because it’s filtered with glass, so the purity and intensity of its light is not as high. When I was a child playing laser pen, there are often parents will warn us that the laser pen must not shine on the eyes, it is very dangerous, that is, because its light intensity is very high.

The important thing to realize here is that most of the light we see is a mixture of colors.

But why can we see so many colors? So we’re going to start with the three primary colors.

The CMYK and RGB

When we talk about color, we will talk about red, yellow and blue, so why are red, yellow and blue three colors? So why do red, yellow and blue stand out from all the other colors and light? Didn’t we say that light has different wavelengths? Is it theoretically impossible to tune out at different wavelengths? Because no matter how light gets mixed up, it reaches our eyeballs at the same time.

Well, the reason is in our eyes. We have cones in our eyes for sensing color and for sensing strong light, so we only have three types of cones. The three cones are sensitive to red, green and blue light. This is also the origin of our RGB color.

So no matter how complex nature’s light is, there are only three kinds of stimuli to our eyes in the end. So all we have to do is mix red, green, and blue in a certain proportion to get the corresponding color.

Some students find it strange that the three primary colors learned in childhood are red, yellow and blue, but when they grow up, they become red, green and blue (collectively known as RGB) when they write code. I want to ask you if you think this is a little weird?

I’m sure some of you will get to the bottom of it.

Let me tell you the answer:

“Actually, the red, yellow and blue we learn when we are young, it is not red, yellow and blue.” Wait…

Let me take my time.

It should be magenta, yellow and cyan. And these three colors are the complementary colors of red, green and blue, which means that the three primary colors in our color spectrum and the three primary colors that we used when we were kids, they are the same complementary colors. So why do we tune the complementary primary colors when we are young? Because when we were kids, we mixed pigments, and pigments actually absorb the corresponding light. And the light mixes together to enhance the corresponding light. So if we want to create all the corresponding colors with paint, we use red, yellow and blue primary colors.

In the printing industry will use magenta, green, yellow, also known as CMY color system. We will also find that in the printing industry, instead of CMY color, CMYK color is used. So why CMYK?

In fact, it is very easy to understand, because color pigments are relatively expensive, if we want to make black, we need to mix all the CMY colors together to make this black. But black is a very cheap ink, and magenta, cyan and yellow are very expensive ink. This means that we rarely take these three expensive inks and mix them together to make a very cheap black ink. (That sounds like a losing business!)

So the basic color used in the printing industry is CMYK. So they can maximize, use the lowest cost to save ink. Where the color needs to be darker, we will use the black ink in this CMYK to blend.

When we use CMY, there are many equivalent ways to write it, but there is a basic principle, which is to maximize the use of K.

An HSL with HSV

Here we cover the basic principles of color, but in programming we will find RGB color or CMYK color is not good. Because they are inconsistent with our intuitions about color. But it’s consistent with our biology. So for the sake of our programmers, a new color pedigree was created: HSL and HSV.

In the W3C standard, there is still a debate about which is better, HSL or HSV.

H and S of HSL and HSV are a relatively fixed color representation.

H is short for Hue. First of all, we have a palette of six colors. Then we can specify the Angle of the palette by Hue. Then we can specify the Hue of the color.

S is an abbreviation of Saturation, meaning purity. For example, the amount of noise in the color, the higher the S in the color, the brighter and purer the color.

The last one is either L or V. First of all, L stands for Lightness, brightness. What is V? V is Value, it can be translated as color Value, but what it really means is Brightness.

HSL and HSV are virtually identical in many cases. But the only difference is this:

• When Value reaches 100%, the color becomes a solid color
• Lightness is different. It is symmetrical up and down. When Lightness reaches 0%, it is black, and when it reaches 100%, it is pure white. So when we take a solid color, we need to take the middle value of Lightness.
• There is a logical difference between the two, and some people think THAT HSV is more consistent with human cognition

The W3C chose HSL because L is symmetric. However, there are two kinds of truth, which you like to use is ok. However, the W3C has limited us to HSL, but if we want to use HSV, there is no problem, because they are interchangeable. So when it comes to the color, we can still choose the one we like better. Of course, we can also not use HSL function, we can directly calculate it as RGB.

Having said that, HSL or HSV is a very important color notation anyway. Why is it important? Let’s use an example to illustrate.

Here we add a button and use JavaScript to dynamically change the border, background, and shadow colors of the button.

<style>
  .wrapper {
    display: flex;
    justify-content: center;
    margin: 2em;
  }
  .button {
    display: inline-block;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    font: 14px/100% Arial, Helvetica, sans-serif;
    padding: 0.5 em 2em 0.55 em;
    text-shadow: 0 1px 1px rgba(0.0.0.0.3);
    border-radius: 0.2 rem;
    box-shadow: 0 1px 2px rgba(0.0.0.0.2);
    color: white;
    border: solid 1px;
  }
</style>

<div class="wrapper">
  <div class="button">TriDiamond</div>
</div>

<script>
  let btn = document.querySelector('.button');
  let h = 25;
  setInterval(() = > {
    h++;
    h = h % 360;
    btn.style.borderColor = `hsl(${h}`, 95%, 45%);
    btn.style.background = `linear-gradient(to bottom, hsl(${h}, 95%, 54.1%), an HSL (${h}`, 95%, 24.1%));
    btn.style.boxShadow = `0 5px 15px hsl(${h}`, 95%, 24.1%);
  }, 100);
</script>
Copy the code

We can see that the actual performance is consistent with what we want. The color of the button is constantly changing, but the relationship between the light and shade of the color of the button itself and the brightness of the color is preserved while changing the color.

This is exactly the existence significance of HSL color as a semantic color. If we want to change the entire page to one color style, we just need to change the Hue. When combined with CSS variables or JavaScript operations, we have a lot of flexibility.

So much for color

Render to draw

Finally, let’s talk about drawing in CSS. In terms of drawing we will talk about three types of drawing:

• The geometry
  • border
  • box-shadow
  • border-radius
• The text
  • font
  • text-decoration
• The bitmap
  • background-image

There are a lot of different rules about drawing in CSS properties. But really want to compare, in fact also no more than these three kinds.

The geometry

The geometry is specified by some of our CSS properties, such as border, box-shadow, border-raius, etc., which produce some geometry. Some students also use them for unexpected effects, which Ms. Winter calls “dark magic.” For example, there are some “CSS pros “who use this border to spell all kinds of graphics, and have seen the five-pointed star.

However, modern CSS has a more straightforward and generic approach, so it is no longer recommended to use these native attributes to do more than they define (so-called “dark magic”). Of course, at that time, when CSS was not as developed as modern CSS, these students’ research was indeed worthy of admiration.

The text

The properties of the text, such as font and text-decoration, will produce different graphics. The font property of the text will not only affect the effect of the previous layout, but also affect the effect of our drawing.

In the text font file, it specifies the glyph for each text. This glyph is actually similar to our vector image, and it will eventually be drawn on the image in a similar way to the vector image.

The bitmap

The last category is bitmap, which is typically represented by background-image. Of course our IMG tag also generates images.

Graphics rendering

As for how browsers do this, we actually did a very simple block drawing in the article “Learning browser principles in Implementation”. But it actually relies on a graphics library. For example, mobile phones rely on the Skia graphics library, and there is a GDI version for Windows. So everything below that is going to be drawn using Shader.

To give you a more intuitive understanding of how Shader is drawn, let’s take a look at the Shader code:

• So let’s start with oneFragment ShaderTo draw
• aFragment ShaderIt’s probably made up of onemainThe input and the input in the function
• Its input is not written in arguments like we do in JavaScript, its input is justFragCoordThis variable
• FragCoordI have an xy coordinate
• The input is aFragColor
• As soon as we get thisFragColorJust get it right
• So the execution of main is to compute a color based on coordinates
• Here main is only a point process, because we can use GPU to speed up, so the main function will be executed tens of thousands of times in a moment, and finally the color will be calculated.

float distance(vec2 point, vec3 line) {
	return (line.x * point.x + line.y * point.y + line.z) / sqrt(point.x * point.x + point.y * point.y);
}

void main() {
  //vect2 st = gl_FragCoord.xy;
  vec4 lightgreen = vec4(0.26.0.72.0.51.1.0);
  vec4 darkgreen = vec4(0.208.0.286.0.368.1.0);
  vect4 white = vec4(1.0.1.0.1.0.1.0);
  
  Float d1 = distance(gl_FragCoord, vec3(1, -0.589, 100.0)); float d1 = distance(gl_FragCoord, vec3(1, -0.589, 100.0));
  float stepSize = 0.8;
  float a = 0.592;
  
  if (gl_FragCoord.x < 100.0) {
    float d1 = (100.0 - a * gl_FragCoord.y - gl_FragCoord.x + 10.0) / sqrt(0.589 * 0.589 + 1.0);
    float d2 = (100.0 - a * gl_FragCoord.y - gl_FragCoord.x + 50.0) / sqrt(0.589 * 0.589 + 1.0);
    float d3 = (100.0 - a * gl_FragCoord.y - gl_FragCoord.x + 87.0) / sqrt(0.589 * 0.589 + 1.0);
    
    gl_FragColor = mix(white, lightgreen, smoothstep( d1 - stepSize, d1 + stepSize, . 0 ));
    gl_FragColor = mix(gl_FragColor, darkgreen, smoothstep( d2 - stepSize, d2 + stepSize, 0.));
    gl_FragColor = mix(gl_FragColor, white, smoothstep( d3 - stepSize, d3 + stepSize, 0.));
  } else {
    float d1 = (100.0 - a * gl_FragCoord.y -  200.0 + gl_FragCoord.x + 10.0) / sqrt(0.589 * 0.589 + 1.0);
    float d2 = (100.0 - a * gl_FragCoord.y -  200.0 + gl_FragCoord.x + 50.0) / sqrt(0.589 * 0.589 + 1.0);
    float d3 = (100.0 - a * gl_FragCoord.y -  200.0 + gl_FragCoord.x + 87.0) / sqrt(0.589 * 0.589 + 1.0);
    
    gl_FragColor = mix(white, lightgreen, smoothstep( d1 - stepSize, d1 + stepSize, . 0 ));
    gl_FragColor = mix(gl_FragColor, darkgreen, smoothstep( d2 - stepSize, d2 + stepSize, 0.));
    gl_FragColor = mix(gl_FragColor, white, smoothstep( d3 - stepSize, d3 + stepSize, 0.));
  }
  
  if (gl_FragCoord.y > 187.0) gl_FragColor = vec4(1.0.1.0.1.0.1.0);
}
Copy the code

The final drawing is the Vue logo:

This is a canvas, not an image. We used it here instead of Vue’s original image. You don’t have to go into the frag code to get an idea of how Shader is drawn.

Apply tips

Here’s a little trick that I mentioned earlier in the geometry section, but it’s not recommended to use ready-made properties to assemble various shapes. According to Teacher Winter, “THE most exaggerated thing I saw was that everyone used gradient to spell a Super Mary”.

Even if the teachers don’t recommend it, I agree that it’s “Overkill”. But I was still curious about this god, so I went and found this code.

The image above, which is not a GIF in the game, was actually made using the GRADIENT property of CSS. Please trust your eyes!

Although this is not really useful when we are developing our business, I still want to give a thumbs up to this great god! Even if it doesn’t work, it proves that CSS is really powerful and that the front end can really do anything!

Curious students who want to see the god’s code can click on this portal to go to ~

Okay, back to business! Back to business! Back to business!

In fact, these practices are all belong to the strange technology, and did not bring much use to everyone, there is not enough universality, in the performance of the performance is also very poor.

So here’s the “official trick” (the official recommended trick), which is to use data URL + SVG. Here, since we can use background-image, we can turn this SVG into a data URI.

In all cases where we need to use an image, we can use inline SVG to draw the image. Because SVG is a professional format for vector graphics, it is basically uncomplicated for any graphics. The best I can do is embarrass our chicken shooter.

Here’s an example:

<img src="data:image/svg+xml,<svg with="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"><ellipse cx="300" cy="150" rx="200" ry="80" style="The fill: RGB (200100, 50); Stroke: RGB (0,0,100); stroke-width:2"/> </svg>" />
Copy the code

This example draws an ellipse:

This ellipse can also be used anywhere in CSS, no matter what graphics you want, because we support path in SVG. So we can have whatever shape we want, and we can draw it.

I’m Three diamonds from Tech Galaxy: “Learning is to grow, growing is not to regress. Persistence can succeed, failure is just because there is no persistence. Come on, students! See you next time!”

---

I hope my article can pay attention to the wechat public number “Technology Galaxy” to lifelong learning oh ~