10 CSS functions every Front End developer Should Know
Like all other programming languages, CSS also have their functions. CSS functions are used as a value for various CSS properties. Unlike other programming languages, we cannot write our own functions in CSS.
Let us take a look at some of the important CSS functions you should know –
1. url() Function: This function is used to set the background image, list-style, list-style-image, content, cursor, border, border-image, border-image-source, mask, mask-image.
background: url("photo.jpg")
2. calc() Function: This function is used to perform calculations.
width: calc(100%-60px)
3. var() Function: This function is used to insert the value of a CSS variable.
--white: #fff
h2 { color: var(--white); }
4. rgb() & rgba() Functions: It is used to describe the levels of colour, here ‘r’ stands for red, ‘g’ stands for green, ‘b’ stands for blue and ‘a’ is used to specify the opacity of a colour.
color: rgb(0, 0, 0)
color: rgba(0, 0, 0, 1)
5. hsl() Function: This function is used to describe the levels of color using hue, saturation and lightness.
color: hsl(0, 0, 0)
6. blur() Function: It is used to apply the blur effect.
.body{
filter : blur(100px);
}
7. brightness() Function: It helps to adjust the brightness.
.h2{
filter: brightness(50%);
}
8. opacity() Function: It helps to set the opacity of the element.
img{
filter : opacity(50%);
}
9. :not() Function: To apply the style to img element not having .no-p class.
img:not(.no-p){
padding: 0;
}
10. :nth-child() & :nth-last-child() Selectors: To select one or more elements in a group of elements.
li:nth-child(2),
li:nth-last-child(2){
color: yellow;
}
Last Updated :
12 Mar, 2021
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...