CSS Tutorial: A unique CSS3 skill

Many of you may have heard a lot of rumors about CSS3, but what are the CSS3 techniques we can really use now? In this article, I'll show you some of the CSS3 tricks that are good in some major browsers (such as Firefox,chrome,safari,opera browsers). These effects degrade rendering in browsers that are not supported (ie browser, for example). With browser-specific declarations, many of the proposed CSS3 styles can be used immediately.

If you don't know what the browser's specific statement is, you just need to remember that they are specific prefixes that are related to the kernel provider before CSS style properties. Because CSS3 is not fully supported at the moment, we need to use these specific statements. The specific forms are as follows:

• Prefix of the Mozilla/firefox/gecko browser: -moz-
• Webkit (safari/chrome) browser prefix: -webkit- (Note: Some wbkit prefixes can only be used in Safari, Chrome is not supported.) ）

As you may have seen, there is a drawback to using these declarations, and that is that if we want to get the CSS3 effect in Firefox,safari and chrome, we need to use all of these prefixes. Not surprisingly, IE does not support CSS3, so it is not like the other major browsers have a specific prefix declaration.

Well, we've talked enough, let's try it right away. Note: The style declaration removes these prefixes is the actual specification proposal for the W3 standard.

Demo (example) description of this page

All of these examples are in this page, and if you can't see the effect of the instance (or just the parts), it means the browser you're using doesn't support these CSS3 effects.

Shadow effect

Shadow effects accept multiple parameter values. The first is the color of the shadow, which also accepts four additional length (lenght) values, the first two of which are the X (horizontal) offset and the Y (vertical) offset. The next parameter is the value that reflects the ambiguity. And the last value is used to define the degree of dispersion of the blur.

Box-shadow: #333 3px 3px 4px;
-moz-box-shadow: #333 3px 3px 4px;
-webkit-box-shadow: #333 3px 3px 4px;

Shadow Effects Demo

Gradient effect

CSS3 's gradient style is easy to confuse at first, especially between -moz and -webkit gradients. In-moz, you first need to define the direction of the gradient, and then define the starting and ending colors. The-webkit gradient is slightly more complex, first you need to define the type of gradient, then the next two values define the direction, and the last two values define the starting and ending colors of the gradient.

-moz-linear-gradient ( -90deg, #1aa6de, #022147);
-webkit-gradient (linear, left top, left bottom, from (#1aa6de), to (#022147));

: Example of a gradient effect demo

RGBA Color Mode

RGBA's color definition is actually not as complex as it feels, it accepts four parameter values: Red, green, blue, and transparency. We do not use the hex (#) 16 value of the color, we use RGB mode to set the color, where transparency can set the transparency effect of the color. The value of transparency ranges from 0 to 1, 0 is completely opaque, and 1 is completely transparent. The transparency of these demo examples is 0.5, and the transparency of the elements is that 50%,RGBA does not need to append any specific browser prefix declarations.

Background-color:rgba (0, Si,,. 5);

HSL color mode (hue h, saturation s, brightness l)

The HSL color mode is supported in addition to RGBA,CSS3. This gives us plenty of room to choose between color and hue. The h in the HSL color mode represents the hue, and S represents the Chroma, and L represents the brightness. Hue is the angle value on the color plate, while saturation and brightness are the percent values of the color.

BACKGROUND-COLOR:HSL (209,41.2%, 20.6%);

HSL Demo Example

Border color

To use this CSS style, you need to define border-top, border-right, border-bottom, and border-left separately. To get the following effect. You notice that you define a 8-pixel border, and then the border defines 8 different colors. This is because the color number of the border must correspond to the pixel width value of the border.

border:8px solid #000;
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa the #bbb;
-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa the #bbb;
-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa the #bbb;
-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa the #bbb;

Border Color Demo

Text Selection color settings

I have to say the definition of text selection color is a very exciting new feature. When I first saw this on CSS skills, I thought it was very intimate. With :: Selection the Pseudo object (pseudo-element), you can change the color and background when the user chooses a text element. If you ask the opinion, I will find it very beautiful. Although :: Selection has removed the bird from the current draft CSS3, but we hope it will be added later.

: : Selection {background: #3C0;/* Safari */color: #90C;}::-moz-selection {background: #3C0;/* Firefox */color: #90C;}

Text Selection Color Demo

Deformation

With the variant style, you can make the appearance of the element larger than the mouse hover. Set a value greater than 1 for scale (proportional) values, and the elements will be hit. Conversely, if the value is less than 1, the size of the element shrinks. In addition to the scale ratio, it has many other variants that are available in different ways. You can visit the Firefox developer page and see what they can achieve.

-moz-transform:scale (1.15);-webkit-transform:scale (1.15) ;

Deformation effect Demo

Multi-Column Layout

With this new multi-column layout style, you can render text similar to "newspaper" typography. It is much simpler to implement this kind of effect in CSS3 than in the CSS2 approach. Next, I specify the number of columns the bird needs, as well as the type of rule that separates it, and how much space there is between the columns. It's easy to use, isn't it?

-moz-column-count:3;-moz-column-rule:solid 1px black;-moz-column-gap:20px;

Multi-Column Layout demo

Summarize

I want to be as excited about these characteristics of CSS3 as I am. He gives web designers and developers more power, and makes many things simpler. Now we just need to wait for all browsers to support it. Of course, I demonstrate here the knowledge CSS3 the tip of the iceberg of new features. If you would like to know more information, tips and help, I suggest you visit the following websites to learn.

• Css:current Work
• Css3.info
• Mozilla CSS Extensions
• The WebKit Open Source Project