This is the 19th day of my participation in the August More Text Challenge

Today, CSS3 added cool style, deformation animation 2D/3D a can not be less, of course, its browser support only mainstream browsers, some of the lower version of the browser can go home to watch Despicable Me 3 after all, also write out

​

Browser History

As you start writing CSS3, to avoid browser compatibility issues, let’s take a look at browser world wars

Why can’t browsers just have fun together and have weird compatibility issues?

(1) Because the major browsers are developed by different manufacturers, the core architecture and code used are also difficult to reconcile, which provides a hotbed for all kinds of inexplicable bugs (code errors).

(2) In addition to the major manufacturers for their own interests and set up a variety of technical barriers, so that CSS application is more troublesome than imagined. Browser compatibility is something we have to overcome.

Currently, the main browsers are Google Chrome, Mozilla Firefox, Internet Explorer, Safari, Opera, Baidu, 360, Sogou and Maxthon

​

First browser: Mosaic/Netscape Navigator(1994-2008) NN for short

Browser wars

The first browser wars occurred in the 1990s, when Microsoft released Its Internet Explorer browser and went up against Netscape Navigator. Microsoft had 1,000 people, Netscape had a dozen, and the first browser war ended with Microsoft winning. Undaunted, Netscape opened the source code, reorganized Mozilla, and added other browsers to the mix, and the second Browser War began in the 20th century

​

Seeing the browser melee reminded me of a picture on the Internet, and the joke got worse and worse

​

Browser Market Share (2016.12-2017.2)

​

The browser kernel represents the work

Trident:IE, Maxthon, Tencent, Theworld window, 360 browser

Representative work IE, because IE bundled in Windows, so occupy a very high market share, also known as IE kernel or MSHTML, this kernel can only be applied to the Windows platform, and is not open source.

Mozilla Firefox is open source. Its biggest advantage is that it is cross-platform and runs on major operating systems such as Microsoft Windows, Linux and MacOS X.

Webkit: Represents works Safari, Chrome, is an open source project.

Presto: Opera. Presto is a browser typography engine developed by Opera Software. It is also recognized as the fastest rendering engine in the world.

Range of new features

In the future we will prefix the styles we write, for example:

div
{
-ms-transform: translate(50px.100px);/* IE 9 */
-webkit-transform: translate(50px.100px);/* Safari and Chrome */
-o-transform: translate(50px.100px);/* Opera */
-moz-transform: translate(50px.100px);/* Firefox */
transform: translate(50px.100px);
}
Copy the code

Note that the order of writing is also important

Progressive enhancement: Build the page for the lower version browser to ensure the most basic functions, and then improve the effect, interaction and additional functions for the advanced browser to achieve a better user experience.

Degrade Graceful graceful Degradation: Build full functionality from the start, and then make it compatible with older browsers.

​

The difference between:

Elegant downgrading starts with a complex status quo and tries to reduce the supply of user experience, while progressive enhancement starts with a very basic, working version and expands to fit the needs of future environments. Downgrading (functional decay) means looking backwards; Incremental enhancement means looking forward while keeping its roots in a safe zone.

CSS3 new border border

The rounded border – the radius

Write a value to indicate that all four corners have rounded borders. If you want to set each corner separately, use the border-radius:10px 20px 30px 40px;

• The order of the four corners is top left, top right, bottom right, bottom left.
• The first value is top left, bottom right, and the second value is top right, bottom left.
• The first value is the upper left corner, the second value is the upper right corner, the lower left corner, and the third value is the lower right corner.

Kind of like tongue twister tappers, smooth toblique smooth toblique cough to understand, anyway, it’s rarely written like this

If you do not want to use shorthand, you can also set it separately:

border-top-left-radius: // top left border-top-right-radius: // top right border-bottom-right-radius: // bottom right border-bottom-left-radius: // bottom left cornerCopy the code

How to write you happy

Tip: There are two ways to use rounded corners: one is to set four corners to a rounded border-radius:2px, two is to write a circle, if you need a circle, you can directly write border-radius:50%

Font-family: arial, sans-serif; font-size: 16px; font-family: arial, sans-serif; font-size: 16px;

Border images

