12 high-end and classy CSS3 features that can be put into use now_html/css

Original text: http://tutorialzine.com/2013/10/12-awesome-css3-features-you-can-finally-use/

There is a demo display in the original text and download.

Translation starts:

Maybe you are like me. Whenever you see a trendy and unforgettable CSS3 special effect, you can’t wait to apply it to your website. Then, you will find that these new features can only be displayed normally in one or two mainstream browsers (and never IE), so you choose to shelve this special effect and start waiting indefinitely. Now I have good news for you: many cool CSS3 features have been well supported in the latest versions of browsers, and you can use them now!

As a reminder, most of the features mentioned below cannot be used in older versions of IE (versions 9 and earlier). If the majority of your customers are still using these ancient browsers, I'm afraid you may have to downgrade to those tried-and-true features. But for everyone else, enjoy the beauty that modern browsers bring to us~

1. CSS animations (Animations) and transitions (Transitions)

CSS animations can finally be used in all major browsers, It's ok even in IE (IE10). There are two main ways to create CSS animations.

The first one is very simple, by setting the transition attribute in CSS. You can use transitions to create mouseover (hover) or click (mouse down) effects. Of course, you can also manipulate the transition property of the DOM element CSS through JavaScript to trigger animations. In Example 1, when the mouse is hovered, the rocket will transition to flying close to the earth's surface.

The second way to define animation is a little more complicated, which requires using @keyframe to define key frames. This approach allows you to trigger a repeating animation without relying on user action or JavaScript.

[See the source webpage for specific code and demonstration, the same below. 】

CSS animation is worth learning. This article is very suitable for getting started. You can also check browser compatibility.

2. Use calc() to perform calculations

The calc() function is another slightly powerful CSS feature. It allows you to perform mathematical calculations in CSS, suitable for any situation where length and size need to be calculated. What’s even cooler is that you can freely use various measurement units in your calculations, such as percentages and pixels [width: calc(100% - 40px);]. You no longer have to use those hacks, and there is news that this function works well in IE9 and does not require a prefix.

You can learn the calc() function here, or check compatibility.

3. Advanced Selector

If you still insist on assigning IDs to DOM elements just to add style sheets, then you are out. CSS 2.1 and CSS 3 introduced a large number of powerful selectors that allow you to control layout more conveniently and adjust styles more elegantly.

You can learn more about selectors and their related content here, or check compatibility.

4. Generate content and counters

The ::before and ::after pseudo-elements are powerful magic weapons in the hands of web developers. This feature allows us to use less code to achieve the same layout requirements, especially when we need to add additional visual elements such as shadows or require leading or trailing elements such as spans and divs. After using pseudo-elements, you will get a leaner and more semantic HTML code.

CSS3 also provides counters, which allows us to increment the count by using CSS rules. Furthermore, wrapped elements can also access counter from their parent element.

Applicable to all major browsers including IE9.

5. Gradient

The gradient property of CSS3 allows web designers to no longer rely on images to obtain smooth transitions between colors. One of the great things about CSS gradients is that they still perform well on retina screens because they are calculated rather than made up of pixels. Gradient is divided into two types: linear gradient and radial gradient, and can be set to repeat. In the past, gradients were less applicable, but after minor changes to the syntax over the past few months, they can be applied almost anywhere.

You can get relevant tutorials here, or check the support status of each browser.

6. Fonts

Do you remember those days when you could only use “web-safe” fonts? It's hard to look back on the past, but now we have Google Fonts and typekit that allow us to embed beautiful fonts in style sheets. We can also use icon fonts like fontawesome that can create vector icons to replace letters or numbers. This is all thanks to @font-face. Through this rule, you can define the name of the font to be used, variations such as bold and italic, and source files, and you can use these definitions in subsequent font/font-family declarations.

For security reasons, I did not embed local fonts in the above editor [the author provided each sample code in the original web page], so I used Google Webfonts. You'll see an example of embedding local fonts on this page.

With the continuous efforts of some people with lofty ideals, webfonts can also run in the ancient IE6 after some processing. The two font service providers mentioned above will help you handle all this, so you are free to use [Sister, Chinese. . . 】.

7.Box-sizing

The most troublesome thing for CSS beginners is the CSS box model. Although the standardization organization may have their reasons, it is unreasonable to define the width and height of an element without taking into account the width of the padding and border. This somewhat ill-defined feature is great at causing us trouble. But finally, we have box-sizing, which allows you to intuitively define the width and height of elements as you imagine them.

You can learn more about box-sizing here, or check browser compatibility.

8. Image border

The border-image attribute allows you to use images to design borders. The border can be placed in a single image (CSS sprite technology), and different parts of the image can be used in the four corners of the border, the top, bottom, left, and right.

Images used:

Rendering:

You can learn more about image borders on the MDN page and this article on CSS-tricks, border-image Properties are supported in all major browsers and IE11.

9. Media query

If you take web design seriously, you will definitely use media query. Given that it changed the way we build websites, it’s still worth discussing despite its age. In the past, we generally designed a website suitable for PC resolution and a separate website designed for mobile screen users. Now, with responsive layout, a website can adapt to various types of devices, orientations, and resolutions.

Media queries are surprisingly easy to use, all you need to do is place a set of CSS positioning rules inside a code block annotated with @media. Each @media block is enabled when its condition is true. You can try opening this page and changing the browser window size to see the effect.

Media query can detect device resolution, orientation, color depth, pixel density (PPI/PPCM) and other attributes. For those who want in-depth reading, see here, as well as browser compatibility.

10. Multiple backgrounds

Using multiple backgrounds, designers can create many interesting special effects. We can set different backgrounds for the same element, and each background image (more vividly, a layer) can move or animate freely and independently. The background-related CSS rules we used before can now set different background images through a comma-separated list.

Here you can see more information related to multiple backgrounds, and the browser compatibility is also very good.

11. Column

As we all know, it is difficult to implement column-based layout through CSS. In the past, our approach was to split content into different elements through JavaScript or server-side processing. This unnecessary complexity caused early development to deviate from our original intention of separating content and style. Fortunately, in CSS3 we can use columns rules.

This rule is well supported across browsers, although it still requires a prefix. Other column-related CSS properties and browser differences may break the column effect.

12.3D Transformation

Nothing is more exciting and impressive than a 3D special effect. Although there is still some controversy about the efficacy of 3D transformation effects, this does not prevent a well-designed 3D CSS effect from attracting users' attention.

Here is a login window that imitates the Apple interface. It is recommended to read. If you want to learn 3D CSS in detail, you can read this detailed introduction. If it is not for IE users, the browser compatibility of 3D CSS is still good.

Others

There are many famous features worth mentioning: you can now stop using the border-radius and box-shadow prefixes; you can also use data-uri as a background image in each browser; Opacity is also widely supported, as is background-size which is very useful.

For cross-browser native support for flexbox, @supports, filters, css masks and other features, we may have to wait. But I think it's worth the wait!