CSS Functions- Part 2

Neelakshi Sarma
Last Updated: May 13, 2022

Introduction

In the first part of this article, CSS Functions Part 1, we introduced what functions in CSS are. For a quick recap, 

 

CSS functions are predefined functions in CSS that enhance the presentation of web pages by altering colours, layout, and fonts.

 

We also saw that CSS functions differ from normals functions in the following ways:

  1. They are always predefined.
  2. They always give an output in the form of changes in the presentation of web pages. 

 

We learnt about the following CSS functions too:

  • rgb( ) and rgba( )
  • hsl( ) and hsla( )
  • :nth-child( ) and :nth-last-child( )
  • :nth-of-type( ) and :nth-last-of-type( )
  • scaleX( ), scaleY( ), scaleZ( ), scale3d( ) and scale( )
  • translateX( ), translateY(), translateZ(), translate3d(), and translate()
  • rotateX(), rotateY(), rotateZ(), rotate3d(), and rotate()
  • skewX( ), skewY( ) and skew( )

 

But remember we said that this isn’t all?

 

In this article, we’ll finally finish discussing some standard CSS functions.

Source: giphy

Types of CSS Functions with Examples Continued

Filter Functions

What’s the first thing that comes to your mind when you hear filter? 

 

For me, it’s Instagram filters, and that’s kind of what filter functions in CSS are too!

 

Exciting, isn’t it? Let’s see what they are without any more delay. 

 

brightness( )

This function adjusts the brightness of an element. A percentage is passed as a parameter to the function which determines the brightness. 

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>My Page</title>
    <link href="style.css" rel="stylesheet">
</head>
<body>
    <p>Brightness = 150%</p>
    <img src="Rose.jpeg" class="pic">
</body>
</html> 

CSS:

.pic
{
    height25%;
    width25%;
    filterbrightness(150%);
}

Output:

 

blur( )

As the name suggests, this function blurs the element.

For example,

CSS:

.pic
{
    height25%;
    width25%;
    filterblur(5px);
}

Output:

 

contrast( )

This function modifies the contrast between the light and the dark elements in an image. 

CSS:

.pic
{
    height25%;
    width25%;
    filtercontrast(500%);
}

Output:

 

greyscale( )

Almost everyone has fooled around with the greyscale filter on Instagram, so we probably already know that greyscale means removing all the colour from an image. Let’s see how it’s done in CSS using a function with our old example.

CSS:

.pic
{
    height25%;
    width25%;
    filtergrayscale(50%);
}

Output:

 

invert( )

This function inverts the colours in an image. For example, white (rgb(255,255,255)) will become black (rgb(0,0,0)) and red (rgb(255,0,0)) will become blue (rgb(0,0,255)).

CSS:

.pic
{
    height25%;
    width25%;
    filterinvert(100%);
}

Output:

 

opacity( )

We have already seen how we can modify the opacity of coloured elements by adding the alpha value to them. The same can be done for images, too, as shown below.

CSS:

.pic
{
    height25%;
    width25%;
    filteropacity(50%);
}

Output:

 

saturate( )

This function changes the intensity of the colours in the image. 

CSS:

.pic
{
    height25%;
    width25%;
    filtersaturate(50%);
}

Output:

 

sepia( )

This function is the CSS counterpart of everyone’s favourite filter, making a picture look old fashioned. 

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>My Page</title>
    <link href="style.css" rel="stylesheet">
</head>
<body>
    <img src="Rose.jpeg" class="pic">
</body>
</html>

CSS:

.pic
{
    height25%;
    width25%;
    filtersepia(100%);
}

Output:

drop-shadow( )

This function is used to create a shadow of an image to give a 3-D effect. 

CSS:

