1. Introduction
Css3 this believe that we are not unfamiliar, is a very interesting, magical things! With CSS3, JS can write a lot less! I’ve written about CSS3 before, and I’ve encapsulated some of the little animations for CSS3. Personally, I think CSS3 is not difficult, but it is difficult to use well, use smoothly, recently I have also gone over some new features of CSS3 (not all, is I used in work, or feel useful), as well as some examples, and write this summary! Hopefully, this article can help you understand CSS3. Write this article is to let everybody can understand cSS3 some new features, as well as the basic usage, feel the charm of CSS3! If you want to use CSS3 well, this depends on you to continue to study hard, to find some more in-depth articles or books! If you have any other features recommended, welcome to add! Study together and make progress!
Check out this article for code that you don’t have to look too closely! Here is to let you know about the new features of CSS3! The code is also very basic. The main reason I’m giving you this code is to run it in your browser, so you can look at it and debug it. Don’t just look at the code. If you just look at the code, you won’t know which code does what.
2. The transition
Transitions are one of the most common features I use in my projects! Also believe that many people use the most of an example! I usually use is to let some interactive effects (mainly hover animation), become lively, not so stiff! Okay, let’s get into the text!
To quote beginner tutorials: A CSS3 transition is the effect of an element gradually changing from one style to another. To do this, you must specify two things: The CSS property that specifies the effect to be added specifies the duration of the effect.
2-1 syntax
Transition: CSS properties, time taken, Effect curve (ease by default), Latency (0 by default)Copy the codeChestnut 1
*/ transition: width,.5s,ease,.2s */ Transition: width,.5s,ease,.2sCopy the codeChestnut 2
/* A transition of all attributes from the original value to the specified value, movement curve ease, movement time 0.5 seconds */ Transition: all,.5sCopy the codeIt is also possible to write the properties separately (this will not be repeated below).
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
Copy the code2-2 Instance -hover effect
The above two buttons, the first one uses the transition, the second one does not use the transition, you can see the difference, after using the transition is not so stiff, there is a process of change, it is more vivid. The only difference is that the first button has transition code added. Transition: all.5s;
2-3 Instances – dropdown menu
The two menus above, the first one does not use the transition, the second one uses the transition, you can clearly see the difference, using the transition looks more comfortable! The code difference is that the parent element (ancestor element) of ul with the transition has a class name (ul-transition). Ul-transition ul{transform-origin: 0 0; transition: all .5s; }
Maybe you don’t know what I’m talking about! Let me post the code
html
<div class="demo-hover demo-ul t_c">
<ul class="fllil">
<li>
<a href="javascript:;">html</a>
<ul>
<li><a href="#">div</a></li>
<li><a href="#">h1</a></li>
</ul>
</li>
<li>
<a href="javascript:;">js</a>
<ul>
<li><a href="#">string</a></li>
<li><a href="#">array</a></li>
<li><a href="#">object</a></li>
<li><a href="#">number</a></li>
</ul>
</li>
<li>
<a href="javascript:;">css3</a>
<ul>
<li><a href="#">transition</a></li>
<li><a href="#">animation</a></li>
</ul>
</li>
<li>
<a href="javascript:;">< span style = "box-sizing: border-box; color: RGB (74, 74, 74); line-height: 22px; white-space: inherit! Important;"#">vue</a></li>
<li><a href="#">react</a></li>
</ul>
</li>
</ul>
<div class="clear"></div>
</div>
<div class="demo-hover demo-ul ul-transition t_c">
<ul class="fllil">
<li>
<a href="javascript:;">html</a>
<ul>
<li><a href="#">div</a></li>
<li><a href="#">h1</a></li>
</ul>
</li>
<li>
<a href="javascript:;">js</a>
<ul>
<li><a href="#">string</a></li>
<li><a href="#">array</a></li>
<li><a href="#">object</a></li>
<li><a href="#">number</a></li>
</ul>
</li>
<li>
<a href="javascript:;">css3</a>
<ul>
<li><a href="#">transition</a></li>
<li><a href="#">animation</a></li>
</ul>
</li>
<li>
<a href="javascript:;">< span style = "box-sizing: border-box; color: RGB (74, 74, 74); line-height: 22px; white-space: inherit! Important;"#">vue</a></li>
<li><a href="#">react</a></li>
</ul>
</li>
</ul>
<div class="clear"></div>
</div>
Copy the codecss
.demo-ul{margin-bottom: 300px; } .demo-ul li{ padding: 0 10px; width: 100px; background:#f90;
position: relative;
}
.demo-ul li a{
display: block;
height: 40px;
line-height: 40px;
text-align: center;
}
.demo-ul li ul{
position: absolute;
width: 100%;
top: 40px;
left: 0;
transform: scaleY(0);
overflow: hidden;
}
.ul-transition ul{
transform-origin: 0 0;
transition: all .5s;
}
.demo-ul li:hover ul{
transform: scaleY(1);
}
.demo-ul li ul li{
float: none;
background: #0099ff;
}
Copy the codeThe above two can be said to be very basic transition usage, transition usage is flexible, powerful, combined with JS, can easily achieve a variety of effects (focus map, accordion), and many unexpected effects. It’s up to everyone to dig!
3. The animation
Animation this common use is also a lot of, mainly to do a preset animation. With some page interaction animations, the results and transitions should be the same, making the page less rigid!
3 – (1) grammar
Animation: Animation name, time spent in a cycle, motion curve (ease by default), animation delay (Ease by default), number of times to play (1 by default), whether to play the animation back (normal by default), whether to pause the animation (Running by default)Copy the codeChestnut 1
Linear */ animation: logo2-line 2s linear*/ animation: logo2-line 2s linear;Copy the codeChestnut 2
Linear */ animation: logo2-line 2s linear 2s; linear*/ animation: logo2-line 2s linear 2s;Copy the codeChestnut 3
/* animation: logo2-line 2s alternate infinite; /* animation: logo2-line 2s alternate infinite;Copy the codeThere’s another important property
animation-fill-mode : none | forwards | backwards | both; /* None: do not change the default behavior. Forwards: When the animation is finished, keep the last property value (defined in the last keyframe). Backwards: Apply the start property value (defined in the first key frame) within a period of time specified by animation-delay, before the animation is displayed. Both: Forward and backward fill modes are applied. * /Copy the code3-2. Logo display animation
This is an animation I wrote with the company logo, not that elaborate
The following code
<! DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="reset.css">
</head>
<style>
.logo-box{
width: 600px;
margin: 100px auto;
font-size: 0;
position: relative;
}
.logo-box div{
display: inline-block;
}
.logo-box .logo-text{
margin-left: 10px;
}
.logo-box .logo1{
animation: logo1 1s ease-in 2s;
animation-fill-mode:backwards;
}
.logo-box .logo-text{
animation: logoText 1s ease-in 3s;
animation-fill-mode:backwards;
}
.logo-box .logo2{
position: absolute;
top: 20px;
left: 20px;
animation: logo2-middle 2s ease-in;
}
.logo-box .logo2 img{
animation: logo2-line 2s linear;
}
@keyframes logo1 {
0%{
transform:rotate(180deg);
opacity: 0;
}
100%{
transform:rotate(0deg);
opacity: 1;
}
}
@keyframes logoText {
0%{
transform:translateX(30px);
opacity: 0;
}
100%{
transform:translateX(0);
opacity: 1;
}
}
@keyframes logo2-line {
0% { transform: translateX(200px)}
25% { transform: translateX(150px)}
50% { transform: translateX(100px)}
75% { transform: translateX(50px)}
100% { transform: translateX(0); }
}
@keyframes logo2-middle {
0% { transform: translateY(0); }
25% { transform: translateY(-100px); }
50% { transform: translateY(0); }
75% { transform: translateY(-50px); }
100% { transform: translateY(0); }
}
</style>
<body>
<div class="logo-box">
<div class="logo1"><img src="logo1.jpg"/></div>
<div class="logo2"><img src="logo2.jpg"/></div>
<div class="logo-text"><img src="logo3.jpg"/></div>
</div>
<div class="wraper"><div class="item"></div></div>
</body>
</html>
Copy the codeLet me show you a professional level
The following code
<! DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
body {
font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
overflow: hidden;
background: #fff;
}
.center {
margin: 80px auto;
}
.so {
display: block;
width: 500px;
height: 156px;
background: #ffffff;} .so .inner { width: 500px; height: 156px; position: absolute; } .so .inner * { position: absolute; animation-iteration-count: infinite; Animation - duration: 3.5 s; } .so .inner .name { position: absolute; font-size: 54px; left: 130px; top: 95px; } .so .inner .name .b { font-weight: bold; } .so .inner .stack-box { top: 100px; width: 115px; height: 56px; } .so .inner .box { width: 115px; height: 56px; left: 0px; } .so .inner .box div { background:#BCBBBB;
}
.so .inner .box .bottom {
bottom: 0px;
left: 0px;
width: 115px;
height: 12px;
}
.so .inner .box .left {
bottom: 11px;
left: 0px;
width: 12px;
height: 34px;
}
.so .inner .box .right {
bottom: 11px;
left: 103px;
width: 12px;
height: 34px;
}
.so .inner .box .top {
top: 0px;
left: 0px;
width: 0;
height: 12px;
}
.so .inner .stack {
left: 22px;
top: 22px;
}
.so .inner .stack .inner-item {
background: #F48024;width: 71px; height: 12px; }.so.inner.stack.item {transition: transform 0.3s; width: 291px; } .so .inner .stack div:nth-child(1) { transform: rotate(0deg); } .so .inner .stack div:nth-child(2) { transform: rotate(12deg); } .so .inner .stack div:nth-child(3) { transform: rotate(24deg); } .so .inner .stack div:nth-child(4) { transform: rotate(36deg); } .so .inner .stack div:nth-child(5) { transform: rotate(48deg); } .so .inner .box { animation-name: box; } .so .inner .box .top { animation-name: box-top; } .so .inner .box .left { animation-name: box-left; } .so .inner .box .right { animation-name: box-right; } .so .inner .box .bottom { animation-name: box-bottom; } .so .inner .stack-box { animation-name: stack-box; } .so .inner .stack { animation-name: stack; } .so .inner .stack .inner-item { animation-name: stack-items; } .so .inner .stack .item:nth-child(1) { animation-name: stack-item-1; } .so .inner .stack .item:nth-child(2) { animation-name: stack-item-2; } .so .inner .stack .item:nth-child(3) { animation-name: stack-item-3; } .so .inner .stack .item:nth-child(4) { animation-name: stack-item-4; } .so .inner .stack .item:nth-child(5) { animation-name: stack-item-5; } @keyframes stack { 0% { left: 22px; } 15% { left: 22px; } 30% { left: 52px; } 50% { left: 52px; } 80% { left: 22px; } } @keyframes stack-item-1 { 0% { transform: rotate(12deg * 0); } 10% { transform: rotate(0deg); } 50% { transform: rotate(0deg); } 54% { transform: rotate(0deg); } 92% { transform: rotate(12deg * 0); } } @keyframes stack-item-2 { 0% { transform: rotate(12deg * 1); } 10% { transform: rotate(0deg); } 50% { transform: rotate(0deg); } 54% { transform: rotate(0deg); } 92% { transform: rotate(12deg * 1); } } @keyframes stack-item-3 { 0% { transform: rotate(12deg * 2); } 10% { transform: rotate(0deg); } 50% { transform: rotate(0deg); } 54% { transform: rotate(0deg); } 92% { transform: rotate(12deg * 2); } } @keyframes stack-item-4 { 0% { transform: rotate(12deg * 3); } 10% { transform: rotate(0deg); } 50% { transform: rotate(0deg); } 54% { transform: rotate(0deg); } 92% { transform: rotate(12deg * 3); } } @keyframes stack-item-5 { 0% { transform: rotate(12deg * 4); } 10% { transform: rotate(0deg); } 50% { transform: rotate(0deg); } 54% { transform: rotate(0deg); } 92% { transform: rotate(12deg * 4); } } @keyframes stack-items { 0% { width: 71px; } 15% { width: 71px; } 30% { width: 12px; } 50% { width: 12px; } 80% { width: 71px; } } @keyframes box { 0% { left: 0; } 15% { left: 0; } 30% { left: 30px; } 50% { left: 30px; } 80% { left: 0; } } @keyframes box-top { 0% { width: 0; } 6% { width: 0; } 15% { width: 115px; } 30% { width: 56px; } 50% { width: 56px; } 59% { width: 0; } } @keyframes box-bottom { 0% { width: 115px; } 15% { width: 115px; } 30% { width: 56px; } 50% { width: 56px; } 80% { width: 115px; } } @keyframes box-right { 15% { left: 103px; } 30% { left: 44px; } 50% { left: 44px; } 80% { left: 103px; } } @keyframes stack-box { 0% { transform: rotate(0deg); } 30% { transform: rotate(0deg); } 40% { transform: rotate(135deg); } 50% { transform: rotate(135deg); } 83% { transform: rotate(360deg); } 100% { transform: rotate(360deg); } } </style> <body> <div class="so center">
<div class="inner">
<div class="stack-box">
<div class="stack">
<div class="item">
<div class="inner-item"></div>
</div>
<div class="item">
<div class="inner-item"></div>
</div>
<div class="item">
<div class="inner-item"></div>
</div>
<div class="item">
<div class="inner-item"></div>
</div>
<div class="item">
<div class="inner-item"></div>
</div>
</div>
<div class="box">
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
<div class="top"></div>
</div>
</div>
<div class="name">
stack<span class="b">overflow</span>
</div>
</div>
</div>
</body>
</html>
Copy the code3-3. The loading effect
This code is too much, everyone directly on the website to see. css3-loading
3-4. Music vibrator bar
The following code
<! DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8"Word-wrap: break-word! Important; "> < span style> *{margin:0; padding:0; list-style: none; } body{background-color:#efefef; }
.demo-music {
position: absolute;
width: 100%;
height: 200px;
top: 120px;
zoom: 1.5;
}
.demo-music .music {
width: 80px;
height: 50px;
top: 50%;
left: 50%;
-webkit-transform: translate(-40px, -25px);
transform: translate(-40px, -25px);
position: absolute;
}
.demo-music #waves {
width: 80px;
height: 50px;
position: absolute;
top: 12px;
left: 12px;
}
.demo-music #waves li {
position: relative;
float: left;
height: 100%;
width: 12%;
overflow: hidden;
margin-right: 1px;
}
.demo-music #waves li span {
position: absolute;
bottom: 0;
display: block;
height: 100%;
width: 100px;
background: #09f;
}
.demo-music #waves .li1 span {Animation: Waves 0.8s Linear 0s infinite alternate; - Webkit-animation: waves 0.8s linear 0s infinite alternate; } .demo-music#waves .li2 span {Animation: Waves 0.9s Linear 0s infinite alternate; - Webkit-animation: waves 0.9s Linear 0s infinite alternate; } .demo-music#waves .li3 span {
animation: waves 1s linear 0s infinite alternate;
-webkit-animation: waves 1s linear 0s infinite alternate;
}
.demo-music #waves .li4 span {Animation: Waves 0.8s Linear 0s infinite alternate; - Webkit-animation: waves 0.8s linear 0s infinite alternate; } .demo-music#waves .li5 span {Animation: Waves 0.7s Linear 0s infinite alternate; - Webkit-animation: waves 0.7s Linear 0s infinite alternate; } .demo-music#waves .li6 span {Animation: Waves 0.8s Linear 0s infinite alternate; - Webkit-animation: waves 0.8s linear 0s infinite alternate; } @-webkit-keyframes waves { 10% { height: 20%; } 20% { height: 60%; } 40% { height: 40%; } 50% { height: 100%; } 100% { height: 50%; } } @keyframes waves { 10% { height: 20%; } 20% { height: 60%; } 40% { height: 40%; } 50% { height: 100%; } 100% { height: 50%; } } </style> </head> <body> <div class="demo-music">
<div class="music">
<ul id="waves" class="movement">
<li class="li1"><span class="ani-li"></span></li>
<li class="li2"><span class="ani-li"></span></li>
<li class="li3"><span class="ani-li"></span></li>
<li class="li4"><span class="ani-li"></span></li>
<li class="li5"><span class="ani-li"></span></li>
<li class="li6"><span class="ani-li"></span></li>
</ul>
<div class="music-state"></div>
</div>
</div>
</body>
</html>
Copy the code4. Shape conversion
This part, divides 2D conversion and 3D conversion. What fun, here are a few!
4 – (1) grammar
Transform-origin: Transform the location of the element (transform around that point). Default (x,y,z) :(50%,50%,0)
4 – (2) instance
transform:rotate(30deg);
transform:translate(30px,30px);
transform:scale(.8);
transform: skew(10deg,10deg);
transform:rotateX(180deg);
transform:rotateY(180deg);
The transform: the rotate3d (10,10,10,90 deg);
5. The selector
Css3 selector can make our development, more convenient! I want you to understand this. Here are the selectors provided by CSS3.
Image from W3C. For this part, go to the W3C (CSS Selectors Reference Manual), where examples are easy to follow. I’m not going to repeat it. The selectors provided, the basic are very good to use. But I don’t think some of them are used very often, such as :root, :empty, :target, :enabled, :checked. [attribute*=value], [attribute$=value], [attribute^=value], [attribute^=value]
6. The shadow
In the past, when there was no CSS3, or when you needed to be compatible with lower browser versions, shadows could only be achieved with images, but now, cSS3 provides it!
6-1. The syntax
Box-shadow: The position of the horizontal shadow the position of the vertical shadow the Blur distance the size of the shadow The color of the shadow the starting direction of the shadow (by default, from inside out, if inset is from outside in)Copy the code6-1. The chestnuts
<! DOCTYPE html> <html> <head> <meta charset="utf-8">
<title></title>
<style>
div
{
width:300px;
height:100px;
background:#09f;
box-shadow: 10px 10px 5px # 888888;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Copy the codeRunning effect
7. The border
7-1. Border picture
7-1-1. The grammar
border-image: Image URL Image boundary Inward offset Image boundary width (default: border width) used to specify the amount of offset to be drawn outside the border (default: 0).
7-1-2. The chestnuts
Border Image (from Novice tutorial)
code
<! DOCTYPE html> <html> <head> <meta charset="utf-8">
<title></title>
<style>
.demo {
border: 15px solid transparent;
padding: 15px;
border-image: url(border.png);
border-image-slice: 30;
border-image-repeat: round;
border-image-outset: 0;
}
</style>
</head>
<body>
<div class="demo"></div>
</body>
</html>
Copy the codeThe effect
Interesting change
That looks better. It’s up to you
7-2. Rounded edges
7-2-1. The grammar
border-radius: n1,n2,n3,n4; border-radius: n1,n2,n3,n4/n1,n2,n3,n4; /*n1-n4: upper left corner, upper right corner, lower right corner, lower left corner. * /Copy the code7-2-2. The chestnuts
<! DOCTYPE html> <html> <head> <meta charset="utf-8">
<title></title>
<style>
div
{
border:2px solid #a1a1a1;
padding:10px 40px;
background:#dddddd;
text-align:center;
width:300px;
border-radius:25px 0 25px 0;
}
</style>
</head>
<body>
<div>border-radius</div>
</body>
</html>
Copy the codeThe results
Background of 8.
This section focuses on the three properties that CSS3 provides a background for
background-clip
Make the background draw (display) area
Default (draw from border)
Draw from the padding, not the border, which cuts out the background at the border! (background – clip: padding – box;)
Draw (display) only in the content area, not counting the padding and border, which is equivalent to cropping out the background there! (background – clip: content – box;)
background-origin
The background-origin property specifies that the background-position property should be relative
The following div starts with the same HTML and CSS code. The following HTML
<div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>Copy the codecss
div
{
border:10px dashed black;
padding:35px;
background:url('logo.png') no-repeat,#ccc;
background-position:0px 0px;
}
Copy the codeSo let’s look at three different cases of background-origin
background-size
The initial HTML and CSS code for the div below the size of the background is the same. The following HTML
<div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>Copy the codecss
div
{
border:1px dashed black;
padding:35px;
background:url('test.jpg') no-repeat;
}
Copy the code
Multiple background images
This is nothing, is in one picture, using multiple background images, code as follows! html
<p> Background of the two images </p> <div> Lorem ipsum Dolor sit Amet, Consectetuer Adipiscing Elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </div>Copy the codecss
div
{
border:1px dashed black;
padding:35px;
background-size: contain;
background:url('test.jpg') no-repeat left,url(logo.png) no-repeat right;
}Copy the code
9. The reflection
This is also a reflection, which is interesting to use.
9-1. The syntax
Direction - its - box - reflect: [on the above - | | under below - right - right | left - left], offsets, mask imagesCopy the code9 – (2) under the reflection
html
<p> <p class="reflect-bottom-p"><img src="test.jpg" class="reflect-bottom"></p>Copy the codecss
.reflect-bottom-p {
padding-bottom: 300px;
}
.reflect-bottom {
-webkit-box-reflect: below;
} Copy the code
9-2. Right Reflection (offset)
html
<p><img SRC ="test.jpg" class="reflect-right-translate"></p>Copy the codecss
.reflect-right-translate {
-webkit-box-reflect: right 10px;
}Copy the code9-3. Lower Reflection (gradient)
html
<p> <p class="reflect-bottom-p"><img src="test.jpg" class="reflect-bottom-mask"></p>
Copy the codecss
reflect-bottom-mask {
-webkit-box-reflect: below 0 linear-gradient(transparent, white);
}Copy the code9-3. Lower Reflection (Image mask)
Pictures used
html
<p> <p class="reflect-bottom-p"><img src="test.jpg" class="reflect-bottom-img"></p>
Copy the codecss
.reflect-bottom-img {
-webkit-box-reflect: below 0 url(shou.png);
}
Copy the codeText 10.
A newline
Grammar: word – break: normal | break – all | keep – all; Chestnuts and run effect
Grammar: word – wrap: normal | break – word; Chestnuts and run effect
Ellipsis beyond this, the main text – this property overflow, the reason why I speak directly instance is the three written text – overflow, clip | ellipsis | string. Clip is not beautiful and elegant. String is only compatible with Firefox.
Beyond the ellipsis
This is actually three lines of code, no newlines, beyond hidden, beyond ellipsis HTML
<div>This is some long text that will not fit in the box</div>Copy the codecss
div
{
width:200px;
border:1px solid # 000000;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}Copy the codeThe results
Many lines exceed the ellipsis
Beyond the ellipsis. This for everyone, not difficult! But before if it is more than the ellipsis, you can only use JS simulation! Now CSS3 provides a way to use multiple lines of ellipses! Unfortunately, this only supports WebKit browser for now!
The following code
<! DOCTYPE html> <html> <head> <meta charset="utf-8">
<title></title>
<style>
div
{
width:400px;
margin:0 auto;
overflow : hidden;
border:1px solid #ccc;text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } </style> </head> <body> < div > here will exceed the hidden here will exceed the hidden here will exceed the hidden here will exceed the hidden here will exceed the hidden here will exceed the hidden here will exceed the hidden here will exceed the hidden here will exceed the hidden here will exceed the hidden here will exceed the hidden here will exceed the hidden here will exceed the hidden here will be more than to hide here More hidden here will exceed the hidden here will exceed the hidden here will exceed the hidden here will exceed the hidden here will exceed the hidden here will exceed the hidden here will exceed the hidden here will exceed the hidden here will exceed the hidden here will exceed the hidden here will exceed the hidden here will exceed the hidden here will exceed the hidden here will be more than to hide here It's going to go beyond hide and it's going to go beyond hide and it's going to go beyond hide and it's going to go beyond hide and it's going to go beyond hide and it's going to go beyond hide and it's going to go beyond hide and it's going to go beyond hide and it's going to go beyond hide and it's going to go beyond hide </div> </body> </ HTML >Copy the coderendering
This makes the border look ugly, so open it up a bit, but don’t use padding to open the upper and lower borders! Because this is what happens.
The correct posture reads like this
<style>
div
{
width:400px;
margin:0 auto;
overflow : hidden;
border:1px solid #ccc;
text-overflow: ellipsis;
padding:0 10px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
line-height:30px;
height:60px;
}
</style>
Copy the codeThe results
Webkit-line clamp (height = line height * number of webkit-line clamp) can be gracefully downgraded even in non-WebKit-kernel browsers!
Text shadow
Syntax: text-shadow: horizontal shadow, vertical shadow, blur distance, and shadow color. Text-shadow: 00 10px #f00; The effect
Color 11.
And that’s what CSS3 does.
rgba
One is RGBA (RGB for color value, a for transparency)
Color: rgba (255,00,00,1); Background: rgba (00,00,00, 5);Copy the code
hsla
“H: Hue”, “S: saturation”, “L: brightness”, “A: Transparency” I know about these positions, but I haven’t used them. Here is a simple example
Color: HSLA (112, 72%, 33%, 0.68); Background-color: hSLA (49, 65%, 60%, 0.68);Copy the code
12. The gradient
Css3 gradients can be said to be a highlight, providing linear gradients, radial gradients, cone gradients (w3c and novice tutorials are not mentioned, I learned from an article, but I tried Google Chrome, but it is an ineffective method! If you know how to use, please inform! Thanks) gradient this part, because of the use of flexible, powerful function, it is very long to write, write a little bit and feel not interesting, I post here a few links to the tutorial to everyone, in the article I don’t say much, after all, I also learn from those places, they write is better than me, more detailed than me!
CSS3 Gradient — radial Gradient — magical conic-gradient
13.Filter
Css3 filter is also a bright spot, powerful, writing also flexible.
The chestnut code is as follows
<p> Original image </p> <img SRC ="test.jpg"/> <p> Black and white filter: grayscale(100%)</p> <img SRC ="test.jpg" style="filter: grayscale(100%);"/> <p> <img SRC ="test.jpg" style="filter:sepia(1);"/>
<p>饱和度saturate(2)</p>
<img src="test.jpg" style="filter:saturate(2);"Hue -rotate(90deg)</p> <img SRC ="test.jpg" style="filter:hue-rotate(90deg);"/> <p> Invert (1)< p> <img SRC ="test.jpg" style="filter:invert(1);"<p> Opacity (.5)</p> <img SRC ="test.jpg" style="filter:opacity(.5);"<p> brightness(.5)</p> <img SRC ="test.jpg" style="filter:brightness(.5);"/>
<p>对比度contrast(2)</p>
<img src="test.jpg" style="filter:contrast(2);"/> <p> <img SRC ="test.jpg" style="filter:blur(3px);"/>
<p>阴影drop-shadow(5px 5px 5px #000)</p>
<img src="test.jpg" style="filter:drop-shadow(5px 5px 5px #000);"/>Copy the code
14. Flexible layout
When I say elastic layout, I mean Flex; This piece of to say the words, must be all told, not to say nothing interesting, but will confuse everyone! It is also very long, so I will only post the tutorial url here. The blog is very good, very detailed!
Flex layout tutorial: Example
15. Grid layout
A rasterized layout is a grid; This area, like Flex, must be covered before it is covered. The content of this piece is similar to flex, but also a little longer, here I also post a link, this link is also very detailed!
Grid Layout Guide
16. Multi-column layout
I’ve read about this one, too, and I think multiple columns might be useful. Although I have not used in the project, I will briefly say below! For example! This attribute, suggest add private prefix, compatibility need to improve! html
<div class="newspaper""> < p style =" max-width: 100%; clear: both; As I grew older, I realized THAT I could not change the world, so I shortened my sights and decided to change only my country. As I grew older, I found that I could not change our country. My last wish was to change only my family. But that was impossible. Now, as I lie in bed, dying, I realize: If I had only changed myself first, then I could have changed my family. With the help and encouragement of my family, I could do something for my country. And then, who knows? I might even change the world. </div>Copy the codecss
.newspaper
{
column-count: 3;
-webkit-column-count: 3;
-moz-column-count: 3;
column-rule:2px solid # 000;
-webkit-column-rule:2px solid # 000;
-mox-column-rule:2px solid # 000;
}
Copy the code
17. Box model definition
Box-sizing allows you to define specific elements that match a region in a specific way.
Word-wrap: break-word! Important; word-wrap: break-word! Important; word-wrap: break-word! Important; The following figure
Box-sizing: Content-box when the border and padding are not included in the element width and height! The following figure
18. Media enquiries
Media query, just in the monitoring screen size changes, in different sizes of time to display different styles! In a responsive website, is an essential part! But since most of my recent projects use REM layouts. So media queries are not much use! But, the media inquiry, is still very worth a look! You never know when you’ll need it!
The chestnut code is as follows
<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> body { background-color: pink; } @media screen and (max-width: 960px) { body { background-color: darkgoldenrod; } } @media screen and (max-width: 480px) { body { background-color: lightgreen; }} </style> </head> <body> <h1> </h1> <p> If the visible window width of the media type screen is less than 960 px, the background color will change. </p> <p> If the visible window width of the media type screen is less than 480 px, the background color will change. </p> </body> </html>Copy the codeRunning effect
Blend mode
Blend mode, just like photoshop’s blend mode! I have known about this piece, but I have never used it in the project, but I think it should be useful! Css3 has two blending modes (background-blend-mode and mix-blend-mode). Both write and display very similar! The difference is that background-blend-mode is used for both the background image and the background color of the same element. Mix-blend-mode is used for the background image or color of an element and its child elements. Look at the following code, the difference is out!
This piece of a lot of pictures, we see a quick glance at the picture, see what effect is good!
background-blend-mode
code
<! DOCTYPE html> <html> <head> <meta charset="UTF-8">
<title></title>
</head>
<style>
div{
width: 480px;
height: 300px;
background:url('test.jpg')no-repeat,#09f;} </style> <body> <! Graph -- -- -- -- > < p > < / p > < div > < / div > < p > multiply multiply < / p > < div style ="background-blend-mode: multiply;"">< p style="background-blend-mode: screen;">< p style="background-blend-mode: overlay;"Word-wrap: break-word! Important; ">< p style="background-blend-mode: darken;"Word-wrap: break-word! Important; ">< p style="background-blend-mode: lighten;">< p style= "max-width: 100%; clear: both"background-blend-mode: color-dodge;"">< p style=" text-align: center"background-blend-mode: color-burn;"Word-wrap: break-word! Important; ">< p style="background-blend-mode: hard-light;"Word-wrap: break-word! Important; ">< p style="background-blend-mode: soft-light;"Word-wrap: break-word! Important; ">< p style=" text-align: center"background-blend-mode: difference;"></div>
<p>exclusion排除</p>
<div style="background-blend-mode: exclusion;"">< p style="background-blend-mode: hue;"<div >< p> Saturation </p> <div style="background-blend-mode: saturation;"Word-wrap: break-word! Important; ">< p style="background-blend-mode: color;"></div>
<p>luminosity亮度</p>
<div style="background-blend-mode: luminosity;"></div>
</body>
</html>
Copy the codeRunning effect
mix-blend-mode
code
<! DOCTYPE html> <html> <head> <meta charset="UTF-8">
<title></title>
</head>
<style>
div{
padding: 20px;
width: 480px;
background: #09f;} </style> <body> <p> <img SRC ="test.jpg"/>< div>< p>multiply multiply </p> <div><img SRC ="test.jpg" style="mix-blend-mode: multiply;"/>< div>< p> <img SRC ="test.jpg" style="mix-blend-mode: screen;"/>< div>< p> Overlay </p> <div><img SRC ="test.jpg" style="mix-blend-mode: overlay;"/>< div>< p> Darken </p> <div><img SRC ="test.jpg" style="mix-blend-mode: darken;"/>< p>lighten </p> <div><img SRC ="test.jpg" style="mix-blend-mode: lighten;"/>< div>< p> Color dodge color dodge mode </p> <div><img SRC ="test.jpg" style="mix-blend-mode: color-dodge;"/>< div>< p> <img SRC ="test.jpg" style="mix-blend-mode: color-burn;"/>< div>< p> <img SRC ="test.jpg" style="mix-blend-mode: hard-light;"/>< p> <div><img SRC ="test.jpg" style="mix-blend-mode: soft-light;"/>< div>< p>difference </p> <img SRC ="test.jpg" style="mix-blend-mode: difference;"/></div> <p> Exclusion </p> <div><img SRC ="test.jpg" style="mix-blend-mode: exclusion;"/>< p> Hue hue </p> <div><img SRC ="test.jpg" style="mix-blend-mode: hue;"/></div>
<p>saturation饱和度</p>
<div><img src="test.jpg" style="mix-blend-mode: saturation;"/>< div>< p> <img SRC ="test.jpg" style="mix-blend-mode: color;"/>< div>< p> Luminosity </p> <div><img SRC ="test.jpg" style="mix-blend-mode: luminosity;"/></div>
</body>
</html>
Copy the codeRunning effect
Nodule 20.
Well, a personal summary of the new features of CSS3, and here! Some of these new features need to be understood and practiced if they are to work well. Some of the new features, if you want to go into detail on their own, are animations, transitions, elastic boxes, gradients, etc. Estimate can write a few or a dozen articles! Especially animation, estimate to write a book can! The explanation and cases of new features of CSS3 above are basic understanding and usage, hoping to play a role in expanding thinking. The most important thing is that we should practice more, practice is the most important part, which makes perfect. Css3 not only to use, also want to use good, use good CSS3, in the development of the project, very helpful! Of course, if I find something interesting or useful, I’ll keep writing. Finally, if you think I wrote something wrong, write bad, or have any recommendations! Welcome advice!
— — — — — — — — — — — — — — — — — — — — — — — — — gorgeous line — — — — — — — — — — — — — — — — — — — — want to know more, pay attention to focus on my WeChat public number: waiting for book cabinet
