Scribd
Upload
6 views

Css functions (1)

CSS functions are predefined reusable code snippets that perform specific tasks, such as color definitions and image filters. They accept arguments within parentheses and help solve common styling problems without allowing users to create custom functions. The document outlines various CSS functions, including color, filter, image, shape, and reference functions.

Uploaded by

harunatawa111
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
6 views

Css functions (1)

CSS functions are predefined reusable code snippets that perform specific tasks, such as color definitions and image filters. They accept arguments within parentheses and help solve common styling problems without allowing users to create custom functions. The document outlines various CSS functions, including color, filter, image, shape, and reference functions.

Uploaded by

harunatawa111
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 11

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

You might also like