CSS3 style study notes

Record some knowledge you did not know about CSS/CSS3 before.

Open Source Font library

Google font library

Google Font library is a free Web font library, but can not be used in China, you can use Google Font Chinese instead. Simply set the URL of the font in your CSS, like Lobster font:

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<link href="https://fonts.font.im/css? family=Lobster" rel="stylesheet" type="text/css">
Copy the code

shadow

Box-shadow is still quite common in styles, we would write something like this:

box-shadow:  0 10px 20px rgba(0.0.0.0.19);
Copy the code

The effect is as follows:

And we usually don’t write it the other way:

box-shadow: 0 10px 20px rgba(0.0.0.0.19), 15px 6px 16px rgba(50.250.50.0.7);
Copy the code

The effect is as follows:

That’s right, multiple shadows. Here’s another use of shadows, using shadows instead of ontologies:

<style>
  .center {
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100px;
    height: 100px;
    background-color: transparent;
    border-radius: 50%;
    box-shadow: 25px 10px 0px 0px blue;
  }
</style>
<div class="center"></div>
Copy the code

English case

A quick way to change the upper and lower case of a paragraph of English is to use styles.

value	The results of
lowercase	“transform me”
uppercase	“TRANSFORM ME”
capitalize	“Transform Me”
initial	Use default values
inherit	Use the parent element’s text-transform value.
none	Default: do not change the text.

About the color

Complementary color

The following are complementary colors:

