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

Cascading Style Sheets (C.S.S) proceed to evolve and the newest variations might have some options that you could be not even concentrate on. Here are among the main enhancements and methodologies launched with CSS3, together with code examples:

• Flexible Box Layout (Flexbox): a structure mode that means that you can create versatile and responsive layouts for internet pages. With flexbox, you’ll be able to simply align and distribute components inside a container. n this instance, the .container class makes use of show: flex to allow flexbox structure mode. The justify-content property is about to heart to horizontally heart the kid factor inside the container. The align-items property is about to heart to vertically heart the kid factor. The .merchandise class units the background coloration and padding for the kid factor.

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

.container {
  show: flex;
  justify-content: heart;
  align-items: heart;
  top: 200px;
}

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

• grid structure: one other structure mode that means that you can create complicated grid-based layouts for internet pages. With grid, you’ll be able to specify rows and columns, after which place components inside particular cells of the grid. In this instance, the .grid-container class makes use of show: grid to allow grid structure mode. The grid-template-columns property is about to repeat(2, 1fr) to create two columns of equal width. The hole property units the spacing between grid cells. The .grid-item class units the background coloration and padding for the grid objects.

<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 {
  show: grid;
  grid-template-columns: repeat(2, 1fr);
  hole: 20px;
}

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

• transitions: CSS3 launched quite a few new properties and strategies for creating transitions on internet pages. For instance, the transition property can be utilized to animate modifications in CSS properties over time. In this instance, the .field class units the width, top, and preliminary background coloration for the factor. The transition property is about to background-color 0.5s ease to animate modifications to the background coloration property over half a second with an ease-in-out timing perform. The .field:hover class modifications the background coloration of the factor when the mouse pointer is over it, triggering the transition animation.

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

.field {
  width: 100px;
  top: 100px;
  background-color: pink;
  transition: background-color 0.5s ease;
}

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

• Animations: CSS3 launched quite a few new properties and strategies for creating animations on internet pages. In this instance, we have added an animation utilizing the animation property. We’ve outlined a @keyframes rule for the animation, which specifies that the field ought to rotate from 0 levels to 90 levels over a length of 0.5 seconds. When the field is hovered over, the spin animation is utilized to rotate the field. The animation-fill-mode property is about to forwards to make sure that the ultimate state of the animation is retained after it finishes.

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

.rotate {
  width: 100px;
  top: 100px;
  background-color: pink;
  text-align: heart;
  show: flex;
  align-items: heart;
  justify-content: heart;
  coloration: #fff;
  /* Add animation properties */
  animation-duration: 0.5s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}

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

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

• CSS Custom Properties: Also generally known as CSS variables, customized properties had been launched in CSS3. They assist you to outline and use your individual customized properties in CSS, which can be utilized to retailer and reuse values ​​all through your stylesheets. CSS variables are recognized by a reputation that begins with two dashes, reminiscent of --my-variable. In this instance, we outline a CSS variable known as –primary-color and provides it a price of #007bff, which is a blue coloration generally used as a main coloration in lots of designs. We’ve used this variable to set the background-color property of a button factor, through the use of the var() perform and passing within the variable identify. This will use the worth of the variable because the background coloration for the button.

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

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

• Multiple Wallpapers: CSS3 means that you can specify a number of background pictures for a component, with the power to manage its positioning and stacking order. The background consists of two pictures, pink.png and blue.pngthat are loaded utilizing the background-image property. the primary picture, pink.pngis positioned on the proper backside nook of the factor, whereas the second picture, blue.png, is positioned on the left prime nook of the factor. The background-position property is used to manage the positioning of every picture. The background-repeat property is used to manage how the photographs repeat. the primary picture, pink.pngis about to not repeat (no-repeat), whereas the second picture, blue.pngis about to repeat (repeat).

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

#multibackground {
  background-image: url(pink.png), url(blue.png);
  background-position: proper backside, left prime;
  background-repeat: no-repeat, repeat;
  top: 200px;
  width: 200px;
}