Advanced CSS3 Properties

Let’s look into some advanced CSS3 properties that can greatly enhance the look and functionality of your web pages.

Transitions

Transitions allow you to change property values smoothly (over a given duration ).

/* Initial state */
.button {
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

/* Hover state */
.button:hover {
  background-color: #0056b3;
  transform: scale(1.1);
}

Explanation:

• transition: Specifies the property to transition (e.g., background-color), the duration (0.3s), and the timing function (ease).
• On hover, the background color and transform properties change smoothly.

Transform

Transforms allow you to rotate, scale, skew, or move elements.

.box {
  width: 100px;
  height: 100px;
  background-color: #007bff;
  transition: transform 0.3s ease;
}

.box:hover {
  transform: rotate(45deg) scale(1.2);
}

Explanation:

• transform: Applies a 2D or 3D transformation to an element. rotate(45deg): Rotates the element 45 degrees.
• scale(1.2): Scales the element to 1.2 times its original size.

Animations

Animations allow you to create keyframe-based animations.

@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}

.ball {
  width: 50px;
  height: 50px;
  background-color: #007bff;
  border-radius: 50%;
  animation: bounce 2s infinite;
}

Explanation:

• @keyframes: Defines the animation named bounce.
• animation: Applies the bounce animation with a duration of 2 seconds, and it repeats infinitely.
• The keyframes specify the transform at different points of the animation.

Custom Properties (CSS Variables)

CSS variables allow you to store values that you can reuse throughout your CSS.

:root {
  --primary-color: #007bff;
  --secondary-color: #0056b3;
  --padding: 10px;
}

.button {
  background-color: var(--primary-color);
  color: white;
  padding: var(--padding);
  border: none;
  border-radius: 4px;
}

.button:hover {
  background-color: var(--secondary-color);
}

Explanation:

• :root: Defines global variables.
• var(—variable-name): Retrieves the value of the variable.