Border-image: ** url A B C D/width topbottom leftright

Of course this is a shortened version, the full words are as follows:

• Image address border-image-source: this is equivalent to the path of the image, this is easier to understand, do not need to repeat

• Image slice border-image-slice: This is a little complicated. First of all, you can not add units such as PX to the number filled in, but just fill in numbers or percentages. There are four values to fill in here, and the order is the same as margin.

​

Note: when specifically displayed, Border-top-left-image, border-top-right-image, border-bottom-left-image, border-bottom-right-image, border-bottom-right-image, border-bottom-right-image, border-bottom-right-image It doesn’t tile, it doesn’t repeat, it doesn’t stretch, it’s like a blind spot in vision.

• Border-image-width specifies the width of the border of the element. It can also be shortened in border-image. The width is written in the same order as margin

• The image border-image-repeat is used to specify how the images in the four edges of the element should be displayed, such as tiled or stretched. Only those circled in red can be tiled or stretched.

For example, border-image-repeat:repeat(tile) stretch if both values are specified, the first value is the display method of the image in the upper and lower edges, and the second value is the display method of the image in the left and right sides.

Shadows of new CSS3 features

If the shadow in front of you do not be afraid, because there is light behind

Shadow box

Box-shadow: X-axis of the shadow (can be negative), Y-axis of the shadow (can be negative), blur distance, shadow size, shadow color, inner shadow inset or outer shadow

If box-shoadow:0 0 10px 5px red; When the value of x and y is 0, the shadow will be in the current position, the x and y values will be adjusted, positive numbers will be down right, negative numbers will be up left.

How to set the shadow separately?

<div  style="box-shadow: -10px 0px 10pxRed, /* Left shadow */0px -10px 10px # 000/* Upper shadow */10px 0px 10pxGreen, /* Shadow on the right */0px 10px 10px blue;" /* Lower shadow */ > 
</div>
Copy the code

Text shadow

Text-shadow: the position of the horizontal shadow, the position of the vertical shadow, the distance of the blur, and the color of the shadow (x and y are positive for the shadow direction downward right, negative for the shadow direction upward left)

Of course you can write multiple, separated by commas

Background on the new CSS3 features

background-image

You can set multiple background-images for an element, and all of them will be displayed

Background: URL (A.jpg), URL (B.jpg) of course, the default background is tiled, you can see these backgrounds, first add a no-repeat

background-size

Control the size of the background image, you can specify a number or percentage and of course the options it gives you, such as cover or contain

For example: background-size: 20px 30px; The first value indicates the width of the background image and the second value indicates the height of the background image. As opposed to cover, it basically shrinks the background image to fit the entire container. The default value is Auto, which keeps the background image at its original height and width.

background-origin

This property specifies the area (border, padding, or content) from which the background is drawn, but only controls where the background is drawn.

​

From the above figure, we can see that the background color and background image start and end are different, but we can set it freely

Note: If the background image background-attachment is “fixed”, this property has no effect.

The background-orgin property can have the following three values:

• padding-boxThe relative position of the background image fill box
• border-boxThe relative bit of the bounding box of the background image
• content-boxBackground image relative position of the content box

background-clip

Used to modify the display range of the background

​

CSS3 provides a background-clip that can change the display range of an element. The background-clip provides the following properties:

Border-box indicates that the background range includes the border area (default)

Padding-box indicates that the background is clipped to the inside margin box without the border

The Content-box background is clipped to the content box, excluding the margin area and border area

The renderings of the three attribute values are as follows:

Note: Background-origin and background-clip look very similar, and the effect is the same. Background-origin is used to indicate the point from which the background should be drawn. This will be found when you have position in your code

Gradient background

1. Linear Gradients – Down/up/left/right/diagonal

In a linear gradient, colors move along a straight line, from left to right, right to left, top to bottom, bottom to top, or along any axis.

Syntax: background:linear gradient(gradient direction, COLOR1, COLOR2,color3…) Don’t forget the prefix. – Webkit. – What

Gradient direction: bottom bottom right, right, top right, top, top left, left, bottom left,30deg

If you want more control over the direction of the gradient, you can define an Angle.

