CSS Functions

calc() function
Accepts a mathematical expression and returns a numerical value.
It is especially useful when working with different types of units (e.g. subtracting a px value from a percentage) to calculate the value of an attribute. +, -, /, and * operators can all be used, and parentheses can be added to specify the order of operations if necessary.
Use calc() to calculate the width of a div element:
#div1 {
position: absolute;
left: 50px;
width: calc(100% - 100px);
border: 1px solid black;
background-color: yellow;
padding: 5px;
text-align: center;
}
Use calc() to determine the position of a background-image:
background-position: calc(50% + 17px) calc(50% + 10px), 50% 50%;
Use calc() to determine the height of an element:
height: calc(100% - 20px);
attr() function
Returns the value of an attribute of the selected element.
Below is a blockquote element that contains a character inside a data-* attribute which CSS can use (e.g. inside the ::before and ::after pseudo-element) using this function.
<blockquote data-mark='"'></blockquote>
In the following CSS block, the character is appended before and after the text inside the element:
blockquote[data-mark]::before,
blockquote[data-mark]::after {
content: attr(data-mark);
}
var() function
The var() function allows CSS variables to be accessed.
/* set a variable */
:root {--primary-color: blue;
}
/* access variable */
selector {
color: var(--primary-color);
}
This feature is currently under development. Check caniuse.com for the latest browser support.
radial-gradient() function
Creates an image representing a gradient of colors radiating from the center of the gradient radial-gradient(red, orange, yellow) /*A gradient coming out from the middle of the gradient, red at the center, then orange, until it is finally yellow at the edges*/
linear-gradient() function
Creates an image representing a linear gradient of colors.
linear-gradient( 0deg, red, yellow 50%, blue);
This creates a gradient going from bottom to top, with colors starting at red, then yellow at 50%, and finishing in blue.
ATutorialHub Related Guide
Comments (9)
User Comments

panduranga gupta
2021-07-05 07:03:13good website for learning and help me a lot

raju
2021-09-25 14:58:47The awsome website i am looking like for a long time, good work atutorialhub team keep doing

Shivani
2021-09-01 15:03:56Learning a lot from the courses present on atutorialhub. The courses are very well explained. Great experience

Harshitha
2021-09-10 15:05:45It is very helpful to students and easy to learn the concepts

Sowmya
2021-09-14 15:06:41Great job Tutorials are easy to understand Please make use of it

Zain Khan
2021-09-18 15:07:23Great content and customized courses.

Rudrakshi Bhatt
2021-09-09 15:08:10Well structured coursed and explained really well!

Pavana Somashekar
2021-09-11 15:09:08Good platform for beginners and learn a lot on this website

Sax
2021-09-25 19:35:50Nice website
Leave a Comment