Skip to content

Commit

Permalink
Re-do of the functions page (#2854)
Browse files Browse the repository at this point in the history
  • Loading branch information
@rachelandrew
rachelandrew authored Mar 4, 2021
1 parent 6c7d626 commit 5aa71dc
Showing 1 changed file with 222 additions and 2 deletions.
224 changes: 222 additions & 2 deletions files/en-us/web/css/css_functions/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,9 +25,229 @@ <h2 id="Syntax">Syntax</h2>

<p>Functions can take multiple arguments, which are formatted similarly to CSS property values. Whitespace is allowed, but they are optional inside the parentheses. In some functional notations multiple arguments are separated by commas, while others use spaces.</p>

<h2 id="Transform_functions">Transform functions</h2>

<p>These functions are used when the {{cssxref("&lt;transform-function&gt;")}} CSS <a href="/en-US/docs/Web/CSS/CSS_Types">data type</a> is used as a value of {{cssxref("transform")}}.</p>

<dl>
<dt>{{cssxref("transform-function/matrix()", "matrix()")}}</dt>
<dd>Describes a homogeneous 2D transformation matrix.</dd>
<dt>{{cssxref("transform-function/matrix3d()", "matrix3d()")}}</dt>
<dd>Describes a 3D transformation as a 4×4 homogeneous matrix.</dd>
<dt>{{cssxref("transform-function/perspective()", "perspective()")}}</dt>
<dd>Sets the distance between the user and the z=0 plane.</dd>
<dt>{{cssxref("transform-function/rotate()", "rotate()")}}</dt>
<dd>Rotates an element around a fixed point on the 2D plane.</dd>
<dt>{{cssxref("transform-function/rotate3d()", "rotate3d()")}}</dt>
<dd>Rotates an element around a fixed axis in 3D space.</dd>
<dt>{{cssxref("transform-function/rotateX", "rotateX()")}}</dt>
<dd>Rotates an element around the horizontal axis.</dd>
<dt>{{cssxref("transform-function/rotateY()", "rotateY()")}}</dt>
<dd>Rotates an element around the vertical axis.</dd>
<dt>{{cssxref("transform-function/rotateZ()", "rotateZ()")}}</dt>
<dd>Rotates an element around the z-axis.</dd>
<dt>{{cssxref("transform-function/scale()", "scale()")}}</dt>
<dd>Scales an element up or down on the 2D plane.</dd>
<dt>{{cssxref("transform-function/scale3d()", "scale3d()")}}</dt>
<dd>Scales an element up or down in 3D space.</dd>
<dt>{{cssxref("transform-function/scaleX()", "scaleX()")}}</dt>
<dd>Scales an element up or down horizontally.</dd>
<dt>{{cssxref("transform-function/scaleY()", "scaleY()")}}</dt>
<dd>Scales an element up or down vertically.</dd>
<dt>{{cssxref("transform-function/scaleZ()", "scaleZ()")}}</dt>
<dd>Scales an element up or down along the z-axis.</dd>
<dt>{{cssxref("transform-function/skew()", "skew()")}}</dt>
<dd>Skews an element on the 2D plane.</dd>
<dt>{{cssxref("transform-function/skewX()", "skewX()")}}</dt>
<dd>Skews an element in the horizontal direction.</dd>
<dt>{{cssxref("transform-function/skewY()", "skewY()")}}</dt>
<dd>Skews an element in the vertical direction.</dd>
<dt>{{cssxref("transform-function/translate()", "translate()")}}</dt>
<dd>Translates an element on the 2D plane.</dd>
<dt>{{cssxref("transform-function/translate3d()", "translate3d()")}}</dt>
<dd>Translates an element in 3D space.</dd>
<dt>{{cssxref("transform-function/translateX", "translateX()")}}</dt>
<dd>Translates an element horizontally.</dd>
<dt>{{cssxref("transform-function/translateY()", "translateY()")}}</dt>
<dd>Translates an element vertically.</dd>
<dt>{{cssxref("transform-function/translateZ()", "translateZ()")}}</dt>
<dd>Translates an element along the z-axis.</dd>
</dl>

<h2 id="Math_functions">Math functions</h2>

<p>The math functions allow CSS numeric values to be written as mathematical expressions.</p>

<dl>
<dt>{{cssxref("calc")}}</dt>
<dd>A math function that allows basic arithmetic to be performed on numerical CSS values.</dd>
<dt>{{cssxref("clamp")}}</dt>
<dd>A comparison function that takes a minimum, central, and maximum value and represents its central calculation.</dd>
<dt>{{cssxref("max")}}</dt>
<dd>A comparison function that represents the largest of a list of values.</dd>
<dt>{{cssxref("min")}}</dt>
<dd>A comparison function that represents the smallest of a list of values.</dd>
<dt>{{cssxref("abs","abs()")}} {{Experimental_Inline}}</dt>
<dd>Takes a calculation and returns the absolute value.</dd>
<dt>{{cssxref("acos","acos()")}} {{Experimental_Inline}}</dt>
<dd>An inverse trigonometric function the angle returned must be normalized to the range [0deg, 180deg];.</dd>
<dt>{{cssxref("asin","asin()")}} {{Experimental_Inline}}</dt>
<dd>An inverse trigonometric function the angle returned must be normalized to the range [-90deg, 90deg].</dd>
<dt>{{cssxref("atan","atan()")}} {{Experimental_Inline}}</dt>
<dd>An inverse trigonometric function the angle returned must be normalized to the range [-90deg, 90deg].</dd>
<dt>{{cssxref("atan2","atan2()")}} {{Experimental_Inline}}</dt>
<dd>Contains two comma-separated calculations, A and B. A and B can resolve to any {{cssxref("&lt;number&gt;")}}, {{cssxref("&lt;dimension&gt;")}}, or {{cssxref("&lt;percentage&gt;")}}, but must have the same type, or else the function is invalid.</dd>
<dt>{{cssxref("cos","cos()")}} {{Experimental_Inline}}</dt>
<dd>Contains a single calculation which must resolve to either a {{cssxref("&lt;number&gt;")}} or an {{cssxref("&lt;angle&gt;")}}.</dd>
<dt>{{cssxref("exp","exp()")}} {{Experimental_Inline}}</dt>
<dd>Contains one calculation which must resolve to a {{cssxref("&lt;number&gt;")}}, and returns the same value as pow(e, A) as a {{cssxref("&lt;number&gt;")}}.</dd>
<dt>{{cssxref("hypot","hypot()")}} {{Experimental_Inline}}</dt>
<dd>Contains one or more comma-separated calculations, and returns the length of an N-dimensional vector with components equal to each of the calculations. </dd>
<dt>{{cssxref("log","log()")}} {{Experimental_Inline}}</dt>
<dd>Contains one or two calculations (representing the value to be logarithmed, and the base of the logarithm, defaulting to e), which must both resolve as a {{cssxref("&lt;number&gt;")}}, and returns the logarithm base B of the value A, as a {{cssxref("&lt;number&gt;")}}.</dd>
<dt>{{cssxref("mod","mod()")}} {{Experimental_Inline}}</dt>
<dd>A modulus function that contains two calculations A and B, and returns the difference between A and the nearest integer multiple of B either above or below A.</dd>
<dt>{{cssxref("pow","pow()")}} {{Experimental_Inline}}</dt>
<dd>Contains two comma-separated calculations A and B, both of which must resolve as a {{cssxref("&lt;number&gt;")}}, and returns the result of raising A to the power of B, returning the value as a {{cssxref("&lt;number&gt;")}}.</dd>
<dt>{{cssxref("rem","rem()")}} {{Experimental_Inline}}</dt>
<dd>A modulus function that contains two calculations A and B, and returns the difference between A and the nearest integer multiple of B either above or below A.</dd>
<dt>{{cssxref("round","round()")}} {{Experimental_Inline}}</dt>
<dd>Contains an optional rounding strategy, and two calculations A and B, and returns the value of A, rounded according to the rounding strategy, to the nearest integer multiple of B either above or below A. </dd>
<dt>{{cssxref("sign","sign()")}} {{Experimental_Inline}}</dt>
<dd>Takes a calculation and returns -1 if the numeric value is negative,
+1 if the numeric value is positive, 0⁺ if the numeric value is 0⁺, and 0⁻ if the numeric value is 0⁻.</dd>
<dt>{{cssxref("sin","sin()")}} {{Experimental_Inline}}</dt>
<dd>Contains a single calculation which must resolve to either a {{cssxref("&lt;number&gt;")}} or an {{cssxref("&lt;angle&gt;")}}.</dd>
<dt>{{cssxref("sqrt","sqrt()")}} {{Experimental_Inline}}</dt>
<dd>Contains a single calculation which must resolve to a {{cssxref("&lt;number&gt;")}}, and returns the square root of the value as a {{cssxref("&lt;number&gt;")}}.</dd>
<dt>{{cssxref("tan","tan()")}} {{Experimental_Inline}}</dt>
<dd>Contains a single calculation which must resolve to either a {{cssxref("&lt;number&gt;")}} or an {{cssxref("&lt;angle&gt;")}}.</dd>
</dl>

<h2 id="Filter_functions">Filter functions</h2>

<p>The <code><strong>&lt;filter-function&gt;</strong></code> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/CSS_Types">data type</a> represents a graphical effect that can change the appearance of an input image. It is used in the {{cssxref("filter")}} and {{cssxref("backdrop-filter")}} properties.</p>

<dl>
<dt>{{cssxref("filter-function/blur()", "blur()")}}</dt>
<dd>Blurs the image.</dd>
<dt>{{cssxref("filter-function/brightness()", "brightness()")}}</dt>
<dd>Makes the image brighter or darker.</dd>
<dt>{{cssxref("filter-function/contrast()", "contrast()")}}</dt>
<dd>Increases or decreases the image's contrast.</dd>
<dt>{{cssxref("filter-function/drop-shadow()", "drop-shadow()")}}</dt>
<dd>Applies a drop shadow behind the image.</dd>
<dt>{{cssxref("filter-function/grayscale()", "grayscale()")}}</dt>
<dd>Converts the image to grayscale.</dd>
<dt>{{cssxref("filter-function/hue-rotate()", "hue-rotate()")}}</dt>
<dd>Changes the overall hue of the image.</dd>
<dt>{{cssxref("filter-function/invert()", "invert()")}}</dt>
<dd>Inverts the colors of the image.</dd>
<dt>{{cssxref("filter-function/opacity()", "opacity()")}}</dt>
<dd>Makes the image transparent.</dd>
<dt>{{cssxref("filter-function/saturate()", "saturate()")}}</dt>
<dd>Super-saturates or desaturates the input image.</dd>
<dt>{{cssxref("filter-function/sepia()", "sepia()")}}</dt>
<dd>Converts the image to sepia.</dd>
</dl>

<h2 id="Color_functions">Color functions</h2>

<p>Functions which specify different color representations. THese may be used anywhere a {{cssxref("&lt;color_value&gt;","&lt;color&gt;")}} is valid.</p>

<dl>
<dt>{{cssxref("color()", "color()")}} {{Experimental_Inline}}</dt>
<dd>Allows a color to be specified in a particular, specified colorspace (rather than the implicit sRGB colorspace that most of the other color functions operate in). </dd>
<dt>{{cssxref("device-cmyk()", "device-cmyk()")}} {{Experimental_Inline}}</dt>
<dd>Used to express CMYK colors in a device-independent way.</dd>
<dt>{{cssxref("hsl()", "hsl()")}} </dt>
<dd>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.</dd>
<dt>{{cssxref("hsla()", "hsla()")}} </dt>
<dd>The HSL color model defines a given color according to its hue, saturation, and lightness components. The alpha component represents the color's transparency.</dd>
<dt>{{cssxref("hwb()", "hwb()")}} {{Experimental_Inline}}</dt>
<dd>HWB (short for Hue-Whiteness-Blackness) is another method of specifying colors, similar to HSL.</dd>
<dt>{{cssxref("lab()", "lab()")}} {{Experimental_Inline}}</dt>
<dd>Lab color is device-independent and specifies physical measurements of color.</dd>
<dt>{{cssxref("lch()", "lch()")}} {{Experimental_Inline}}</dt>
<dd>LCH color is device-independent and specifies color using polar coordinates for chroma and hue.</dd>
<dt>{{cssxref("rgb()", "rgb()")}} </dt>
<dd>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.</dd>
<dt>{{cssxref("rgba()", "rgba()")}} </dt>
<dd>The RGB color model defines a given color according to its red, green, and blue components. The alpha component represents the color's transparency.</dd>
</dl>

<h2 id="Image_functions">Image functions</h2>

<p>These functions may be used wherever an {{cssxref("&lt;image&gt;")}} is valid as the value for a property.</p>

<dl>
<dt>{{cssxref("conic-gradient()", "conic-gradient()")}} </dt>
<dd>Conic gradients transition colors progressively around a circle. </dd>
<dt>{{cssxref("image()", "image()")}} {{Experimental_Inline}}</dt>
<dd>Defines an {{cssxref("&lt;image&gt;")}} in a similar fashion to the {{cssxref("url")}} function, but with added functionality including specifying the image's directionality, specifying fallback images for when the preferred image is not supported</dd>
<dt>{{cssxref("image-set()", "image-set()")}} {{Experimental_Inline}}</dt>
<dd>A method of letting the browser pick the most appropriate CSS image from a given set, primarily for high pixel density screens.</dd>
<dt>{{cssxref("linear-gradient()", "linear-gradient()")}} </dt>
<dd>Linear gradients transition colors progressively along an imaginary line.</dd>
<dt>{{cssxref("radial-gradient()", "radial-gradient()")}} </dt>
<dd>Radial gradients transition colors progressively from a center point (origin).</dd>
<dt>{{cssxref("repeating-linear-gradient()", "repeating-linear-gradient()")}} </dt>
<dd>Is similar to <code>linear-gradient()</code> and takes the same arguments, but it repeats the color stops infinitely in all directions so as to cover its entire container.</dd>
<dt>{{cssxref("repeating-radial-gradient()", "repeating-radial-gradient()")}} </dt>
<dd>Is similar to <code>radial-gradient()</code> and takes the same arguments, but it repeats the color stops infinitely in all directions so as to cover its entire container.</dd>
<dt>{{cssxref("repeating-conic-gradient()", "repeating-conic-gradient()")}} </dt>
<dd>Is similar to <code>conic-gradient()</code> and takes the same arguments, but it repeats the color stops infinitely in all directions so as to cover its entire container.</dd>
</dl>

<h2 id="Counter_functions">Counter functions</h2>

<p>The counter functions are generally used with the {{cssxref("content")}} property, although in theory may be used wherever a {{cssxref("&lt;string&gt;")}} is supported.</p>

<dl>
<dt>{{cssxref("counter()", "counter()")}}</dt>
<dd>Returns a string representing the current value of the named counter, if there is one.</dd>
<dt>{{cssxref("counters()", "counters()")}}</dt>
<dd>Enables nested counters, returning a concatenated string representing the current values of the named counters, if there are any.</dd>
</dl>

<h2 id="Font_functions">Font functions</h2>

<p>The {{cssxref("font-variant-alternates")}} property controls the use of alternate glyphs, the following functions are values for this property.</p>

<dl>
<dt>{{cssxref("font-variant-alternates/stylistic()", "stylistic()")}}</dt>
<dd>This function enables stylistic alternates for individual characters. The parameter is a font-specific name mapped to a number. It corresponds to the OpenType value <code>salt</code>, like <code>salt 2</code>.</dd>
<dt>{{cssxref("font-variant-alternates/styleset()", "styleset()")}}</dt>
<dd>This function enables stylistic alternatives for sets of characters. The parameter is a font-specific name mapped to a number. It corresponds to the OpenType value <code>ssXY</code>, like <code>ss02</code>.</dd>
<dt>{{cssxref("font-variant-alternates/character-variant()", "character-variant()")}}</dt>
<dd>This function enables specific stylistic alternatives for characters. It is similar to <code>styleset()</code>, but doesn't create coherent glyphs for a set of characters; individual characters will have independent and not necessarily coherent styles. The parameter is a font-specific name mapped to a number. It corresponds to the OpenType value <code>cvXY</code>, like <code>cv02</code>.</dd>
<dt>{{cssxref("font-variant-alternates/swash()", "swash()")}}</dt>
<dd>This function enables <a href="https://en.wikipedia.org/wiki/Swash_%28typography%29">swash</a> glyphs. The parameter is a font-specific name mapped to a number. It corresponds to the OpenType values <code>swsh</code> and <code>cswh</code>, like <code>swsh 2</code> and <code>cswh 2</code>.</dd>
<dt>{{cssxref("font-variant-alternates/ornaments()", "ornaments()")}}</dt>
<dd>This function enables ornaments, like <a href="https://en.wikipedia.org/wiki/Fleuron_%28typography%29">fleurons</a> and other dingbat glyphs. The parameter is a font-specific name mapped to a number. It corresponds to the OpenType value <code>ornm</code>, like <code>ornm 2</code>.
</dd>
<dt>{{cssxref("font-variant-alternates/annotation()", "annotation()")}}</dt>
<dd>This function enables annotations, like circled digits or inverted characters. The parameter is a font-specific name mapped to a number. It corresponds to the OpenType value <code>nalt</code>, like <code>nalt 2</code>.</dd>
</dl>

<h2 id="Shape_functions">Shape functions</h2>

<p>The following functions may be used as values for the {{cssxref("&lt;basic-shape&gt;")}} data type, which is used in the {{cssxref("clip-path")}}, {{cssxref("offset-path")}}, and {{cssxref("shape-outside")}} properties.</p>

<dl>
<dt>{{cssxref("circle()")}}</dt>
<dd>Defines a circle.</dd>
<dt>{{cssxref("ellipse()")}}</dt>
<dd>Defines an ellipse.</dd>
<dt>{{cssxref("inset()")}}</dt>
<dd>Defines an inset rectangle.</dd>
<dt>{{cssxref("polygon()")}}</dt>
<dd>Defines a polygon.</dd>
</dl>

<h2 id="Index">Index</h2>

<p>Functional notation defined by a set of CSS specifications includes the following:</p>
<p>An A-Z reference of CSS functions defined across CSS specifications. Many functions can be used with a variety of CSS properties, for example the <a href="/en-US/docs/Web/CSS/calc()">calc()</a> function can be used anywhere you might use a {{cssxref("length")}}. Other functions are specfic to certain properties. Check the individual function pages for usage examples and explanations.</p>

<div class="index">

Expand Down Expand Up @@ -270,5 +490,5 @@ <h2 id="See_also">See also</h2>

<ul>
<li><a href="/en-US/docs/Web/CSS/CSS_Values_and_Units">CSS Values and Units</a></li>
<li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Values_and_units">Introduction to CSS: Values and Units </a></li>
<li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Introduction to CSS: Values and Units </a></li>
</ul>

0 comments on commit 5aa71dc

Please sign in to comment.