The Angle is the Angle between the horizontal line and the gradient line, calculated counterclockwise. In other words, 0DEg will create a gradient from bottom to top and 90deg will create a gradient from left to right.

​

For example: background: linear – gradient (270 deg, red, blue, black);

Note: CSS3 also supports transparency, which can be used to create fade and fade effects

Repeating-linear-gradient () is used to repeat a linear gradient

{background: repeating-linear-gradient(red, yellow 10%, green 20%) ; }

Note: Use repeatability only if the gradient area cannot be 100%, otherwise tiling will not work

1. Radial Gradients are those that start at a point and spread outwards into a circle or ellipse. Therefore, Radial Gradients first need to determine a central point, and then size and shape. The color node of a radial gradient is a list of colors, just like a linear gradient.

Syntax: -webkit-radial-gradient (Set the center of the gradient, the gradient shape, the gradient size, the start color value, the middle color value the middle color position, and the end color)

To create a radial gradient, you must also define at least two color nodes. Color nodes are the colors that you want to make smooth transitions.

You can also specify the center, shape (prototype or oval), and size of the gradient. By default, the center of the gradient is Center and the shape of the gradient is Ellipse.

The size of the gradient is apapis-corner

Gradient direction:

• center center: Center point diffusion (default)
• left top: diffuses from the upper left corner
• center topSpread out from the middle of the top
• right topIt spreads out from the bottom right
• right center It spreads out from right center
• right bottom It spreads out from the bottom right
• center bottom It spreads out from the center of the bottom
• left bottomIt spreads out from the upper left corner of the element

Gradient shape:

• CircleCircular gradient
• EllipseThe elliptical gradient

The size parameter defines the size of the gradient. It can have the following four values:

• closest-side: Specifies that the radius length of the radial gradient is from the center of the circle to the edge nearest the center
• closest-corner: Specifies that the radius length of the radial gradient is the Angle from the center to the nearest center of the circle
• farthest-side: Specifies that the radius length of the radial gradient is from the center of the circle to the edge farthest from the center
• farthest-corner: Specifies that the radius length of the radial gradient is from the center of the circle to the Angle farthest from the center

