CSS is one of the popular styling languages for the web that allows you to control the beauty and style of your website. With various CSS properties, you can create a suitable layout, like an image, for web page design. Among the multiple capabilities of this language, the mod() function can be very flexible, especially at times when it comes to the properties such as size and position of elements on the page.
Understanding the behavior of the mod() function requires examining how it behaves during different times, such as when resizing the browser window. This function is used in mathematical calculations and allows you to control different values and get reasonable results from them. This issue might initially seem complicated, but with some practice, you can easily understand it.
When the mod() function is used in your CSS styles, it may be noticed that the behavior of this function changes when resizing the browser window. This behavior can be very beneficial for responsive web designs. In the following, we will review an example that distinctly shows the changes of this function.
Practical example to understand the Mod() function
As a simple example, we can use the mod() function to define the width or height of an element in a responsive way. Let’s take a look at this example:
<style>
.box {
width: calc(100px + (50px * (100vw % 3)));
height: 100px;
background-color: #f90;
transition: width 0.5s ease;
}
</style>
<div class="box"></div>
Line-by-Line Explanation
<style>: This tag defines a local style for the page..box: This class adds to the box element and configures its styles.width: calc(100px + (50px * (100vw % 3)));: The width of the box element utilizes a calculation that includes the mod() function. The width of the box will change according to the observed values, creating a dynamic effect.height: 100px;: A fixed height for the box has been set.background-color: #f90;: The box color will be orange.transition: width 0.5s ease;: This adds a smooth animation for changes in width during browser window resizing.</style>: This closes the style tag.<div class="box"></div>: This creates a div element with the class box, which applies the mod() operations to it.