CSS3-Initial knowledge of CSS3

First, knowledge CSS31, what is CSS3

CSS3 is an upgraded version of CSS2, 3 is the version number, it adds a lot of powerful new features on the basis of CSS2.1. At present, the mainstream browser Chrome, Safari, Firefox, Opera, and even 360 have supported most of CSS3 's features, IE10 also began to fully support CSS3.

Different browsers may require different prefixes when writing CSS3 styles. It indicates that the CSS property or rule has not yet become part of the World Wide Web Standard, is the browser's private property, although the newer version of the browser does not need a prefix, but in order to better forward-compatible prefixes are still indispensable

What can 2,CSS3 do?

What benefits does CSS3 bring to us? To put it simply, CSS3 the effects of using pictures and scripts, even animations, and just a few lines of code to get it done. such as rounded corners, picture borders, Text shadows and box shadows, excessive, animation and so on.

CSS3 simplifies the design process for front-end development workers and speeds up page loading.

What are the powerful features of CSS3? Guys, let's get a glimpse of it.

Selector Selector

We used to use class, ID or tagname to select HTML elements, and CSS3 's selectors were incredibly powerful. They can reduce the number of class and ID in the label more convenient maintenance style sheet, better implementation of the separation of structure and performance

Fillet Effect
Used to make rounded corners usually use a background picture, or a tedious element to piece together, now very simple border-radius to help you easily handle

block Shadows and text shadows
You can add a projection effect to any div and text

ColorCSS3 supports more colors and a wide range of color definitions. New color CSS3 support Hsl,cmyk,hsla and RGBA

Gradient EffectPreviously can only use Photoshop to make the picture gradient effect, now can be written in CSS, ie filter can also be implemented

Personalize Fontsis the font on the Web page too simple? Easily customize fonts with @font-face

Multi-background mapAdd a multi-layered background image on an element

Border Background ImageBorder app background picture

Deformation processingYou can rotate, scale, tilt, move, and even make powerful animations that were previously only JavaScript

multi-column layouts
Allows you to implement multi-column layouts without using multiple div tags.

Media EnquiryApply different styles for different screen resolutions

Wait a minute..

CSS3 makes the code cleaner and more efficient. Can greatly improve work efficiency, create a more advanced user experience, so that the Web application interface design into a new step

Second, Border 1, fillet effect Border-radius

Border-radius is to add a rounded border to an element.

How to use:

border-radius:10px/* All corners use rounded corners with a radius of 10px */

border-radius:5px 4px 3px 2px; /* Four RADIUS values are upper-left, upper-right, lower-right, and lower-left corner, clockwise */

Solid Upper semicircle:

Method: Set height to half width, and only the upper left and upper right corner are the same as the height of the element.

