CSS3 Features You May Not Be Aware Of: Flexbox, Grid Layouts, Custom Properties, Transitions, Animations, and Multiple Backgrounds

Cascading Style Sheets (CSS) continue to evolve and the latest versions may have some features that you may not even be aware of. Here are some of the major improvements and methodologies introduced with CSS3, along with code examples:

• Flexible Box Layout (Flexbox): a layout mode that allows you to create flexible and responsive layouts for web pages. With flexbox, you can easily align and distribute elements within a container. n this example, the .container class uses display: flex to enable flexbox layout mode. The justify-content property is set to center to horizontally center the child element within the container. The align-items property is set to center to vertically center the child element. The .item class sets the background color and padding for the child element.

<div class="container">
  <div class="item">Centered Element</div>
</div>

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

.item {
  background-color: #ddd;
  padding: 20px;
}

• Grid layout: another layout mode that allows you to create complex grid-based layouts for web pages. With grid, you can specify rows and columns, and then place elements within specific cells of the grid. In this example, the .grid-container class uses display: grid to enable grid layout mode. The grid-template-columns property is set to repeat(2, 1fr) to create two columns of equal width. The gap property sets the spacing between grid cells. The .grid-item class sets the background color and padding for the grid items.

<div class="grid-container">
  <div class="grid-item">Item 1</div>
  <div class="grid-item">Item 2</div>
  <div class="grid-item">Item 3</div>
  <div class="grid-item">Item 4</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.grid-item {
  background-color: #ddd;
  padding: 20px;
}

• Transitions: CSS3 introduced a number of new properties and techniques for creating transitions on web pages. For example, the transition property can be used to animate changes in CSS properties over time. In this example, the .box class sets the width, height, and initial background color for the element. The transition property is set to background-color 0.5s ease to animate changes to the background color property over half a second with an ease-in-out timing function. The .box:hover class changes the background color of the element when the mouse pointer is over it, triggering the transition animation.

<div class="box"></div>

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: background-color 0.5s ease;
}

.box:hover {
  background-color: blue;
}

• Animations: CSS3 introduced a number of new properties and techniques for creating animations on web pages. In this example, we’ve added an animation using the animation property. We’ve defined a @keyframes rule for the animation, which specifies that the box should rotate from 0 degrees to 90 degrees over a duration of 0.5 seconds. When the box is hovered over, the spin animation is applied to rotate the box. The animation-fill-mode property is set to forwards to ensure that the final state of the animation is retained after it finishes.

<div class="rotate"></div>

.rotate {
  width: 100px;
  height: 100px;
  background-color: red;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  /* Add animation properties */
  animation-duration: 0.5s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}

/* Define the animation */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(90deg); }
}

.rotate:hover {
  animation-name: spin;
}

• CSS Custom Properties: Also known as CSS variables, custom properties were introduced in CSS3. They allow you to define and use your own custom properties in CSS, which can be used to store and reuse values throughout your stylesheets. CSS variables are identified by a name that starts with two dashes, such as --my-variable. In this example, we define a CSS variable called –primary-color and give it a value of #007bff, which is a blue color commonly used as a primary color in many designs. We’ve used this variable to set the background-color property of a button element, by using the var() function and passing in the variable name. This will use the value of the variable as the background color for the button.

:root {
  --primary-color: #007bff;
}

button {
  background-color: var(--primary-color);
  color: white;
  padding: 10px 20px;
}

• Multiple Backgrounds: CSS3 allows you to specify multiple background images for an element, with the ability to control its positioning and stacking order. The background is composed of two images, red.png and blue.png, which are loaded using the background-image property. The first image, red.png, is positioned at the right bottom corner of the element, while the second image, blue.png, is positioned at the left top corner of the element. The background-position property is used to control the positioning of each image. The background-repeat property is used to control how the images repeat. The first image, red.png, is set to not repeat (no-repeat), while the second image, blue.png, is set to repeat (repeat).

<div id="multibackground"></div>

#multibackground {
  background-image: url(red.png), url(blue.png);
  background-position: right bottom, left top;
  background-repeat: no-repeat, repeat;
  height: 200px;
  width: 200px;
}