CSS3 Introduction and Modules [How To]

What is CSS3? And what is CSS3 Modules?

CSS3 stand for “Cascading Style Sheets” and it is the latest standard for CSS and It is completely backwards compatible with the CSS’s earlier versions.

The CSS3 is split into the modules and the module contains the specification of “old CSS”.

The CSS3 modules as following as,

1. Box Model

2. Selectors

3. Backgrounds

4. Borders

5. Image Values

6. Replaced Content

7. Text Effects

8. 2DTransformations

9. 3D Transformations

10. Animations

11. Multiple Column Layout

12. User Interface

13. And so on..

Stayed Informed – 161 Best CSS Properties, Values and Examples

Example as,

<!DOCTYPE html>
<html>
<head>
    <style>
        #css3demo {
            width: 400px;
            height: 80px;
            background: #008ad3;
            -webkit-transition: width 4s, height 4s;
            transition: width 4s, height 4s;
        }
        #css3demo:hover {
            width: 200px;
            height: 200px;
            background: green;
        }
    </style>
</head>
<body>
    <p><b>CSS3 Example -</b> Speed Curve of the Transition</p>
    <div id="css3demo"></div>
</body>
</html>