div{    height:50px;/* is half the width of */    width:100px;    Background: #9da;    border-radius:50px 50px 0 0;/* radius set at least the value of height */    }

　　

Solid Circle:

Method: Set the width and height values to be consistent, and four corner values are set to half of their values

div{    height:100px;/* and Width set consistent */    width:100px;    Background: #9da;    border-radius:50px;/* four rounded values are set to half the width or height of the value */    }

　　

2, Shadow Box-shadow

Box-shadow is to add a shadow to the box. Support for adding one or more.

A very simple piece of code, the implementation of the projection effect, cool, we look at the syntax:

Box-shadow:x axis offset y-axis offset [shadow blur radius] [shadow expansion radius] [shadow color] [projection mode];

Note: Inset can be written on the first or last of the parameters, and other positions are invalid.

To set an outer shadow for an element:

Example code:

. box_shadow{  box-shadow:4px 2px 6px #333333;}

Effect:

To set an inner shadow for an element:

Example code:

. box_shadow{  box-shadow:4px 2px 6px #333333 inset;}

Effect:

To add multiple shadows:

If you add multiple shadows, you can just separate them with commas. Such as:

. box_shadow{    box-shadow:4px 2px 6px #f00, -4px-2px 6px #000, 0px 0px 12px 5px #33CC00 inset;}

Effect:

1, the difference between shadow blur radius and shadow expansion radius

Shadow Blur radius: Its value can only be positive, if its value is 0 o'clock, indicates that the shadow does not have a blur effect, the greater the value of the shadow the more blurred the edge;

Shadow expansion radius: Its value can be positive negative, if the value is positive, then the entire shadow is extended, the inverse value is negative, then zoom out;

2,x axis offset and y-axis offset can be set to a negative number

The x-axis offset is a negative number:

. boxshadow-outset{    width:100px;    height:100px;    box-shadow:-4px 4px 6px #666;}

：

The y-axis offset is a negative number:

. boxshadow-outset{    width:100px;    height:100px;    Box-shadow:4px-4px 6px #666;}

：

3, apply picture to Border Border-image

As the name implies is to apply the background image for the border, it is similar to our common background property. For example:

Background:url (xx.jpg) 10px 20px no-repeat;

But it's a little more complicated than a background picture.

Imagine: A rectangle with four borders. If a border picture is applied, how is the picture distributed? The picture is automatically cut into four dengfen. Used for four borders.

It can be understood as a slicing tool that automatically cuts the picture used as a border. How to cut it? To make it easy to understand, a special picture was made, a figure made of 9 rectangles (70*70 pixels)

Let's apply it as a border image and see what the effect is.

According to the syntax of Border-image:

#border-image{   background: #F4FFFA;   width:210px; height:210px; border:70px solid #ddd;   Border-image:url (borderimg.png) Repeat  }

Effect:

From the serial number you can see that the four corners of the div correspond to the four corners of the background image respectively. and  be repeated. where is 5? because the image is cut from around the center, 5 is not displayed. And in Chrome, 5 is there and it looks like this:

The meaning of repeat is repetition, at present because it is just divisible, the effect can not be seen. If you change the width of the Div, look at the effect of repetition:

The corner part is cut off, visible repeat is repeated, then out of the partially trimmed off, and is centered to start repeating.
Round Parameters : Round can be understood as a complete paving. Compressed (or stretched) to achieve completeness;

#border-image {     width:170px;     height:170px;     border:70px solid;     Border-image:url (borderimg.png) round; }

Effect:

The visible picture is squashed.

Stretch is very good to understand is stretching, how long pull how long. How far "roll" is.

Border-image:url (borderimg.png) stretch

Look at the effect:

2,4,6,8 are stretched to show respectively.

Note: Under Chrome, the middle section is also stretched, and the WebKit browser does not seem to differentiate between the round property and the Repeat property, and the display works the same.

Firefox 26.0 can be accurately differentiated.

Three, color-related 1, color of the RGBA

RGB is a color standard that is composed of red (R), Green (G), Blue (B) variations, and overlapping to obtain a wide variety of colors. RGBA is the addition of an RGB-based parameter that controls alpha transparency.

Grammar

Color:rgba (R,g,b,a)

Above R, G, b three parameters, the positive integer value range is: 0-255. The value of the percentage value range is: 0%-100%. Values that are out of range will be up to their nearest value limit. Not all browsers support the use of percent values. A is a transparency parameter, and the value is between 0~1 and not negative.

code example:

Background-color:rgba (100,120,60,0.5);

2, gradient color

CSS3 Gradient are divided into linear gradients (linear) and radial gradients (radial). Because different rendering engines implement the syntax of gradients, we only analyze the use of the standard syntax for linear gradients, and the rest of us can read the relevant data. The ie10+, firefox19.0+, chrome26.0+ and opera12.1+ have been supported by browsers.

Linear gradient

Linear-gradient ([Set direction],[set start color],[set various over color],[settings Introduction color])

Parameters:

First parameter: specifies the gradient direction , which can be expressed by the keyword " angle " or "English" :

When the first parameter is omitted, the default is "180deg", which is equivalent to "to bottom".

Background-image:linear-gradient (to left, red, orange,yellow,green,blue,indigo,violet);

Iv. text and font 1,text-overflow and Word-wrap

Text-overflow is used to set whether to use the ellipsis tag (...) Overflow of text within the indicated object

However, Text-overflow is only used to illustrate how the text overflows when displayed, to achieve an ellipsis effect when overflow, but also to define mandatory text to be displayed on one line (white-space: nowrap) and overflow content is hidden (Overflow:hidden), the only way to achieve overflow text display ellipsis effect, the code is as follows:

At the same time,Word-wrap can also be used to set the text behavior If the current line exceeds the bounds of the specified container.

Normal is the browser default,Break-word set to wrap within a long word or URL address , this property is not commonly used, with the browser default value.

2, embedded font @font-face

@font-face is able to load the server-side font file, allowing the browser to display fonts that are not installed on the user's computer.

Grammar:

@font-face {    font-family: font name;    SRC: The relative or absolute path of the font file on the server;}

Once this is set, you can set the font style in (font-*) as you would with normal fonts.

Like what:

p {    font-size:12px;    font-family: "My Font";    /* must item, set font-family same value in @font-face */}

3, Text Shadow Text-shadow

Text-shadow can be used to set the shadow effect of text.

Grammar:

Text-shadow:x-offset y-offset blur color;

X-offset: Represents the horizontal offset distance of the shadow, whose value is positive when the shadow is offset to the right, and vice versa;

Y-offset: Represents the vertical offset distance of the shadow, whose value is positive when the shadow is shifted downward, whereas the offset is upward;

Blur: Indicates the degree of blurring of the shadow, its value cannot be negative, and if the value is larger, the shadow is blurred, and the shadow becomes clearer, and if shadow blur is not required, the Blur value can be set to 0;

Color: Colors that represent shadows, which can use the RGBA color.

V. Background-related style 1,background-origin

Sets the original starting position of the element's background picture.

Grammar:

Background-origin:border-box | Padding-box | Content-box;

The parameters indicate whether the background picture is from the border , the padding (the default), or the content area to begin displaying.

The effect is as follows:

It is important to note that if the background is not no-repeat, this property is not valid, it will be displayed starting from the border.

2,background-clip

Used to tailor the background image to fit the actual needs.

Grammar:

Background-clip:border-box | Padding-box | Content-box | No-clip

The arguments are either from the border, or inside the fill , or the content area to crop the background outward. no-clip means no cropping, and the parameter Border-box shows the same effect. backgroud-clipThe default value is border-box.

The effect is as follows:

3,background-size

Sets the size of the background picture to be displayed as a length or percentage, and to scale the picture through cover and contain.

Grammar:

Background-size:auto | < length value > | < percent > | Cover | Contain

Value Description:

1, Auto: Default value, do not change the original height and width of the background picture;

2, < length value >: paired appearance such as 200px 50px, the background image width is set to the front two values, when set a value, it as the width of the picture as a value to zoom ;

3, < percent >: Any value between 0%~100%, set the background image width height to the value of the width of the element multiplied by the previous percentage, when setting a value as above;

4, cover: As the name implies for coverage , the background image is more than scaling to fill the entire container ;

5, contain: accommodate, will be the background picture, etc. than zoom to one side of the edge of the container.

3,multiple Backgrounds

Multiple backgrounds, that is, the attributes of the background in CSS2 plus the multiple overlays of the new background of origin, clip, and size, abbreviated as each set of values separated by commas, and, if there are multiple background images, Other properties have only one (for example, Background-repeat only one), which indicates that the property value is applied to all background pictures.

The syntax is abbreviated as follows:

Background: [Background-color] | [Background-image] | [Background-position] [/background-size] | [Background-repeat] | [Background-attachment] | [Background-clip] | [Background-origin],...

The above abbreviations can be disassembled into the following form:

Background-image:url1,url2,..., urln;background-repeat:repeat1,repeat2,..., repeatn;backround-position:position1 , Position2,..., positionn;background-size:size1,size2,..., Sizen;background-attachment:attachment1,attachment2, ..., attachmentn;background-clip:clip1,clip2,..., clipn;background-origin:origin1,origin2,..., OriginN; Background-color:color;

Attention:

1. Separate the abbreviated values of each group of background with commas;
2. If there is a size value, it needs to be followed by position and separated by "/";
3. If you have more than one background picture, and the other property has only a single (for example, Background-repeat only one), it indicates that all background pictures apply the property value.
4. Background-color can only set one.

Example:

There are three separate pictures:

Use multi-background technology to achieve:

. multipledemo{    width:300px;    height:140px;    border:1px solid #999;        Background-image:url (http://image.mamicode.com/info/201507/20180110162710609423.jpg),                      URL (http// image.mamicode.com/info/201507/20180110162710610399.jpg),                      url (http://image.mamicode.com/info/201507/ 20180110162710611376.jpg);    Background-position:left top, 100px 0, 200px 0;    Background-repeat:no-repeat, No-repeat, no-repeat;        margin:0 0 20px 0;}

　　

Changed to the following, and the same effect

Background:url (http://image.mamicode.com/info/201507/20180110162710609423.jpg) no-repeat left Top,url (HTTP// image.mamicode.com/info/201507/20180110162710610399.jpg) no-repeat 100px 0,url (http://image.mamicode.com/info/ 201507/20180110162710611376.jpg) no-repeat 200px 0;

Comprehensive Exercises:

CSS Making stereoscopic navigation

1. Make navigation fillet

Tip: Use Border-radius to achieve rounded corners

2. Make navigation stereoscopic style

Tip: Use Box-shadow to achieve stereoscopic style

3. Make the Navigation dividing line

Tip: Use gradients and pseudo-elements to make

4. Delete the first and last navigation divider lines

Tip: Use pseudo-elements to delete the first and last separator lines

• Home
• About Me
• Portfolio
• Blog
• Resources
• Contact Me

CSS3-Initial knowledge of CSS3