A Guide to CSS Functions

CSS Animation Functions
CSS Custom Properties
CSS Gradient Functions
CSS Transform Functions

Here I will explain how to utilize CSS functions that will help making web pages that much more impressive and easy to style consistently.

Animation Functions

The first function that I will explain here is the CSS animation function. It allows web page designers to create elements on a page that can change its properties over time using only CSS and HTML, like this little nodding friend here!

^u^

Pretty cool, huh? It takes a little bit of extra styling, and requires something called an at-rule, but once you have an idea of what properties to play with, you'll be making CSS animations in no time!
Below I will be breaking down the CSS elements and rules I've used to make our buddy.


                @keyframes
 nodding {

                    0% {
                        padding-top: 35px;
                    }

                    50% {
                        padding-top: 30px;
                    }

                    80% {
                        padding-top: 20px;
                    }

                    90% {
                        padding-top: 25px;
                    }

                    100% {
                        padding-top: 35px;
                    }

                }

The CSS above is the at-rule that I was talking about earlier. At-rules are basically used to tell the CSS of your page how to behave in ways that they are otherwise unable to using certain keywords. This particular at-rule, @keyframes, allows me to make a rule that tells whatever CSS element I use it in to change its properties over time, with each percentage marking what properties should be at certain points in the animation. In this case, I told it to increase and decrease the padding of an element over the course of the animation duration, which we will go over in a moment.
It should be noted that this particular at-rule type requires the rule to be named, and must be defined in the style sheet somewhere before the element it is meant to affect.


                #noddingFriend {

                    border: 2px solid purple;
                    border-radius: 25px;
                    padding-top: 20px;

                    margin-left: 4vw;

                    width: 60px;

                    height: 60px;

                    color: papayawhip;

                    font-size: 18pt;

                    text-align: center;

                    background-image: radial-gradient(blue, navy);

                    animation-name: nodding;

                    animation-duration: .5s;

                    animation-fill-mode: forwards;

                    animation-iteration-count: infinite;

                }

This bit of CSS is what makes up our agreeable little buddy. Most of it just determines what it looks like by default, but the properties that have been highlighted in red tell it to change properties over time. The animation-name property tells it what changes it should make, based on the at-rule that we created earlier. The animation-fill-mode tells the animation what to do when it is not playing. If the animation were to stop playing, it would end with the property values that are defined at the end of the at-rule due to the forward value. Since the animation-iteration-count has the value of infinite however, the animation will never stop looping, as this determines how many times the animation will play before it ends.
Now all that's left to do is make your little friend in HTML!

<div id="noddingFriend">

                ^u^

                </div>

Custom Property Functions

This is an almost universally helpful function when it comes to easy and consistent styling in CSS. To put it simply, custom property functions allow a web designer to store property values as variables. They are relatively simple to use and can even be updated using JavaScript, though that won't be demonstrated here.

--stored-variable-border = 2px solid red;

                --stored-variable-text-color = purple;

                --stored-variable-width = 2%;

This is how you write and store a custom property. All that must be done to store it is to precede whatever variable name you might like to use (outside of reserved keywords) with two dashes. To call this property elsewhere is only slightly more complex.


                .newclass {

                    border: var(--stored-variable-border);

                    color: var(--stored-variable-text-color);

                    width: var(-stored-variable-width);

                    height: var(--stored-variable-width);

                }

To call a stored custom CSS property, all that must be done is replace the value that you want to put in place with the var() function and fill the parameter of this function with the variable's name. Be certain to include the preceeding dashes here as well! This is how the style sheet recognizes the custom property as a custom property.

Calculation Function

The calculation function in CSS is rather helpful in sizing elements accurately, as it can be used to create a property value relative to other CSS elements' properties, or other values that are difficult to define without calculation. Operators that can be used in this function are +, -, *, and /.


                    #container {

                        width: 80vw;

                        height: 100vh;

                    }


                    #container div {

                        border: 2px solid black;

                        width: calc(50% / 2);

                        height: calc(33vh - 5%);

                    }

Gradient Functions

Gradient functions in CSS are a little peculiar, in that they can only be used with the background-image property of elements

Griffin Greimes