Front-end HTML/CSS (14)

About gradient

background-image: linear-gradient(90deg,yellow 0%,yellow 50%,transparent 50%),linear-gradient(75deg,red 0%,red 50%,transparent 50%);

Through the above code, it can be analyzed.

Multiple gradient effects can be used in background-image.
If multiple gradient effects are used, the one written first will be suppressed and the one written later.

Obtain the gradient value from the PSD design draft

Select mobile tool
Select automatic selection and change to layer.
Copy the CSS on the positioned layer

SMACSS specification

The core is classification: divided into five categories: divided into 5 files:

Basically, they are all single selectors, which can include attribute selectors, pseudo-type selectors, sub-selectors, and sibling selectors. Contains some default styles.
```
html,body,form,ul{
      
      
    margin:0;
    padding:0;
}
```
Layout
- Main components: the real top-level division of the page. Such as header, sidebar, content, footer
- Secondary components: login form, navigation items. It is the content placed in the main components of the HTML structure.
Usually ID or class selector.

Wrong choice
Module

The module (minor component) is located inside the layout component.

Avoid ID and element selectors. Try to use classes.
status

Things about interactivity are placed inside. For example, whether it is hidden or displayed.

It is used when naming various states is, and the most used is the class selector.

is-error
theme

Override the basic style, the default connection color, the default border, and the default font.

It is easy to routine after separation. Purpose of separation: to model recurring content.

Attribute writing rules: Write in the order of box model, border, background, text, and others.

The box model includes any attributes display, float, position, left, right, bottom, top, width, and height of the box.
Border: The border-radius attribute related to border.
Background: background
文本：font-family、font-size、letter-spacing
Others: The content that does not belong to the above is put to the end.

transition

Transition is the effect of an element gradually changing from one style to another.

step:

Specify the CSS properties to add effects to.
Specify the duration of the effect.

display: none; and display: block; cannot transition.

Define transition properties

Only the attributes defined in this attribute can last for a period of time in the form of transition rather than change instantaneously.

format:transition-property

all, transition all attributes.

Attributes that can use numerical values generally support transitions, and those that cannot be converted to numerical values generally do not support transitions.
A list of other values, a comma-separated list of attributes.

transition-property: width,height;

Define the duration of the transition properties

transition-durationUsed to define how long it takes to go from one state to another.

The default is 0s, s and ms can be written, but they can only be positive numbers.

If you only write one value when defining the time, all properties to be transitioned can be declared as one value.
```
transition-property: width,height;
transition-duration: 1s;
```
If you want each value in the transition-property attribute to last a different time, then give it a list.
```
transition-property: width,height;
transition-duration: 1s,2s;
```

How to adjust the transition

Under normal circumstances, the transition style is to start slowly, then join and then slow down. You can use transition-timing-function to modify.

ease, The default value, start slowly, then speed up, then slow down again.
linear, The entire transition maintains a constant speed.
ease-in, Start slowly, then accelerate.
ease-out, Start quickly, then slow down.
cubic-bezier(), Specify the cubic Bezier curve.

https://cubic-bezier.com/#.11,-0.54,.95,1.63

Delayed transition

Introduce a certain time delay between when you trigger the transition and the start of the transition.

transition-delay, The default is 0s, and transition-durationthe value is the same.

Short form

transition: property duration timing-function delay

In the shorthand for transition, property and duration are mandatory values.

If there are multiple attributes then now we have to use:

transition: property1 duration1 timing-function1 delay1,property2 duration2 timing-function2 delay2

The default value of the shorthand attribute:

transition-delay: 0s
transition-duration: 0s
transition-property: all
transition-timing-function: ease

Now if you use the transition: width,height 1s;wording, only height will take effect and the previous ones will be ignored.

1s = 1000ms

s: seconds

ms: milliseconds

Reverse transition

If the #f:hovertransition is only declared on the inside, it will only be triggered when the mouse is moved in, and it will instantly change to the original state when it is moved out.

If all transitions are applied to the default state, it is triggered by hover. At this time, when the mouse leaves, each attribute returns to the default state in the same time sequence.

Deformed

Before CSS3, elements were rectangular and could only be placed along the horizontal and vertical axes. Transformation was added after CSS3.

The deformed box will not affect the layout.

2D deformation: Only focus on the horizontal and vertical axis.

Deformation properties:transform

The value of value:

none, The default value, no distortion.
transform-fun Refers to the deformation method one by one.

2d deformation method

translatex(), To move the element along the x-axis of the element itself.
- px, pixel
- The font size of the em itself.
- %, calculated relative to the width of __self__.
translatey(), Move the element along the y axis of the element itself.

The value of transform can be a series of methods (multiple methods)

In the case of multiple deformation methods, the deformation methods are one after the other, separated by a space in the middle.

When using multiple deformation methods, set them correctly to ensure that all are effective. Otherwise, every error will go wrong.
translate(x,y), Refers to the above two shorthands of translatex and translateY.

If a value is omitted, then the value of y will be zero.

It is more appropriate and convenient to use transform to center horizontally and vertically when you don't know your own width and height.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <style>
        #f{
     
     
            position:relative;
            width:500px;
            height:500px;
            border:1px solid green;

        }
        #z{
     
     
            
            position:absolute;
            top:50%;
            left:50%;


            width:50%;
            height:50%;
            border:1px solid red;

            transform:translateX(-50%) translateY(-50%);

        }
    </style>
</head>

<body>
    <div id="f">
        <div id="z"></div>
    </div>
</body>

</html>

scaleX(), Zoom on the x axis
scaley(), Zoom on the y axis.

Scalex and scaley can only be unitless positive numbers (including decimals), and the value means how many times.

The deformed element can be larger or smaller than before, but the space occupied by the element on the page remains the same as before.
scale(x,y), Zoom in and out on the x-axis and y-axis at the same time.

If only one value is used on the scale, the value will be applied to both the x-axis and the y-axis.
skewx(), The element is twisted and deformed in the horizontal direction. If the value is positive, the upper left and lower right corners of the element will be 拉扯affected. If the value is negative, the upper right and lower left corners of the element will be affected.拉扯

skewy(), The element is twisted and deformed in the vertical direction. If the value is positive, the upper left and lower right corners of the element will be 拉扯affected. If the value is negative, the upper right and lower left corners of the element will be affected.拉扯

rotatez(), rotate()Rotation angle along the z axis specified.
Move origin

By default, the deformation takes the absolute center of the element as the origin (rotation) of the deformation, and the position of the origin can be changed by transform-origin.

The most commonly used, mainly is rotation.