In today's article, we will explain the advanced topic of CSS with simple examples so that you can understand this concept completely. In this, we've covered everything you need to know about learning CSS functions.
Let's get started.
A CSS function works as a value in a CSS property. The rgb() function is used to define colors, while the attr() function facilitates the retrieval of HTML attribute values.
Many functions are used in the CSS transform. For instance, the rotate() function rotates an element, while the scale() function resizes it.
Many functions are given below.
The attr() function
The attr() function is commonly known as an attribute, which allows the developer to fetch text from any class name. It is commonly employed in content or JavaScript. Below, we have given an example so that you can understand how it is done.
<head>
<style>
p::before {
content: attr(class);
color: steelblue;
}
p::after {
content: attr(attr-condition);
color: thistle;
}
p a::before {
content: attr(href);
}
</style>
</head>
<body>
<h1>The Attribute function</h1>
<p class="Hello " attr-condition=" !!">World</p>
<p><a href="https://codemafias.com"> go to codemafias</a></p>
</body>
The calc() function
The calc() function in CSS helps us calculate shapes, such as height, width, border, padding, and more. To use it, you need to know a little bit of mathematics. Using the calc() function with working code helps us make our website responsive.
For instance, consider a scenario where you've developed a website with a header that needs to be positioned 200px from the right side while remaining mobile-friendly. In such cases, employing the calc() function becomes essential.
<head>
<style>
.container {
background-color: thistle;
width: calc(100% - 200px);
height: 200px;
}
</style>
</head>
<body>
<h1>The calc() function</h1>
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Debitis earum quos aspernatur atque. Earum, saepe error officiis
dolore voluptas iure aliquam aut blanditiis libero minima, maxime
autem qui, recusandae similique porro. Repellendus accusamus rem,
vel ipsum eveniet, asperiores iusto iure blanditiis obcaecati
vitae unde libero, assumenda consectetur itaque tempora illo.</p>
</div>
</body>
To position a box at the center of a page, you can use the calc() function. This function helps calculate the exact position by subtracting half of the box's width from 50% for the left position and half of its height from 50% for the top position. This ensures that the box is perfectly centered horizontally and vertically on the page.
<head>
<style>
h1 {
text-align: center;
}
.container {
background-color: thistle;
width: 400px;
height: 300px;
position: absolute;
top: calc(50% - 150px);
left: calc(50% - 200px);
}
</style>
</head>
<body>
<h1>The calc() function</h1>
<div class="container">
</div>
</body>
The counter() function
The counter() function tracks text lines or items in a list so that the current line can be set appropriately. Simplifies the process of managing counts with increment, count, and reset.
For resetting, assign a unique name to the counter and set the starting number. For instance, if you want to start counting from 1, simply type 1. You can also choose any other starting value, such as 10 or 100.
The counter function essentially prints the count, while the counter increment function boosts the count by a specified amount. For example, if you set the increment value to 5, each count will increase by 5, resulting in counts like 5, 10, 15, and so on.
Additionally, within the counter function, you can amend the appearance of the count using styles like upper-alpha, lower-alpha, upper-roman, or lower-roman. If you prefer regular numbers, you can simply leave specifying any style, as digits are the default format.
Lower-roman example
<head>
<style>
body {
width: 50%;
counter-reset: our_counter 0;
}
h2::before {
content: "Session " counter(our_counter, lower-roman) " : ";
counter-increment: our_counter 1;
color: steelblue;
}
</style>
</head>
<body>
<h1> The Counter function</h1>
<h2>What is code</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius laudantium nemo voluptatibus beatae quasi iure quam obcaecati, itaque quae molestiae nesciunt odio nostrum reiciendis adipisci tempora similique quis, asperiores nobis.</p>
<h2>What is programing</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius laudantium nemo voluptatibus beatae quasi iure quamobcaecati, itaque quae molestiae nesciunt odio nostrum reiciendis adipisci tempora similique quis, asperiores nobis.</p>
<h2>What is full stack developer</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius laudantium nemo voluptatibus beatae quasi iure quam obcaecati, itaque quae molestiae nesciunt odio nostrum reiciendis adipisci tempora similique quis,asperiores nobis.</p>
</body>
<head>
<style>
body {
background-color: whitesmoke;
counter-reset: our_counter 0;
}
h2::before {
counter-increment: our_counter;
content: "topic " counter(our_counter) " : ";
}
</style>
</head>
<body>
<h2>What is code</h2>
<h2>What is programing</h2>
<h2>What is full stack developer</h2>
</body>
The min(), max(), clamp() function
The min() function returns the smallest value among the provided options. For instance, if you set min(50%, 500px) for a section's width, it will choose the lesser value between 50% of the parent element's width and 500px. This helps ensure responsiveness without needing media queries.
These functions aren't limited to width, you can apply them to various properties like height, margin, padding, font size, and box-shadow. Additionally, by placing a fixed value at the end, you can maintain a minimum or maximum size while allowing flexibility.
The min and max functions are primarily used when creating responsive websites.
The min() function example
<head>
<style>
.min-width {
background-color: steelblue;
height: 150px;
width: min(50%, 300px);
text-align: center;
color: thistle;
}
.min-margin {
background-color: steelblue;
margin: min(5%, 30px) 10px;
text-align: center;
color: thistle;
}
</style>
</head>
<body>
<h1>The min() function</h1>
<div class="min-width">Hello world</div>
<p>Use min() to set the width of .min-width to whichever value is lower, <strong> 50% or 300px:</strong></p>
<p>Now you can check responsive</p>
<h1>The min() function margin</h1>
<div class="min-margin">Hello world</div>
</body>
When you use max(), it selects the largest value among the options you provide. For instance, if you set max(50%, 500px) for a div's width, it will choose the greater value between 50% of the parent element's width and 500px. This allows for dynamic sizing without needing media queries.
The max() function example
Similar to min(), max() isn't restricted to width, you can apply it to properties like height, margin, padding, font size, and box-shadow. By including a fixed value, you can establish a maximum size while retaining flexibility.
<head>
<style>
body {
background-color: aliceblue;
}
.max-width {
background-color: steelblue;
height: 150px;
width: max(600px, 300px);
text-align: center;
color: thistle;
}
.max-padding {
background-color: steelblue;
width: 38%;
padding: max(5%, 30px);
color: thistle;
}
</style>
</head>
<body>
<h1>The max() function width</h1>
<div class="max-width">Hello world</div>
<p>Use max() to set the width of .min-width to whichever value is large, <strong> 600px or 300px:</strong></p>
<p>Now you can check responsive</p>
<h1>The max() function padding</h1>
<div class="max-padding">Hello world</div>
</body>
The Calp() function example
The clamp() function sets a value within a range defined by a minimum and maximum. Its syntax is clamp(min, value, max). The value is constrained between the min and max values. If it's within the range, it's used as is; otherwise, the closest limit is applied.
We can apply it to various properties. height, margin, padding, font size, box-shadow, etc.
<head>
<style>
.clamp-width {
height: 20vh;
background-color: steelblue;
width: clamp(500px, 90%, 900px);
text-align: center;
font-size: 30px;
color: thistle;
}
</style>
</head>
<body>
<h1>The clamp() function</h1>
<div class="clamp-width">Hello world</div>
<h2>Now you can check responsive</h2>
</body>
The var() function
The var() function is used in any website to add reusable values like color, font, and more. By giving any name to these values, we can use them anywhere on our website.
To create a var, use :root{}. This allows you to use the variable anywhere on the site.
To define a variable, use var(--) followed by a unique name without spaces.
<head>
<style>
:root {
--box_1: crimson;
--box_2: steelblue;
--box_3: thistle;
--box_4: violet;
--text_color_1: white;
--text_color_2: black;
--font_heading: cursive;
--font_p: sans-serif;
}
.main,
h1 {
display: flex;
width: 85%;
justify-content: space-around;
text-align: center;
}
h2 {
font-family: var(--font_heading);
}
p {
font-family: var(--font_p);
}
.box-1 {
height: 250px;
width: 250px;
background-color: var(--box_1);
color: var(--text_color_1);
}
.box-2 {
height: 250px;
width: 250px;
background-color: var(--box_2);
color: var(--text_color_1);
}
.box-3 {
height: 250px;
width: 250px;
background-color: var(--box_3);
}
.box-4 {
height: 250px;
width: 250px;
background-color: var(--box_4);
}
</style>
</head>
<body>
<h1>The var() function</h1>
<div class="main">
<div class="box-1">
<h2>First heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto quisquam officia amet ipsa libero expedita nam sint tenetur commodi numquam!</p>
</div>
<div class="box-2">
<h2>Secound heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto quisquam officia amet ipsa libero expedita nam sint tenetur commodi numquam!</p>
</div>
<div class="box-3">
<h2>Third heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto quisquam officia amet ipsa libero expedita nam sint tenetur commodi numquam!</p>
</div>
<div class="box-4">
<h2>Four heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto quisquam officia amet ipsa libero expedita nam sint tenetur commodi numquam!</p>
</div>
</div>
</body>
The cubic-bezier() function
The cubic-bezier() function in CSS is handy for defining cubic Bezier curves. We can use this cubic Bezier in 2D images and custom transitions to achieve smooth animations.
It involves four control points (P0, P1, P2, and P3), where P0 is the start point and P3 is the endpoint, with P1 and P2 as midpoints.
Parameters for cubic-bezier() must be between 0 and 1.
You can experiment with different values on a cubic-bezier site for customizing transitions.
<head>
<style>
.first {
width: 500px;
height: 50px;
background: steelblue;
transition: 1s;
transition-timing-function: cubic-bezier(.93, .05, .11, 1.09);
}
.second {
width: 500px;
height: 50px;
background: thistle;
transition: 1s;
transition-timing-function: cubic-bezier(.48, .2, .46, .75);
}
div:hover {
width: 100px;
}
</style>
</head>
<body>
<h1>The cubic-bezier() Function</h1>
<div class="first"></div>
<div class="second"></div>
</body>
Conclusion
It is important to learn how to use CSS functions properly for web design and development. From creating custom transitions with cubic-bezier() to optimizing design consistency with var(), we learned from examples. Now you need to practice, so do the practice and master all these tasks to give a good level to your career.
I hope you completely understand this topic. If you have any questions, you can ask them in the question box given below.