CSS Functions

Cascading Style Sheets (CSS) functions play a crucial role in web development, providing a wide range of tools to enhance the styling and presentation of HTML elements. In this comprehensive guide, we will explore various CSS functions categorized based on their functionalities.

Transform Functions

• translateX(), translateY(), translateZ(): Move elements horizontally, vertically, or along the z-axis.

• translate(): Move elements on the 2D plane.

• translate3d(): Move elements in 3D space.

• rotateX(), rotateY(), rotateZ(): Rotate elements around different axes.

• rotate(): Rotate elements around a fixed point on the 2D plane.

• rotate3d(): Rotate elements around a fixed axis in 3D space.

• scaleX(), scaleY(), scaleZ(): Scale elements horizontally, vertically, or along the z-axis.

• scale(): Scale elements on the 2D plane.

• scale3d(): Scale elements in 3D space.

• skewX(), skewY(): Skew elements in the horizontal or vertical direction.

• skew(): Skew elements on the 2D plane.

• matrix(): Describes a homogeneous 2D transformation matrix.

• matrix3d(): Describes a 3D transformation as a 4×4 homogeneous matrix.

• perspective(): Sets the distance between the user and the z=0 plane.

Math Functions

• calc(): Performs basic arithmetic calculations on numerical values.

• min(): Calculates the smallest value from a list.

• max(): Calculates the largest value from a list.

• clamp(): Calculates a value within a specified range.

• round(): Rounds a number based on a rounding strategy.

• mod(): Calculates a modulus (with the same sign as the divisor).

• rem(): Calculates a remainder (with the same sign as the dividend).

• sin(), cos(), tan(), asin(), acos(), atan(), atan2(): Trigonometric functions.

• pow(), sqrt(), hypot(), log(), exp(): Exponential functions.

• abs(), sign(): Sign-related functions.

Filter Functions

• blur(), brightness(), contrast(), drop-shadow(), grayscale(), hue-rotate(), invert(), opacity(), saturate(), sepia(): Apply graphical effects to images.

Color Functions

• rgb(), hsl(), hwb(), lch(), oklch(), lab(), oklab(), color(), color-mix(), color-contrast(), device-cmyk(), light-dark(): Define and manipulate colors.

Image Functions

• linear-gradient(), radial-gradient(), conic-gradient(), repeating-linear-gradient(), repeating-radial-gradient(), repeating-conic-gradient(): Create gradient backgrounds.

• image(), image-set(), cross-fade(), element(), paint(): Define and manipulate images.

Counter Functions

• counter(), counters(), symbols(): Work with counters for numbering elements.

Shape Functions

• circle(), ellipse(), inset(), rect(), xywh(), polygon(), path(): Define shapes used in properties like clip-path and shape-outside.

Reference Functions

• attr(), env(), url(), var(): Reference values from attributes, environment variables, URLs, and custom properties.

Grid Functions

• fit-content(), minmax(), repeat(): Define CSS Grid properties.

Font Functions

• stylistic(), styleset(), character-variant(), swash(), ornaments(), annotation(): Control the use of alternate glyphs in fonts.

Easing Functions

• linear(), cubic-bezier(), steps(): Define easing for transitions and animations.

Animation Functions

• scroll(), view(): Set animation-timeline for scroll and view progress.

This overview should help you understand the different CSS functions across various categories. If you have specific questions about any function or category, feel free to ask!