Many of you may have heard a lot of rumors about CSS3, but what are some CSS3 techniques that we can actually use today? In this article, I will show you some distinctive CSS3 techniques that work well in some major browsers (such as Firefox, Chrome, Safari, Opera browsers). These effects will degrade rendering in unsupported browsers (such as Internet Explorer). Many of the proposed CSS3 styles can be used out of the box using browser-specific declarations..jpg)
If you don't know what the browser-specific declarations are, you just need to remember that they are all specific prefixes before CSS style properties related to the kernel provider. Because CSS3 is not yet fully supported, we need to use these specific declarations. The specific form is as follows:
* Mozilla/Firefox/Gecko browser prefix: -moz-
* Webkit (Safari/Chrome) browser prefix: -webkit- (Note: Some Wbkit prefixes can only be used under Safari and are not supported by Chrome.)
As you may have seen, one disadvantage of using these declarations is that if we want to get CSS3 effects in Firefox, Safari and Chrome, we need to use all of the above prefixes. Not surprisingly, Internet Explorer does not support CSS3 and therefore does not have a specific prefix declaration like other major browsers.
Okay, enough of that, let’s try it right away. Note: Style declarations minus these prefixes are the actual specification proposals of the W3 standard.
Demo (example) description about this page
All these examples are on this page. If you cannot view the effects of the examples normally (or can only view part of them), it means that the browser you are using does not support these CSS3 effects.
shadow effect
Shadow effects accept multiple parameter values. The first is the color of the shadow, which also accepts four other length (lenght) values. The first two length values are the X (horizontal) offset and Y (vertical) offset. The next parameter is a value that reflects the fuzziness. The fourth and final value is used to define the spread of blur.
box-shadow: #333 3px 3px 4px;
-moz-box-shadow: #333 3px 3px 4px;
-webkit-box-shadow: #333 3px 3px 4px;
.gif)
Shadow effect demonstration
gradient effect
CSS3 gradient styles can be confusing at first, especially the differences 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 gradient of -webkit is a little more complicated. 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 color and ending color of the gradient.
-moz-linear-gradient(-90deg,#1aa6de,#022147);
-webkit-gradient(linear, left top, left bottom, from(#1aa6de), to(#022147));
.gif)
Gradient effect demonstration
RGBA color mode
The actual color definition of RGBA is not as complicated as it seems. It accepts four parameter values: red value, green value, blue value, and transparency. We don't use hex (#) hexadecimal value of color. We set the color in RGB mode, where transparency can set the transparent effect of the color. Transparency ranges from 0 to 1, with 0 being completely opaque and 1 being completely transparent. The transparency of the following demonstration examples are all 0.5, the transparency of the element is 50%, rgba does not require any specific browser prefix declaration.
background-color: rgba(0, 54, 105, .5);
.gif)
HSL color mode (Hue H, Saturation S, Lightness L)
In addition to RGBA, CSS3 also supports HSL color mode. This gives us plenty of leeway in choosing colors and tones. In the HSL color model, H stands for hue, S stands for chroma, and L stands for brightness. Hue is the angle value on the color wheel, while saturation and brightness are the percentage values of the color.
background-color: hsl(209,41.2%, 20.6%);
.gif)
HSL demo example
border color
To use this CSS style, you need to define border-top, border-right, border-bottom, and border-left respectively to achieve the following effects. You notice that a border of 8 pixels is defined, and then the border is defined in 8 different colors. This is because the number of colors 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 #bbb #ccc;
-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
.gif)
Border color demo
Text selection color settings
I have to say that text selection color definition is a pretty exciting new feature. When I first saw this on CSS Tips, I thought it was very thoughtful. With the ::selection pair of pseudo-elements, you can change the color and background when the user selects a text element. If you're asking for an opinion, I think it's very beautiful. Although ::selection has been removed from the current CSS3 draft, we hope to add it later.
::selection {background: #3C0; /* Safari */color: #90C;}::-moz-selection {background: #3C0; /* Firefox */color: #90C;}
.gif)
Text selection color demo
deformation
With transform styles, you can make an element appear larger on mouseover. Set the Scale value to a value greater than 1 and the element will shrink. Conversely, if the value is less than 1, the size of the element is reduced. In addition to Scale, there are many other different deformations available. You can visit the Firefox developer page to see what they can achieve
-moz-transform: scale(1.15);-webkit-transform: scale(1.15);
.gif)
Deformation effect demonstration
multi-column layout
With this new multi-column layout style, you can give your text a "newspaper" layout effect. Compared with the implementation method in CSS2, in CSS3, it is much simpler for us to achieve this type of effect. Below, I specify the number of columns the bird needs, as well as the type of separation rules and how large the gaps between columns should be. It's easy to use, right?
-moz-column-count:3;-moz-column-rule: solid 1px black;-moz-column-gap: 20px;
.gif)
Summarize
I hope I'm as excited about these features of CSS3 as I am. It gives web designers and developers more power and simplifies many aspects. Now we just have to wait for all browsers to support it. Of course, the knowledge I demonstrate here is just the tip of the iceberg of new CSS3 features. If you want more information, tips and help, I recommend you visit the following websites.