.pic
{
    height25%;
    width25%;
    filterdrop-shadow(50px 50px 0.5rem #548a3f);
}

Output:

 

hue-rotate( )

This method is used to shift the hue of each pixel in an image by the amount specified as the parameter. 

For example, if we rotate the hue by 180 degrees in the picture of the rose, red will become green and green will become blue. (red --> 180deg rotate -->green --> 180 degree rotate --> blue --> 180 degree rotate --> red).

CSS:

.pic
{
    height25%;
    width25%;
    filterhue-rotate(180deg);
}

 

Output:

 

Shape Functions

When we view someone’s profile on Facebook or even Instagram, their profile picture is displayed inside a circle. Using the shape functions in CSS, we can do it ourselves! Let’s see how. 

circle( )

This function creates a circular mask for an image. In other words, a picture is displayed inside a circle, as shown below.

CSS:

.pic
{
    clip-pathcircle(25vw at 50% 50%);
}

Output:

 

ellipse( )

This function gives a similar output as the circle( ), except an elliptical mask is made for the image.

CSS:

.pic
{
    clip-pathellipse(25vw 10vw at 50% 50%);
}

Output:

 

inset( )

This function masks an image in the shape of a rectangle. Notice that by masking, we are cropping the image and not changing the size.

CSS:

.pic
{
    clip-pathinset(25% 25% 10px 3vw);
    height25%;
    width25%;
}

Output:

 

polygon( )

This function masks an image in the shape of any polygon, as shown below. It is challenging to use since we have to specify multiple sides correctly to get the desired shape. 

CSS:

.pic
{
    clip-path: polygon(42.331.88%, 25.262.64%, 14.8326.48%, 5.2924.19%, -2.3332%, 0.1650.5%, 35.6758.39%, 48.8870.26%, 59.7759.95%, 74.3365.61%, 71.1495.99%, 86.9105.44%, 93.3561.99%, 101.0658.7%, 102.3433.3%, 90.3427.83%, 80.396.94%, 58.83-4.37%);
}

Output:

 

Mathematical Functions

No matter how much we don’t like Maths, it never really leaves us alone, does it? Well, look here’s again - mathematical functions in CSS, but wait, isn’t that a good thing? Now we won’t have to do the maths ourselves since there are functions for the same!

Source: giphy

calc( )

This function is most commonly used to size and scale elements to their original size. 

CSS:

.pic
{
    height25%;
    widthcalc(25% + 5rem);
}

 

min( ) and max( )

As in normal programming languages, the min( ) and max( ) functions find the smallest and largest values of the two parameters passed, respectively. 

CSS:

.pic
{
    height25%;
    widthmin(100px, 30rem);
}

 

clamp( )

This function takes three values as an argument - a minimum value, an ideal value and a maximum value. It is used to limit (or clamp) the size of an element between a minimum and maximum value while trying to keep the size ideal. 

 

For example, let’s consider an image whose minimum value is to be 100 px, the maximum value is to be 500px, and the ideal value is to be 25% the size of the page. 

Now, the size of the page varies from browser to browser. So, if for a browser A, 25% of the size of the page = 150 px, then the size will be the ideal value. 

But, if for a browser B, 25% of the page = 50 px, then the size will be adjusted to 100 px, our minimum value. 

Similarly, if for a browser C, 25% of the page = 750 px, the size will be kept at 500 px, our maximum value. 

CSS:

.pic
{
    height25%;
    widthclamp(100px,25%,500px);
}

 

25% of my browser page (Firefox) for this code does not exceed any limits, so its size is the ideal value.

 

Note: I have not given the output of any of the codes since it won’t be understandable. To get a clear picture of what these functions do, it’s better to run it ourselves. The HTML, CSS and image files for this code can be found here.

Gradient Functions

Do you know what the word gradient means in English?

 

If you guessed a gradual change, you are correct!

So, gradient functions are CSS functions that provide a gradual colour change, but doesn’t this remind you of something? 

 

That’s right, the Instagram logo!  

 

The Instagram logo is a perfect example of what the gradient function does. We can learn more about CSS gradients here.

 

Grid Functions

With the advancement of technology, web development has had its advances too. CSS grid is one of them. With its help, websites are optimised to display on any device and any browser correctly. Some grid functions are:

 

Function

Use

fit-content( )

This function is used to fit the content in a particular row or column by adjusting the size of the element or lines of text.

minmax( )

This function limits the width and height of rows and columns in grid rows and columns.

repeat( )

This function replicates the attributes of a row or a column in the grid layout.

 

Animation Functions

If we get the choice to read a short paragraph or watch an animation of it, which one will we choose?

 

I’m sure most of us will choose to watch the animation. So, adding visual effects to a web page is an important part of styling it. To do that, there are certain animation functions like steps( ), path( ) and cubic-bezier( ). We can learn more about CSS animations here. 

 

Frequently Asked Questions

  1. What are CSS functions?
    CSS functions are predefined functions in CSS that enhance the presentation of web pages by altering colours, layout, and fonts.
     
  2. How are CSS functions different from regular functions?
    CSS functions differ from normals functions in the following ways:
    They are always predefined.
    They always give an output in the form of changes in the presentation of web pages.
     
  3. Name some common filter functions in CSS. 
    Some common filter functions in CSS are:
    brightness( )
    blur( )
    contrast( )
    greyscale( )
    invert( )
    opacity( )
    saturate( )
    sepia( )
    drop-shadow( )
    hue-rotate( )
     
  4. What are shape functions in CSS? Give examples.
    Shape functions in CSS mask out or crop a portion of the image in shapes like a circle, ellipse, rectangle or any polygon. 
    Examples of shape functions are:
    circle( )
    ellipse( )
    inset( )
    polygon( )
     
  5. What is the clamp( ) function in CSS?
    The clamp( ) function takes three values as an argument: a minimum, ideal, and maximum. It is used to limit (or clamp) the size of an element between a minimum and maximum value while trying to keep the size ideal. 

 

Key Takeaways

At the end of this article, we end the two articles discussing CSS functions. Now we have a basic understanding of the different functions in CSS, but as always, this isn’t the end. 

Learning CSS is no fun unless and until you apply it. So let’s get our hands dirty and design a website ourselves with the help of all the functions we learned. 

The link to the basic HTML and CSS code that I used to show a few examples can be found here. You can modify this code or write a new one all by yourself for practice. 

Was this article helpful ?
0 upvotes

Comments

No comments yet

Be the first to share what you think