🪄 Hey Web enthusiasts as in the last blog we took an overview of CSS, in this blog we will see the magical nature of CSS 🪄

📌Box Model :

The CSS Box Model 📦 is a fundamental concept that defines the structure and layout of elements on a webpage. Every HTML element is treated as a rectangular box, and the box model describes how these boxes are rendered, including their dimensions and spacing. The model consists of four main components: content, padding, border, and margin. These four components are shown in the image below 🔽

Content:
- The innermost part of the box that holds the actual content, such as text, images, or other HTML elements.
Padding:
- The padding is the transparent area around the content, inside the border. It provides space between the content and the border.
Border:
- The border surrounds the padding and content, defining the box's outer edge. It can have a specific style, color, and width.

Margin:

The margin is the outermost layer of the box, providing space between the border of the current box and its neighboring elements.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .box {
      width: 200px;
      height: 100px;
      padding: 20px;
      border: 2px solid #3498db;
      margin: 10px;
    }
  </style>
</head>
<body>
  <div class="box">
    This is a box with content, padding, border, and margin.
  </div>
</body>
</html>

📌Transition and Transform in properties :

1. Transition property :

The transition property in CSS is used to define how an element should transition between different states. It allows you to smoothly animate changes in CSS properties.

.element {
  transition: property duration timing-function delay;
}

property: Specifies the CSS property to which the transition should be applied.
duration: Specifies the duration of the transition. It can be in seconds or milliseconds.
timing-function: Specifies the speed curve of the transition. Common values include ease, ease-in, ease-out, ease-in-out, linear, and custom cubic-bezier functions.
delay: Specifies a delay before the transition starts. It can also be in seconds or milliseconds.

2.Transform property :

The transform property in CSS is used to apply 2D and 3D transformations to an element. It includes functions like translate(), rotate(), scale(), and more.

.element {
  transform: transform-function;
}

Combined example of ( Transition + Transform ) is given below 🔻

.image {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  transition: transform 0.5s ease-in-out;
}

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

In the above example, the image rotates by 45 degrees and scales up when hovered, creating a combined effect using both transition and transform properties.

An interactive video 📹 explaining the transform property is attatched below, hope it will help you to understand the transform property.

https://youtube.com/shorts/0Hc4H--D3Xc?si=VJBmoso0VjQx4bHQ

📌Animations in CSS:

CSS animations allow you to create dynamic and visually appealing effects on web pages by smoothly transitioning CSS properties over a specified duration. Animations in CSS are defined using the @keyframes rule, which specifies a set of styles for an element at various points during the animation.The @keyframes rule is used to define the animation's keyframes, which are the styles applied to an element at specific points during the animation.

Basic structure of the code block for the animations is given below🔻

@keyframes animationName {
  0% {
    /* Styles at the beginning of the animation */
  }
  50% {
    /* Styles in the middle of the animation */
  }
  100% {
    /* Styles at the end of the animation */
  }
}

Example :

you can see how animations work using this block of code ⏬

@keyframes fadeInOut {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.element {
  animation: fadeInOut 2s ease-in-out infinite;
}

In this example, the element will smoothly fade in, hold its opacity for a while, and then fade out, creating a continuous loop.

🧚 CSS animations are a powerful tool for enhancing the user experience on the web by adding motion and interactivity to elements. They are widely used for creating engaging and visually appealing interfaces.

Again the video 📹 to create a loading animation is attatched below, see it and try to understand how animations work.

https://youtube.com/shorts/4FgDNUaOcto?si=g-K98FxQaMxiIaZB

Deep Dive Into CSS🕵️‍♂️ - part 1