CSS3 Complete Feature List With Examples

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);
}