Red (# FF0000) and turquoise (#00FFFF) Green (# 00FF00) and magenta (# FF00FF) Blue (# 0000FF) and yellow (# FFFF00)Copy the code

The colors above are easily represented by the three primary colors (all colors can be understood as combinations of the three primary colors)

Red (R) and blue-green (B+G) green (G) and magenta (R+B) Blue (B) and yellow (R+G)Copy the code

Three color

To explain what is a third color, first talk about what is a second color, such as blue-green (B+G) is just two colors of equal composition, one part Blue and one part Green, like this color is a second color composed of two colors of equal combination, there are three secondary colors: blue-green (G+B), magenta (R+B) and yellow (R+G). So what are cubic colors? When we evenly combine a primary color and a secondary color (except complementary colors)

An HSL color

Css3 can use name definition (predefined color), RGB (RGBA) color, HSL (HSLA) color. HSLA color consists of hue (color), saturation (color purity is 100% purest, the smaller the proportion is, the more gray it contains), brightness (black and white ratio is 100% pure white, 0% pure black) and transparency.

Example colors are as follows:

color	HSL
red	hsl(0, 100%, 50%)
huang	hsl(60, 100%, 50%)
green	hsl(120, 100%, 50%)
Blue, green	hsl(180, 100%, 50%)
blue	hsl(240, 100%, 50%)
magenta	hsl(300, 100%, 50%)

Linear gradient

<style>
  div {
    border-radius: 20px;
    width: 70%;
    height: 200px;
    margin: 50px auto;
background: linear-gradient(90deg, red, yellow, rgb(204.204.255));
  }
</style>
<div></div>
Copy the code

<style>
  div{
    border-radius: 20px;
    width: 70%;
    height: 200px;
    margin:  50 auto;
    background: repeating-linear-gradient(
      45deg,
      yellow 0px,
      yellow 40px,
      black 40px,
      black 80px
    );
  }
</style>
<div></div>
Copy the code

Hover gradient state

The following code allows the button to hover and change colors without suddenly changing colors

<style>
  button {
    border-radius: 5px;
    color: white;
    background-color: #0F5897;
    padding: 5px 10px 8px 10px;
  }

  button:hover {
    animation-name: background-color;
    animation-duration: 500ms;
    animation-fill-mode: forwards;
  }

  @keyframes background-color {
    100% {
      background-color: #4791d0; }}</style>
<button>Register</button>
Copy the code

Bezier curves of animation

See the following code, using the cubic-bezier function to describe the bezier curve of the animation, where the parameters correspond to two points, the parameters are :(x1,y1, x2,y2) points P1 (x1, y1) and P2 (x2,y2) respectively.

animation-timing-function: cubic-bezier(0.3.0.4.0.5.1.6);
Copy the code

We know that it takes four points to construct a Bessel curve within a region, as shown below. Since the region is defined and P0 and P3 are constant, only P1 and P2 coordinates are needed to uniquely determine an Inner Bessel curve

Note: The coordinates of P1 and P2 can be outside the region, such as: (0.5,3), (1.4, 1.1)

<style>
  .balls {
    border-radius: 50%;
    position: fixed;
    width: 50px;
    height: 50px;
    top: 60%;
    animation-name: jump;
    animation-duration: 2s;
    animation-iteration-count: infinite;
  }
  #green {
    background: green;
    left: 75%;
    animation-timing-function: cubic-bezier(0.311.0.441.0.444.1.649);
  }
  @keyframes jump {
    50% {
      top: 10%; }}</style>
<div class="balls" id="green"></div>
Copy the code

The above example resembles a juggling parabolic ball.

Picture description

We often use Alt as a substitute for text when images cannot be loaded. When img does not have Alt, images cannot be loaded successfully and will be broken. To avoid this problem, we can set Alt =”” to hide images.

<img alt="Picture introduction" src="https://gimg2.baidu.com/image_search/123.jpg">
<img alt="" src="https://gimg2.baidu.com/image_search/123.jpg">
Copy the code

Set the focus

You can give a non-focus object, such as div or P, a tabIndex attribute to get focus

<head>
  <style>
  p:focus {
    background-color: yellow;
  }
  </style>
</head>
<body>
  <header>
    <h1>Ninja Survey</h1>
  </header>
  <section>
      <p tabindex="0">Instructions: Fill in ALL your information then click <b>Submit</b></p>
  </section>
  <footer>&copy; 2018 Camper Cat</footer>
</body>
Copy the code

Barrier-free design

Design specifications are recommended for reference

[Material accessibility] (Material. IO/Design/USAB… Microsoft Corporation Inclusive Design: Microsoft-inclusive Design Web Content Accessibility Guidelines – WCAG 2.1

Color and contrast related sites

Getstark Tanaguru Tanaguru is an online color checker

Elastic box

Style in parent element, which is set in the parent element to make the child element conform to the style

display: flex; // Set the elastic boxflex-direction: row/row-reverse/column/column-reverse; // Sets the arrangement of child elementsjustify-content: flex-start(default)/flex-end/center/space-between/space-around/ space-instituted; // Set spindle alignmentalign-items: flex-start/flex-end/center/stretch(default)/baseline; // Set the alignment of the cross axesflex-wrap: nowrap(default)/wrap/wrap-reverse; / / branchflex-shrink: number; // Auto-shrink, similar to Ext'sflex 值
flex-grow: number; // Automatic growth, similar to Ext'sflex 值
flex-basis: number/auto; // Scaling base valueflex: 0 1 auto; // flex-shrink,flex-grow,flex-basisA mixture ofCopy the code

Styles in child elements

order: 1; // Sort the child elementsalign-self: flex-start/flex-end/center/stretch(default)/baseline; // You can set the alignment of the current child elementCopy the code

The grid

Style in parent element, which is set in the parent element to make the child element conform to the style

display: grid; // Set grid-template-columns: 50px 50px 150px 1fr 2fr; // Grid template column, fr represents the proportion of remaining controls, similar to Extjs Grid column parameterflex
grid-template-rows: 50px 50px 50px; // Add row grid-template-rows repeatedly:repeat(100.50px); / / repeat100 个 50pxThe columns of the grid - the template -columns: repeat(2.1fr 50px) 20px; / / repeat2A (1fr 50px), the last column20px

grid-column-gap: 10px; // Grid-row-gap:5px; // Grid-gap:5px 10px; // line-spacing -items: start/center/end/stretch(Default value); // Horizontal alignment of all child elementsalign-items: start/center/end/stretch(Default value); // All child elements are vertically aligned grid-template-columns: 100px minmax(50px.200px); // Restrict the width of the element column grid-template-columns: repeat(auto-fill, minmax(60px.1fr)); // Elastic layout grid-template-columns: repeat(auto-fit, minmax(60px.1fr)); // Elastic layout, better lookCopy the code

In the child element, give the image first

Figure 1

Figure 2

grid-column: 2/4; // The child element occupies space, as shown above1Row and line division, result reference graph2
grid-row: 3/4; // The child element occupies space, as shown above1Row and line division, result reference graph2
justify-self: start/center/end/stretch(Default value); // Horizontal alignmentalign-self: start/center/end/stretch(Default value); // You can also define the grid-area at once:1/1/2/4; Grid-area: horizontal start/vertical start/horizontal end/vertical end;Copy the code

It is relatively cumbersome to use the above method (row and line), but here is a more intuitive and convenient way:

<style>
  .item1{
    background:LightSkyBlue; grid-area: advert; // Region name}.item2{
    background:LightSalmon;
    grid-area: content;
  }
  .item3{
    background:PaleTurquoise;
    grid-area: footer;
  }
  .item4 {
    background: PaleGreen;
    grid-area: header;
  }
  .container {
    font-size: 40px;
    min-height: 300px;
    width: 100%;
    background: LightGray;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-gap: 10px; Grid-template-areas: // Add grid-area names to corresponding locations as grids, ". The number will go blank"header header header"
      "advert . content"
      ". footer footer";
  }
</style>
<div class="container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
</div>
Copy the code

The specific effects are as follows:

Adjust the media screen size

@media (min-width: 300px) {.container{
        grid-template-columns: auto 1fr;
        grid-template-rows: auto 1fr auto;
        grid-template-areas:
            "advert header"
            "advert content"
            "advert footer"; }}Copy the code

other

transform: scale(2.5); Enlarge / /2.5 倍
transform: skewX(-32deg); // X-axis rotation -32 度
transform: skewY(35deg); // Rotate the Y axis35 度

Copy the code