Background: URL (logo.png), radial-gradient(circle, #ace, #f96, #1E90FF);

The forehead (even though it’s o… It’s got a bunch of properties on it, but it’s still going to be written by default, so it’s going to be written by default, so you get the idea

Background :repeating-radial gradient() repeated radial gradient

background:-webkit-repeating-radial-gradient(left, circle, #ace 10%, #f96 20%, #1E90FF 40%);

New CSS3 features 2D/3D conversion

transform

Transform: translate/rotate/scale/tilt

1. Translate (x coordinate, y coordinate)Method controls the movement of an element from its current position,transform:translate(150px,200px) 

Positive numbers go right and down, negative numbers go left and up

Currently, if you only want to move translateX and translateY in one direction, if you just fill in translateX(150px), the effect is the same as translateX(150px).

Transform: Translate (150px,200px) The black dot is the center of the element

​

Note: Displacement does not change the document flow of an element

Note: The origin is at the center of the element, that is, the element is deformed or rotated around this point. Of course, only this property is set. Okay

The transform property, of course, is the default, but you can modify it

How to modify the element deformation reference point?

Transform-origin: Left center right top center bottom

Note: The origin is usually set before transformation.

rotate

The rotate(xdeg) method rotates elements clockwise (positive) and counterclockwise (negative) based on a given Angle.

Example: transform: rotate(20deg)

So I’m going to write a playing card and I’m going to look at rotate

Case source:

<! DOCTYPEhtml>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
body{
background:#ABC;
}
.Showbox{
height: 400px;
width:200px;
margin:100px auto;
position:relative;
}
.Showbox img{
height:400px;
width:200px;
box-shadow: 4px 4px 7px gray;
border:1px solid darkseagreen;
border-radius: 7px;
position:absolute;
transition: all 3s;
-webkit-transition: all 3s;
transform-origin:bottom center;
}
.Showbox:hover .img8{
-webkit-transform: rotate(40deg);
transform: rotate(40deg);
-moz-transform:rotate(40deg); }.Showbox:hover .img7{
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
-moz-transform:rotate(30deg); }.Showbox:hover .img6{
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
-moz-transform:rotate(20deg); }.Showbox:hover .img5{
-webkit-transform: rotate(10deg);
transform: rotate(10deg);
-moz-transform:rotate(10deg); }.Showbox:hover .img4{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-moz-transform:rotate(0deg); }.Showbox:hover .img3{
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
-moz-transform:rotate(-10deg); }.Showbox:hover .img2{
-webkit-transform: rotate(-20deg);
transform: rotate(-20deg);
-moz-transform:rotate(-20deg); }.Showbox:hover .img1{
-webkit-transform: rotate(-30deg);
transform: rotate(-30deg);
-moz-transform:rotate(-30deg); }</style>
</head>
<body>
<figure class="Showbox">
<img class="img1" src="img/1.jpg"/>
<img class="img2" src="img/11print.jpg"/>
<img class="img3" src="img/12print.jpg"/>
<img class="img4" src="img/14print.jpg"/>
<img class="img5" src="img/1print.jpg"/>
<img class="img6" src="img/7print.jpg"/>
<img class="img7" src="img/6print.jpg"/>
<img class="img8" src="img/3print.jpg"/>
</figure>
</body>
</html>
Copy the code

skew

Skew (30DEg, 40DEg) is used to process the skew of elements. The first parameter is the horizontal skew Angle and the second parameter is the vertical skew Angle

You can also write skewX(30DEg)/skewY(30DEg) separately. If you write skew(30DEg) as skewX(30deg), how does skewX skewX(30DEg) tilt

​

scale

The scale(x, y) method is used to scale elements. The parameter represents the multiple of horizontal/vertical scaling. The scaling base is 1. If the value is greater than 1, the element will be enlarged

If 0 is passed in, the element is not visible

Here is the 3D transformation, we have successfully made the leap from 2d to 3D

3D displacement: 3D displacement in CSS3 mainly includes translateZ() and translate3D ();

3D rotation: 3D rotation in CSS3 mainly includes four functional functions rotateX(), rotateY(), rotateZ() and Rotate3D (); Rotate3d () four function functions;

3D scaling: 3D scaling of C in CSS3 mainly includes scaleZ()

To get a better idea of 3d coordinates, we start with Rotate. RotateX (), rotateY(), rotateZ()

​

Let’s take a look at this 3d graph, x,y,z. How does rotateX() rotate? Think of your favorite lamb kebabs in summer or the gymnastics team with the most MEDALS in the Chinese Olympics. Their sport is rotateX()

The famous pole dance is actually rotateY(), so the steering wheel is more appropriate than rotateZ(). Let’s look at the effect of the following code

        div{
            width: 200px;
            height: 200px;
            background: url(qy.jpg);
            background-size: 200px 200px;
            transform: rotateY(80deg);
        }
Copy the code

​

If rotateX/rotateY/rotateZ helps you understand perspective position, translateZ helps you understand perspective position. The smaller the translateZ value is, the smaller the child element is. The larger the translateZ value is, the larger the element will be.

The key to 3D implementation is to have the perspective view, an essential attribute: The presence or absence of the Perspective attribute determines whether what you see is 2-dimensional or 3-dimensional, that is, 2D transform or 3D

If you write a translateZ without a perspective, it will not have any effect

How to calculate the value of perspective: assuming that the screen resolution is 1680760 and the distance between the human eye and the display is 1.2 screen widths, 16801.2=2000 Perspective property sets the lens to the element plane

Distance. For example, Perspective (300px) indicates that the lens is 300 pixels away from the element’s surface

​

Understand perspective: Perspective can only be set to px, not %. A smaller value means the user’s eyes are closer to the screen, creating a larger 3D stage. Conversely, a larger value indicates the user’s eye distance

The further away from the screen, the smaller the 3D stage is created. It’s easy to understand, things look bigger as they get closer, and things look smaller as they get farther away.

​

In the figure, D is the perspective distance, and Z is the displacement of the translateZ axis. The 3D stage will be enlarged when the Z axis is shifted forward. Conversely, the 3D stage will shrink when the Z axis is shifted negatively. Above Z is half of D, so the elements on the 3D stage will be twice as large.

The perspective attribute can be written in two forms, one for stage elements (the common parent of animation elements); The second is used on the current animation element, along with the other properties of the Transform. Such as

Example code:

.stage {
    perspective: 600px; } and:#stage .box {
    transform: perspective(600px) rotateY(45deg);
}
Copy the code

Note: in CSS3 only value elements with perspective will have a Z-axis, and elements whose Perspective is None will have no Z-axis (i.e., 2D elements).

Transform-style is a relatively simple property with only two values flat and preserve-3D. Used to specify that the stage is 2D or 3D. The default flat indicates a 2D stage, where all child elements are presented in 2D. ‘Preserve-3D, as the name suggests, represents a 3D stage, where all child elements are presented in 3D. Note that it is not useful to specify this property on the morphing element itself; it is used to specify the stage, so set this property on the parent element of the morphing element. Once set, all child elements share the stage.

The code is as follows:

<! DOCTYPEhtml>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box{
            width: 500px;
            height: 500px;
            background-color: #0084bb;
            transform:perspective(1200px) rotateY(45deg);
            transform-style: preserve-3d;
        }
        img{
            transform: translateZ(100px);
        }
    </style>
</head>
<body>
<div class="box">
   <img src="qy.jpg" />
</div>
</body>
</html>
Copy the code

Comparing the following figure, you can intuitively find the difference between adding and not adding

​

CSS3 new feature animation

transition

1. transition Property is a shorthand property used to set four transition properties: actually understoodtransitionImportant to understand, it is the smooth transition of CSS styles

With CSS3, you can add effects to elements as they transform from one style to another without using Flash animation or JavaScript

• Transition: All 2s 1s ease
• transition-propertySpecifies the name of the CSS property that applies the transition.
• transition-durationDefine how long the transition effect takes. The default is 0.
• transition-timing-function A time curve specifying transition effects. The default is”ease“.
• transition-delaySpecify when the transition effect begins. The default is 0.

Note: transitions do not translate from nothing to something, as is often the case when someone wants to transition display: None to display:block

Time curve:

• linearSpecify the transition effect from beginning to end at the same speed
• easeDefine the transition effect of starting slowly, then getting faster, then finishing slowly
• ease-inSpecify the transition effect of a slow start
• ease-out Specify the transition effect of ending at a slow speed
• ease-in-outSpecify the transition effect of a slow start and finish

@keyframes

Animation is created by the @keyFrames rule, which specifies that one or more CSS styles can be changed from their current state to a new style that can replace gifs, Flash animations, and javaScript in web pages

Animation is the effect of gradually changing an element from one style to another, changing as many styles as you want as many times. Specify when the change occurred in percentage terms, or use the keywords “from” and “to”, equivalent to 0% and 100%. 0% is the beginning of the animation, 100% is the completion of the animation.

Syntax: animation: name time Delay time motion mode number of cycles reverse whether there is also animation;

• animation: Short for all animation properties
• animation-name: rules@keyframesName of the animation.
• animation-durationSpecifies the number of seconds or milliseconds it takes for the animation to complete a cycle. The default is 0.
• animation-timing-functionSpecifies the speed curve of the animation. The default is”ease“

​

• animation-direction Property defines whether the animation is played alternately in reverse normalNormal, alternate Animation in odd number of times (1, 3, 5…) Forward, in even number of times (2, 4, 6…) Reverse playback
• animation-delay Specifies when the animation should start. The default is 0.
• animation-iteration-count : Specifies the number of times the animation is played. The default is 1,infinitePlay an infinite number of times.

Animation -play-state: Paused Will always miss an important step above the use method given on w3School website, but missing a very important step

To put it simply, we have been using animation to achieve linear gradient animation

1. Position from start to finish at a fixed time
2. The dimensions change linearly over fixed time
3. Linear color change and so on

The step value is introduced if you want to animate frames rather than linear changes, in other words, there are no transitions, but rather frame changes, one by one

Note: Whether it’s an animation or a video, we should all know one thing: what is the name of the animation, how long does it play, how fast does it play, does it delay, does it play unlimited times, does it play backwards, does it pause

Steps function

Let’s look at the steps function in detail. The steps function specifies a step function

Ease is defined by the animation-timing-function property of cSS3. Ease is defined by the animation-timing-function property of cSS3. Once animation-timing-function is defined, the animation will execute according to the defined curve.

But in addition to these values,animation-timing-function can also be steps(x,startend) which takes two parameters, The first frame is the end of the first step of the animation, and the first frame is the beginning of the animation. What is the difference between the first frame and the previous ones?

If you define a curve, the animation will flow smoothly from frame to frame, while if you define steps, the animation will jump directly from one frame to another.

For example: Write a color transition animation with 0%{red} and 100% {black}. If you use the previous animation curve, it starts red and then goes from red to gray and then gradually fades to black. For steps, the color is red and then black, without the transition effect. But then again, the whole point of writing an animation is because it can add over animation, so it depends which one you choose.

Fonts and icon fonts

Website before the font must be the user’s computer has been installed on the font, otherwise wouldn’t be displayed, but the serious influence to the designer’s aesthetic, so with CSS 3, web page designers can use any font, we put the font file included in the website, it will automatically download to need to customers

1. Go to the download: I use font download address: http://font.chinaz.com/zhongwenziti.html

2. Install Fonts: copy the downloaded font file (AaPrincessPeach. TTF) into C:\Windows\Fonts

3. Use in HTML pages

<style>       
 @font-face {
        font-family: "fontname";
        src: url("AaPrincessPeach.ttf");
    }
   div{
            font-family: fontname;
}
</style>
Copy the code

What if you have multiple fonts on your website? It’s easy, just copy the @font-face of the imported font

Icon font

Not all of the small ICONS you see on the web are Sprite or small ICONS, but some of them may be icon fonts. Icon font is the icon into a font, use the same as ordinary font, you can set the size, color, transparency and so on, are the same. The biggest advantage is that the font vector has no distortion characteristics, while compatible with IE6, and the generated file is relatively small, 215 ICONS generated TTF font file only 41KB

1. First go to download: iconfont I use download address: http://www.iconfont.cn/

2. Select the icon you want, click Add to Cart, and then click the cart icon when you have selected everything

​

​

At this stage you may be a little dizzy is how to give so many files, and the suffix are so strange, first to understand the new suffix are what, and then use

​

Also, you can see why there are so many formats, or is it because of browser compatibility issues, which means that you want it to be compatible with more browsers, so you only fill in a few formats when you use it

3. Begin to use

First fill in the CSS

@font-face {font-family: "iconfont";
  src: url('iconfont.eot? t=1499824504946'); /* IE9*/
  src: url('iconfont.eot? t=1499824504946#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('iconfont.woff? t=1499824504946') format('woff'), /* chrome, firefox */
  url('iconfont.ttf? t=1499824504946') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ * /url('iconfont.svg? t=1499824504946#iconfont') format('svg'); / * iOS 4.1 - * /
}
.iconfont {
  font-family:"iconfont" ! important;
  font-size:16px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon-fengji:before { content: "\e609"; }
.icon-shidu:before { content: "\e60a"; }
.icon-shuitongfa:before { content: "\e60b"; }
.icon-taiyangyu:before { content: "\e60c"; }
.icon-eryanghuatannongdu:before { content: "\e613"; }
<i class="iconfont icon-fengji"></i>
Copy the code

4. Other website applications, you can F12 look at the head of taobao home page, is to use the icon font

​

Icon font versus Sprite?

Disadvantages of Sprite:

1. Hd will be distorted
2. Not easy to change, because it is a static picture can not be dynamichoverChange colors or other effects

Icon fonts are perfect to solve the above problems, and also have good compatibility, while generating small files. However, icon fonts also have their own weaknesses and do not support multicolor ICONS. Although there are also multicolor ICONS in SVG, browser support is not particularly good, so in the future, you can use icon fonts and Sprite images reasonably according to the situation.

How to do if you want to do your own icon font? Give you a link to their insight under http://jingyan.baidu.com/article/9158e000342ba6a25412281f.html

To sum up: it’s a bit long, but it shows off all the new features in CSS3, and having CSS3 really gives us a kick in the pants.