CSS Functions- Part 2

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( )
• :n^th-child( ) and :n^th-last-child( )
• :n^th-of-type( ) and :n^th-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

Recommended Topic, Difference Between CSS and SCSS

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:

CSS:

Output:

blur( )

As the name suggests, this function blurs the element.

For example,

CSS:

Output:

contrast( )

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

CSS:

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:

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:

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:

Output:

saturate( )

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

CSS:

Output:

sepia( )

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

HTML:

CSS:

Output:

drop-shadow( )

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

CSS:

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:

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:

Output:

ellipse( )

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

CSS:

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:

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:

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:

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:

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:

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:

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.