CSS Functions
CSS functions serve as values for a variety of CSS attributes. With the help of built-in CSS functions, you may dynamically modify data and create more adaptable and reusable styles.
CSS Functions: An Introduction to Dynamic Style
Property values are set using special syntaxes called CSS functions. Compared to plain values, they enable more dynamic and complicated styling. CSS functions frequently accept parameters and are surrounded by parenthesis.
Some CSS functions include the following:
- rgb() and rgba(): are used to adjust the color.
- url(): used to set paths to external resources.
- calc(): used to do computations.
- var(): used to use custom properties.
- attr(): used to obtain the value of an HTML attribute.
Syntax:
Common syntax for all CSS Functions is written below:
Property_name: CSS Functions(CSS_Functions_value);CSS Functions
| CSS FUNCTIONS | DESCRIPTION |
| rgb() | uses the components of green, blue, and red to define a color. |
| rgba() | uses the values of alpha (opacity) and red, green, and blue to define a color. |
| hsl() | uses hue, saturation, and brightness to define a color. |
| hsla() | Determines the hue, saturation, brightness, and alpha (opacity) value of a color. |
| calc() | determines the values of CSS properties by doing calculations. |
| var() | Gets a CSS custom property’s (variable’s) value. |
| url() | gives the location of an external resource, like a font or picture. |
| attr() | used to obtain the value of an HTML attribute. |
| translate() | An element is moved from its existing location. |
| translateX() | An element is moved horizontally. |
| translateY() | An element is moved vertically. |
| translateZ() | enables 3D space element movement along the z-axis. |
| rotate() | rotates an object in the 2D plane around a fixed point. |
| rotateX() | turns an element in a horizontal direction. |
| rotateY() | rotates a component in a vertical direction. |
| rotateZ() | rotates an object in a z-axis direction. |
| scale() | an element’s scale in two dimensions. |
| scaleX() | Scale an element horizontally. |
| scaleY() | Vertically scales an element. |
| skew() | skews a component in both the x and y directions. |
| perspective() | defines the 3D converted element’s perspective view. |
| matrix() | Describes a matrix-based 2D transformation. |
| matrix3D() | Specifies a 4×4 matrix-based 3D transformation. |
| clamp() | sets a value limit that falls between two bounds. |
| min() | takes a list of values and returns the smallest value. |
| max() | From a list of values, returns the largest value. |
| linear-gradient() | generates a linear gradient. |
| radial-gradient() | A radial gradient is produced. |
| counter() | yields the named counter’s current value. |
| opacity() | Use a filter on the picture to adjust its transparency. |
| cubic-bezier() | Describes a Cubic Bezier curve. |
Applications of CSS Functions
- Resource Linking: To easily link fonts, pictures, and other external resources, use `url()}.
- Custom Properties: Use `var()` to build styles that are reused and keep your CSS consistent.
- Visual Effects: Use transformation functions for animations, such as `translate()`, `rotate()`, and `scale()}, to enhance items.
- Clamping Values: For responsive design, use `clamp()` to restrict values between a specified minimum and maximum.
- Static Arrangements: For responsive designs, use `calc()` to dynamically calculate widths and heights.
- Accurate Color Representation: Represent colors accurately by applying colors using `rgb()`, `rgba()`, `hsl()`, and `hsla()}.
- Opacity and Blur: To generate visually captivating effects, use functions like `opacity()` and `blur()`.
CSS Functions Examples
Example 1: using radial-gradient() function
<!DOCTYPE html>
<html>
<head>
<title>CSS Gradients example</title>
<style>
#main {
height: 250px;
width: 600px;
background-color: white;
background-image: radial-gradient(lightblue, #fff, skyblue);
}
.cds {
text-align: center;
font-size: 42px;
font-weight: bold;
padding-top: 78px;
}
.coders {
font-size: 20px;
text-align: center;
}
</style>
</head>
<body>
<div id="main">
<div class="cds">CODERSHOT</div>
<div class="coders">
Cracking the Code
</div>
</div>
</body>
</html>
Output:
Example 2: using calc(), rgb(), rgba(), var(), url() functions
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Functions Example</title>
<style>
:root {
--primary-color: rgb(27, 196, 199); /* rgb() */
--secondary-color: rgba(248, 180, 33, 0.8); /* rgba() */
--header-height: 100px;
}
body {
background-color: var(--primary-color); /* var() */
color: white;
font-family: sans-serif;
margin: 0;
padding: 0;
}
.head {
background-image: url('header-background.jpg'); /* url() */
background-size: cover;
height: var(--header-height);
display: flex;
align-items: center;
justify-content: center;
font-size: 2.1em;
}
.container {
width: calc(100% - 40px); /* calc() */
margin: 20px auto;
padding: 20px;
background-color: var(--secondary-color); /* var() */
text-align: center;
}
h2 {
margin-top: 20px;
}
form {
display: flex;
flex-direction: column;
align-items: center;
}
input, textarea {
margin: 10px 0;
padding: 10px;
width: 80%;
max-width: 400px;
border: none;
border-radius: 4px;
}
button {
padding: 10px 20px;
border: none;
border-radius: 4px;
background-color: white;
color: var(--primary-color);
cursor: pointer;
font-size: 1em;
}
button:hover {
background-color: rgba(19, 193, 196, 0.2);
color: white;
}
</style>
</head>
<body>
<div class="head">
<h1>Welcome to Our Website</h1>
</div>
<div class="container">
<h2>About Us</h2>
<p>We are here to enable you to learn anytime and from any location..</p>
<h2>Our Services</h2>
<ul>
<li>Service 1</li>
<li>Service 2</li>
<li>Service 3</li>
</ul>
<h2>Contact Us</h2>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="message">Message:</label>
<textarea id="message" name="message" required></textarea>
<button type="submit">Send</button>
</form>
</div>
</body>
</html>Output:
Limitations of CSS Functions
CSS functions are limited by these following factors:
1. Problems with Browser Compatibility.
2. No Runtime Updates or Dynamic Behavior.
3. Limited Readability and Complicated Syntax.
4. Possible Issues with Performance (Reflows/Repaints).
5. Conditional Logic Is Missing.
6. Minimal JavaScript Interaction.
7. Unit Restrictions.
8. Absence of Specific Debugging Tools.
Advantages of CSS Functions
Following are the benefits of CSS Functions:
1. Workflow-based computations with `calc()`.
2. Using `min()`, `max()}, and `clamp()} in responsive design.
3. Lessens and simplifies repetitive code.
4. Accurate style control.
5. Reactive, effective actions devoid of JavaScript.
6. Layouts that hold for all screen sizes.
7. More readable and maintainable code.
8. Expands the possibilities for creative design.
Conclusion
When it comes to creating dynamic and adaptable styles, CSS functions are essential in today’s web development. Finally, because these offer strong tools to improve responsiveness, expedite development, and expand stylistic capabilities, learning them is crucial for front-end engineers. Web projects can become far more high-quality and maintainable by knowing and using these features to their full potential.
READ ALSO: LEARN ABOUT CSS PROPERTIES
