References

Functions

CSS Functional Notation is a type of CSS value that can represent more complex data types or invoke special data processing or calculations.

Reference functions

The following functions are used as a value of properties to reference a value defined elsewhere.

functiondescription
attr()

Used to retrieve the value of an attribute of the selected element and use it in the stylesheet.

Can I use ?Can I use ?
env()

Used to insert the value of a user agent-defined environment variable.

Can I use ?Can I use ?
url()

Used to include a file.

Can I use ?Can I use ?
var()

Used to insert a value of a custom property instead of any part of a value of another property.

Can I use ?Can I use ?

env()

The env() can be used to insert the value of a user agent-defined environment variable into your CSS, in a similar fashion to the var() function and custom properties.

functiondescription
env(safe-area-inset-top)

The top insets from the edge of the viewport.

env(safe-area-inset-bottom)

The bottom insets from the edge of the viewport.

env(safe-area-inset-left)

The left insets from the edge of the viewport.

env(safe-area-inset-right)

The right insets from the edge of the viewport.



<div class="pt:calc(env(safe-area-inset-top)+0.5rem)">...</div>

var()

Define your variables in CSS file or <style>, access the variable via $(var).

:root {
    --demo-skew: skewX(30deg);
}
<img class="transform:$(demo-skew)"></img>

Transform functions

Master document of transform function: Transform.

functiondescription
translate(x,y)

Translates an element horizontally.

Can I use ?Can I use ?
translate3d(x,y,z)

Translates an element in 3D space.

Can I use ?Can I use ?
translateX(x)

Translates an element horizontally.

Can I use ?Can I use ?
translateY(y)

Translates an element vertically.

Can I use ?Can I use ?
translateZ(z)

Translates an element along the z-axis.

Can I use ?Can I use ?
scale(x,y)

Scales an element up or down on the 2D plane.

Can I use ?Can I use ?
scale3d(x,y,z)

Scales an element up or down in 3D space.

Can I use ?Can I use ?
scaleX(x)

Scales an element up or down horizontally.

Can I use ?Can I use ?
scaleY(y)

Scales an element up or down vertically.

Can I use ?Can I use ?
scaleZ(z)

Scales an element up or down along the z-axis.

Can I use ?Can I use ?
skew(x,y)

Skews an element on the 2D plane.

Can I use ?Can I use ?
skewX(x)

Skews an element in the horizontal direction.

Can I use ?Can I use ?
skewY(y)

Skews an element in the vertical direction.

Can I use ?Can I use ?
rotate(angle)

Rotates an element around a fixed point on the 2D plane.

Can I use ?Can I use ?
rotate3d(x,y,z,angle)

Rotates an element around a fixed axis in 3D space.

Can I use ?Can I use ?
rotateX(x)

Rotates an element around the horizontal axis.

Can I use ?Can I use ?
rotateY(y)

Rotates an element around the vertical axis.

Can I use ?Can I use ?
rotateZ(z)

Rotates an element around the z-axis.

Can I use ?Can I use ?
perspective()

Sets the distance between the user and the z=0 plane.

Can I use ?Can I use ?
matrix()

Describes a homogeneous 2D transformation matrix.

Can I use ?Can I use ?
matrix3d()

Describes a 3D transformation as a 4×4 homogeneous matrix.

Can I use ?Can I use ?

Math functions

The math functions allow CSS numeric values to be written as mathematical expressions.

functiondescription
calc()

A math function that allows basic arithmetic to be performed on numerical CSS values.

Can I use ?Can I use ?
clamp()

A comparison function that takes a minimum, central, and maximum value and represents its central calculation.

Can I use ?Can I use ?
max()

A comparison function that represents the largest of a list of values.

Can I use ?Can I use ?
min()

A comparison function that represents the smallest of a list of values.

Can I use ?Can I use ?

Filter functions

Master document of filter function: Filter, Backdrop Filter.

functiondescription
blur()

Blurs the image.

Can I use ?Can I use ?
brightness()

Makes the image brighter or darker.

Can I use ?Can I use ?
contrast()

Increases or decreases the image's contrast.

Can I use ?Can I use ?
drop-shadow()

Applies a drop shadow behind the image.

Can I use ?Can I use ?
grayscale()

Converts the image to grayscale.

Can I use ?Can I use ?
hue-rotate()

Changes the overall hue of the image.

Can I use ?Can I use ?
invert()

Inverts the colors of the image.

Can I use ?Can I use ?
opacity()

Makes the image transparent.

Can I use ?Can I use ?
saturate()

Super-saturates or desaturates the input image.

Can I use ?Can I use ?
sepia()

Converts the image to sepia.

Can I use ?Can I use ?
backdrop-filter: filter-function

The backdrop-filter CSS property lets you apply graphical effects such as blurring or color shifting to the area behind an element.

Can I use ?Can I use ?

Color functions

Master includes out-of-the-box color palette consisting of several common colors: Colors.

functiondescription
rgb()

The RGB color model defines a given color according to its red, green, and blue components. An optional alpha component represents the color's transparency.

Can I use ?Can I use ?
rgba()

The RGB color model defines a given color according to its red, green, and blue components. The alpha component represents the color's transparency.

Can I use ?Can I use ?
hsl()

The HSL color model defines a given color according to its hue, saturation, and lightness components. An optional alpha component represents the color's transparency.

Can I use ?Can I use ?
hsla()

The HSL color model defines a given color according to its hue, saturation, and lightness components. The alpha component represents the color's transparency.

Can I use ?Can I use ?

Image functions

Master document of Image function: Background Image, List Style Image.

functiondescription
url()

Defines an in a similar fashion to the url() function.

Can I use ?Can I use ?
linear-gradient()

Linear gradients transition colors progressively along an imaginary line.

Can I use ?Can I use ?
radial-gradient()

Radial gradients transition colors progressively from a center point (origin).

Can I use ?Can I use ?
repeating-linear-gradient()

It repeats the linear-gradient color stops infinitely in all directions so as to cover its entire container.

Can I use ?Can I use ?
repeating-radial-gradient()

It repeats the radial-gradient color stops infinitely in all directions so as to cover its entire container.

Can I use ?Can I use ?
conic-gradient()

Conic gradients transition colors progressively around a circle.

Can I use ?Can I use ?
background-image: image-function

Defines a background image.

Can I use ?Can I use ?
list-style-image: image-function

Defines a list marker.

Can I use ?Can I use ?

Counter functions

The counter functions are generally used with the content property.

functiondescription
counter()

Returns a string representing the current value of the named counter, if there is one.

Can I use ?Can I use ?
counters()

Enables nested counters, returning a concatenated string representing the current values of the named counters, if there are any.

Can I use ?Can I use ?

Shape functions

Master document of shape function: Clip Path, Shape Outside.

functiondescription
circle()

Defines a circle.

Can I use ?Can I use ?
ellipse()

Defines an ellipse.

Can I use ?Can I use ?
inset()

Defines an inset rectangle.

Can I use ?Can I use ?
polygon()

Defines a polygon.

Can I use ?Can I use ?
path()

Accepts an SVG path string to enable a shape to be drawn.

Can I use ?Can I use ?
shape-outside: shape-function

The shape-outside CSS property defines a shape—which may be non-rectangular—around which adjacent inline content should wrap.

Can I use ?Can I use ?
clip-path: shape-function

The clip-path CSS property creates a clipping region that sets what part of an element should be shown. Parts that are inside the region are shown, while those outside are hidden.

Can I use ?Can I use ?

Grid functions

Master document of grid function: Grid.


© Aoyue Design LLC.
關於此頁的問題
編輯自AronLola