Understanding
CSS FUNCTIONS
@TAWAKALITU OMOLOJA
WHAT ARE CSS FUNCTIONS?
Similar to programming languages,
functions in CSS are reusable pieces of
code which performs specific tasks.
Functions
Functions are passed "arguments"
between parentheses (), which is used by
function in a specific way.
Note
Unlike other programming languages,
CSS does not give us room to create our
own functions. Instead the language
comes with a list of already made
Functions that will help us solve the most
common styling problems.
1
EXAMPLE
Color: rgb (225, 225, 0)
In the above example, the value of color is
the function rgb(), which accepts
arguments in the form of numbers.
It processes those numbers to calculate the
rgb color, corresponding to the three values
given.
2
CSS FUNCTIONS AND DESCRIPTION
Colors Functions
rgb(): It is used to define the colors using
Red-Green-Blue (RGB) model
rgba(): It is used to define the colors using
Red-Green-Blue-Alfa (RGBA) model
It is used to define the colors using
hsl():
Hue-Saturation-Lightness (HSL) model
hsla(): It is used to define the colors using
Hue-Saturation-Lightness-Alpha
(HSLA) model
3
CSS FUNCTIONS AND DESCRIPTION
Filter Functions
brightness(): Apply a filter to set the
brightness of the image.
blur(): Apply a blurred effect
filter on the image.
rgba():
Apply a filter to set the
Contrast():
contrast of the image.
Contrast():
Opacity(): Apply a filter to the image,
to set the transparency of
the image.
4
CSS FUNCTIONS AND DESCRIPTION
Filter Functions
Apply a filter to set the
greyscale():
greyscale of the image.
It is used to super saturate or
saturate():
desaturate the input image.
rgba():
Apply a filter to the image
hue-rotate():
to set the hue rotation of
the image.
Invert(): Sets the invert of the color
of the sample image.
5
CSS FUNCTIONS AND DESCRIPTION
Image Functions
It specifies the image direction,
image(): and fallback image for when the
preferred image is not
supported.
It picks the appropriate CSS
image-set():
image from a given set,
rgba():
primarily for high pixel
density screens.
cross-fade(): Blends two or more
images at a defined
transparency.
Defines an <image> value
element():
generated from an arbitrary
HTML element.
6
CSS FUNCTIONS AND DESCRIPTION
Shape Functions
circle(): Defines a circle shape.
polygon(): Defines a polygon shape.
rgba():
ellipse(): Defines an ellipse shape.
Accepts an SVG path string
Path():
to enable a shape to be
drawn.
7
CSS FUNCTIONS AND DESCRIPTION
Reference Functions
Returns the value of an
attr():
attribute of the selected
elements.
Inserts the value of a user
env():
agent-defined environment
variable into your CSS
url(): It is used to include a file.
var(): Inserts a value for custom
property.
8
REFERENCE
• GeeksforGeeks
• MDN web docs
• The Odins Project
url():
var():
9
THANK YOU
FOR READING
@TAWAKALITU OMOLOJA
