CSS Functions

CSS Functions

CSS functions are used for different CSS properties. Every front-end developer should have knowledge of all CSS functions. It makes the coding easier.

Functions	Explanation
attr().	It returns the value of an attribute of the selected element, which is quite significant.
calc().	Allows you to specifically perform calculations to determine CSS property values, kind of contrary to popular belief. Calculate any mathematical functions.
conic - gradient().	It creates a conic gradient subtly.
counter().	Returns the very current value of the named counter in a major way.
cubic - bezier().	Explains a cubic Bezier curve, kind of contrary to popular belief.
hsl().	Explains colors using the Hue-Saturation-Lightness model (HSL) subtly. This function describes the level of colors by using hsl.
hsla().	Explains colors using the Hue-Saturation-Lightness-Alpha model (HSLA) in a major way.
linear - gradient().	This function works as an inbuilt function in CSS which is utilized to set the linear gradient as background picture.
max().	Uses the largest value, from a comma-separated list of values, as the property value. Set the max of nos. Given.
min().	This function works in css is utilized to extract the mini value from a bunch of comma-separated values.
repeating - conic - gradient().	Repeats a conic gradient, which generally is quite significant.
repeating - linear - gradient().	Repeats a linear gradient, definitely contrary to popular belief.
repeating - radial - gradient().	Subtly repeats a radial gradient.
rgb().	Explains colors using the Red-Green-Blue model (RGB) subtly. Describes the level of color.
rgba().	Explains colors using the Red-Green-Blue-Alpha model (RGBA). Describes the levels of color.
var().	Inserts the value of a custom property, which is fairly significant.
url()	Function is used to set list-style, image, cursor, mask, mask-image, background-image, content, list-style-image.
blur()	Blur effect is applied by this function.
brightness()	The brightness is adjust by this function.
opacity()	Opacity of the element is set .
not()	Apply the style to image (img) element not having .no-p class.

Some functions for the most part are described/explained using small code(syntax) are as follows :

background: url(“image.png/image.jpg”)

height: calc(90%-50px)

      -    var( <custom-property-name> , <declaration-value>? )

      -    color: rgb(0,0,0)

color: rgba(0,0,0,1)

color: hsl(0,0,0)

.body{
          filter: blur(100px);
              }

.h2{
       filter: brightness(40%);
    }

img {
      filter: opacity(40%);
   }

img:not(.no-p){
           padding: 0;  }

Some examples with its code and output:

1. calc() function-

code is as follows:

<!DOCTYPE html>
           <html>
           <head>
           <style>
             #div1 
              { position: absolute;
                  left: 45px;
                  width: calc(50% - 50px);
                  border: 1px solid black;
                  background-color: lightgray;
                  padding: 4px;
                  text-align: center;
               }
               </style>
               </head>                       
    <body>
      <h1> The calc() function  in CSS </h1>
      <p> This is the short paragraph which creates div , <br>
             with a 40px gap between both sides of 
             the div and edge of window: </p> 
      <div id=”div1”>write something text here..</div>
      </body>
      </html>

Output 1 for the above calc() code is:

2. rgb() function-

code is as follows

<!DOCTYPE html>
                 <html>
                 <head>  
<style>
#p1 { background-color: rgb(128 , 0 , 128) ; } 
#p2 { background-color: rgb (255 , 255, 0) ; }
#p3 { background-color: rgb (255, 0 , 255 ) ; }
#p4 { background-color: rgb (192,192 ,192 ) ; }
#p5 { background-color: rgb (0 , 255, 0) ; }
#p6 { background-color: rgb (0 , 128, 128) ; }
#p7 { background-color: rgb ( 255, 127 , 80  ) ; }
</style>
</head>
<body>
<h1>The rgb() Function in CSS </h1>
<p> Different rgb colors : </p> 
< p id=”p1”> Purple </p>
< p id=”p2”> Yellow </p>
< p id=”p3”> Blue  </p>
< p id=”p4”> Silver </p>
< p id=”p5”> Lime </p>
< p id=”p6”> Teal </p>
< p id=”p7”> Coral </p>
</body>
</html>

Output for the above rgb() code is:

3. rgba() function

code is as follows :

<!DOCTYPE html>
<html>
<head>  
<style>
#p1 { background-color: rgba(198, 0 , 198,0.3 ) ; } 
#p2 { background-color: rgba(20, 214, 20, 0.836); }
#p3 { background-color: rgba(0,0,255,0.3 ); }
#p4 { background-color: rgba(192,192,192,0.3 ) ; }
#p5 { background-color: rgba(255, 255, 0, 0.884) ; }
#p6 { background-color: rgba(240, 84, 12, 0.795) ; }
#p7 { background-color: rgba(255, 0, 0, 0.473) ; }
</style>
</head>
<body>
<h1>The rgb() Function in CSS </h1>
<p> Different rgb colors : </p> 
<p id="p1"> Purple </p>
<p id="p2"> Green </p>
<p id="p3"> Blue </p>
<p id="p4"> Light blue </p>
<p id="p5"> Yellow </p>
<p id="p6"> Orange </p>
<p id="p7"> Pink </p>




</body>
</html>

Output for the above rgba() code is:

4. blur() function

code is as follows :

<!DOCTYPE html> 
<html> 
<head> 
    <title>The blur() Function in CSS </title> 
 <style>
        h1 {
            color: pink ;
             }
  body {
            text-align:center;
        }
        .blur_effect {
            filter: blur(4px);
        }
</style>
</head> 
<body> 
    <h1>Flower photograph </h1> 
    <h2>CSS blur() function</h2>
   <img class="blur_effect" src = "flower.png"
        alt="Flower image"> 
</body> 
</html>

Output for the above blur() code is:

CSS Introduction

CSS Attributes

Questions