Prev

CSS Functions

CSS functions perform specific tasks, such as manipulating colors, positioning elements, or applying transformations. Functions like calc(), rgb(), and url() are widely used to make CSS more dynamic and versatile.

Key Topics

The calc() Function

The calc() function allows mathematical calculations to dynamically define property values. It combines units like percentages, pixels, and ems.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>calc() Function</title>
    <style>
        .box {
            width: calc(100% - 50px);
            height: 100px;
            background-color: lightblue;
            margin: 20px auto;
        }
    </style>
</head>
<body>
    <div class="box">This box is 50px smaller than the screen width.</div>
</body>
</html>

Explanation: The calc() function dynamically calculates the width of the box as the full screen width minus 50px.

The rgb() and rgba() Functions

The rgb() function defines colors using red, green, and blue values. The rgba() function adds an alpha value for transparency.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>rgb() and rgba()</title>
    <style>
        .solid {
            background-color: rgb(255, 0, 0);
            padding: 20px;
        }
        .transparent {
            background-color: rgba(0, 0, 255, 0.5);
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="solid">Solid Red</div>
    <div class="transparent">Semi-Transparent Blue</div>
</body>
</html>

Explanation: The first box uses solid red color, while the second box is semi-transparent with blue color.

The url() Function

The url() function is used to specify a file location, such as an image for a background or a font file.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>url() Function</title>
    <style>
        .background {
            background-image: url('https://via.placeholder.com/300');
            width: 300px;
            height: 200px;
            background-size: cover;
            margin: 20px auto;
        }
    </style>
</head>
<body>
    <div class="background"></div>
</body>
</html>

Explanation: The box uses the url() function to set a placeholder image as the background.

The clamp() Function

The clamp() function sets a value within a defined range, ensuring responsiveness and flexibility.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>clamp() Function</title>
    <style>
        h1 {
            font-size: clamp(16px, 5vw, 32px);
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>Responsive Heading</h1>
</body>
</html>

Explanation: The heading's font size adjusts between 16px and 32px, scaling with the viewport width.

Key Takeaways

  • calc(): Performs mathematical calculations for dynamic values.
  • rgb() and rgba(): Defines colors with or without transparency.
  • url(): Links to external resources like images or fonts.
  • clamp(): Ensures values stay within a defined range, ideal for responsiveness.
Prev