In this article, we will learn CSS3 Complete Feature List With Examples. We will learn by doing lots of code examples.
CSS3 is the latest version of the Cascading Style Sheets (CSS) language. It introduced many new features that allow developers to create more visually appealing and interactive web pages. Here are some of the most popular CSS3 features with summaries and code examples:
1. CSS3 Selectors
new types of selectors like the attribute selector, structural pseudo-classes, and more
/* Select all <p> elements */
p {
color: red;
}
/* Select all elements with the class "box" */
.box {
border: 1px solid black;
}
2. Multiple Background Images
Allows multiple background images to be set for an element
/* Set multiple background images for an element */
background-image: url(image1.jpg), url(image2.jpg);
3. Box Shadow
Adds a shadow to an element
/* Add a shadow to an element */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);4. Border Radius
Rounds the corners of an element
/* Round the corners of an element */
border-radius: 10px;
5. Transitions
Adds animation to CSS properties when they change value
/* Add a transition to an element */
transition: all 0.5s ease-in-out;
6. Animations
Allows creating complex animations using @keyframes rules
/* Create an animation for an element */
@keyframes example {
from {transform: rotate(0deg);
to {transform: rotate(360deg);}
}
.example {
animation: example 2s infinite;
}
7. Flexbox
Flexbox provides a flexible way to layout items in a container, allowing for easier alignment and spacing
/* Create a flex container */
.container {
display: flex;
flex-wrap: wrap;
}
/* Create flex items */
.item {
flex: 1;
}
8. Grid Layout
provides a more complex layout system for arranging items in a container, with better control over column and row placement
/* Create a grid container */
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto;
}
/* Create grid items */
.item {
grid-column: 1 / 3;
grid-row: 1 / 2;
}
9. Media Queries
Allows for different styles to be applied to a page based on the device or screen size
/* Apply different styles for different screen sizes */
@media only screen and (max-width: 600px) {
body {
background-color: yellow;
}
}
10. Transforms
Transforms allows transforming an element in 2D or 3D space
/* Rotate an element */
transform: rotate(45deg);
11. Text Shadow
Text shadows adds a shadow to text
/* Add a shadow to text */
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
12. Gradient Backgrounds
Creates a gradient background for an element
/* Create a linear gradient background */
background: linear-gradient(to right, red, yellow);
13. RGBA Colors
Allows using colors with transparency
/* Use a color with transparency */
background-color: rgba(255, 255, 255, 0.5);
14. Custom Fonts
Allows using custom fonts on a web page
/* Import a custom font */
@font-face {
font-family: "MyFont";
src: url("myfont.ttf");
}
/* Use the custom font */
body {
font-family: "MyFont";
}
15. Box Sizing
Allows controlling the sizing of an element’s box model
/* Change the sizing of an element's box model */
box-sizing: border-box;
16. Overflow
Allows controlling what happens when an element’s content overflows its container
/* Control what happens when an element's content overflows */
overflow: scroll;
17. Sticky Positioning
Allows an element to become “sticky” and stay in place when scrolling
/* Make an element sticky */
.position-sticky {
position: sticky;
top: 0;
}
18. Filters
Allows applying visual effects to an element, such as blurring or inverting
/* Apply a visual effect to an element */
.filter-example {
filter: blur(5px);
}