recursal/MDN huggingface dataset:
skewY()
=======

 The **`skewY()`** CSS function defines a transformation that skews an element in the vertical
 direction on the 2D plane. Its result is a `<transform-function>` data type.

Try it
------

 This transformation is a shear mapping (transvection) that distorts
 each point within an element by a certain angle in the vertical direction. The ordinate (vertical, y-coordinate) of each point is
 modified by a value proportionate to the specified angle and the distance to the origin; thus, the farther from the
 origin a point is, the greater will be the value added it.

Syntax
------


```css
skewY(a)
```

### Values

`a`

Is an `<angle>` representing the angle to use to distort the element along the ordinate (vertical, y-coordinate).



| Cartesian coordinates on ℝ^2 | Homogeneous coordinates on ℝℙ^2 | Cartesian coordinates on ℝ^3 | Homogeneous coordinates on ℝℙ^3 |
| --- | --- | --- | --- |
| 

(

1

0

tan
(
a
)

1

)

 | 

(

1

0

0

tan
(
a
)

1

0

0

0

1

)

 | 

(

1

0

0

tan
(
a
)

1

0

0

0

1

)

 | 

(

1

0

0

0

tan
(
a
)

1

0

0

0

0

1

0

0

0

0

1

)

 |
| `[1 tan(a) 0 1 0 0]` |

Examples
--------

### HTML


```html
<div>Normal</div>
<div class="skewed">Skewed</div>
```

### CSS


```css
div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.skewed {
  transform: skewY(40deg);
  background-color: pink;
}
```

### Result

Specifications
--------------

| Specification |
| --- |
| CSS Transforms Module Level 1 # funcdef-transform-skewy |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `transform`
* `<transform-function>`
* Individual transform properties:
    + `translate`
    + `scale`
    + `rotate`
    + Note: there is no `skew` property
scaleX()
========

 The **`scaleX()`** CSS function defines a transformation that resizes an element along the
 x-axis (horizontally). Its result is a `<transform-function>` data type.

Try it
------

 It modifies the abscissa (horizontal, x-coordinate) of each element point by a constant factor, except when the scale factor is 1, in which case
 the function is the identity transform. The scaling is not isotropic, and the angles of the element are generally not conserved, except for multiples of 90 degrees.
 `scaleX(-1)` defines an axial symmetry, with a vertical axis passing through the origin (as specified by the `transform-origin`
 property).


**Note:** `scaleX(sx)` is equivalent to
 `scale(sx, 1)` or
 `scale3d(sx, 1, 1)`.


Syntax
------


```css
scaleX(s)
```

### Values

`s`

 Is a `<number>` representing the scaling factor to apply on the abscissa (horizontal, x-coordinate) of each point of the
 element.




| Cartesian coordinates on ℝ^2 | Homogeneous coordinates on ℝℙ^2 | Cartesian coordinates on ℝ^3 | Homogeneous coordinates on ℝℙ^3 |
| --- | --- | --- | --- |
| 

(

s

0

0

1

)

 | 

(

s

0

0

0

1

0

0

0

1

)

 | 

(

s

0

0

0

1

0

0

0

1

)

 | 

(

s

0

0

0

0

1

0

0

0

0

1

0

0

0

0

1

)

 |
| `[s 0 0 1 0 0]` |

Examples
--------

### HTML


```html
<div>Normal</div>
<div class="scaled">Scaled</div>
```

### CSS


```css
div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.scaled {
  transform: scaleX(0.6);
  background-color: pink;
}
```

### Result

Specifications
--------------

| Specification |
| --- |
| CSS Transforms Module Level 1 # funcdef-transform-scalex |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `scaleY()`
* `scaleZ()`
* `transform`
* `scale`
* `<transform-function>`
* `transform-origin`
* Other individual transform properties:
    + `translate`
    + `rotate`
    + Note: there is no `skew` property
skewX()
=======

 The **`skewX()`** CSS function defines a transformation that skews an element in the
 horizontal direction on the 2D plane. Its result is a `<transform-function>` data type.

Try it
------

 This transformation is a shear mapping (transvection) that distorts
 each point within an element by a certain angle in the horizontal direction. The abscissa (horizontal, x-coordinate) of each point is
 modified by a value proportionate to the specified angle and the distance to the origin; thus, the farther from the
 origin a point is, the greater will be the value added it.


**Note:** `skewX(a)` is equivalent to
 `skew(a)`.


Syntax
------


```css
skewX(a)
```

### Values

`a`

Is an `<angle>` representing the angle to use to distort the element along the abscissa (horizontal, x-coordinate).



| Cartesian coordinates on ℝ^2 | Homogeneous coordinates on ℝℙ^2 | Cartesian coordinates on ℝ^3 | Homogeneous coordinates on ℝℙ^3 |
| --- | --- | --- | --- |
| 

(

1

tan
(
a
)

0

1

)

 | 

(

1

tan
(
a
)

0

0

1

0

0

0

1

)

 | 

(

1

tan
(
a
)

0

0

1

0

0

0

1

)

 | 

(

1

tan
(
a
)

0

0

0

1

0

0

0

0

1

0

0

0

0

1

)

 |
| `[1 0 tan(a) 1 0 0]` |

Examples
--------

### HTML


```html
<div>Normal</div>
<div class="skewed">Skewed</div>
```

### CSS


```css
div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.skewed {
  transform: skewX(10deg); /\* Equal to skew(10deg) \*/
  background-color: pink;
}
```

### Result

Specifications
--------------

| Specification |
| --- |
| CSS Transforms Module Level 1 # funcdef-transform-skewx |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `transform`
* `<transform-function>`
* Individual transform properties:
    + `translate`
    + `scale`
    + `rotate`
    + Note: there is no `skew` property
rotateZ()
=========

 The **`rotateZ()`** CSS function defines a transformation that rotates an element around the
 z-axis without deforming it. Its result is a `<transform-function>` data type.

Try it
------

The axis of rotation passes through an origin, defined by the `transform-origin` CSS property.

**Note:** `rotateZ(a)` is equivalent to
 `rotate(a)` or
 `rotate3d(0, 0, 1, a)`.



**Note:** Unlike rotations in the 2D plane, the composition of 3D rotations is usually
 not commutative. In other words, the order in which the rotations are applied impacts the result.


Syntax
------

 The amount of rotation created by `rotateZ()` is specified by an `<angle>`. If
 positive, the movement will be clockwise; if negative, it will be counter-clockwise.


```css
rotateZ(a)
```

### Values

`a`

 Is an `<angle>` representing the angle of the rotation. A positive angle denotes a clockwise
 rotation, a negative angle a counter-clockwise one.




| Cartesian coordinates on ℝ^2 | Homogeneous coordinates on ℝℙ^2 | Cartesian coordinates on ℝ^3 | Homogeneous coordinates on ℝℙ^3 |
| --- | --- | --- | --- |
| 
 This transformation applies to the 3D space and can't be represented on
 the plane.
  | 

(

cos
(
a
)

-
sin
(
a
)

0

sin
(
a
)

cos
(
a
)

0

0

0

1

)

 | 

(

cos
(
a
)

-
sin
(
a
)

0

0

sin
(
a
)

cos
(
a
)

0

0

0

0

1

0

0

0

0

1

)

 |

Examples
--------

### HTML


```html
<div>Normal</div>
<div class="rotated">Rotated</div>
```

### CSS


```css
div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.rotated {
  transform: rotateZ(45deg);
  background-color: pink;
}
```

### Result

Specifications
--------------

| Specification |
| --- |
| CSS Transforms Module Level 2 # funcdef-rotatez |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `transform` property
* `rotate` property
* `<transform-function>`
scaleY()
========

 The **`scaleY()`** CSS function defines a transformation that resizes an element along the
 y-axis (vertically). Its result is a `<transform-function>` data type.

Try it
------

 It modifies the ordinate (vertical, y-coordinate) of each element point by a constant factor, except when the scale factor is 1, in which case
 the function is the identity transform. The scaling is not isotropic, and the angles of the element are not conserved.
 `scaleY(-1)` defines an axial symmetry, with a horizontal axis passing through the origin (as specified by the `transform-origin`
 property).


**Note:** `scaleY(sy)` is equivalent to
 `scale(1, sy)` or
 `scale3d(1, sy, 1)`.


`transform: rotateX(180deg);` === `transform: scaleY(-1);`

Syntax
------


```css
scaleY(s)
```

### Values

`s`

 Is a `<number>` representing the scaling factor to apply on the ordinate (vertical, y-coordinate) of each point of the
 element.




| Cartesian coordinates on ℝ^2 | Homogeneous coordinates on ℝℙ^2 | Cartesian coordinates on ℝ^3 | Homogeneous coordinates on ℝℙ^3 |
| --- | --- | --- | --- |
| 

(

1

0

0

s

)

 | 

(

1

0

0

0

s

0

0

0

1

)

 | 

(

1

0

0

0

s

0

0

0

1

)

 | 

(

1

0

0

0

0

s

0

0

0

0

1

0

0

0

0

1

)

 |
| `[1 0 0 s 0 0]` |

Examples
--------

### HTML


```html
<div>Normal</div>
<div class="scaled">Scaled</div>
```

### CSS


```css
div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.scaled {
  transform: scaleY(0.6);
  background-color: pink;
}
```

### Result

Specifications
--------------

| Specification |
| --- |
| CSS Transforms Module Level 1 # funcdef-transform-scaley |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `scaleX()`
* `scaleZ()`
* `transform`
* `<transform-function>`
* `transform-origin`
* Individual transform properties:
    + `translate`
    + `scale`
    + `rotate`
    + Note: there is no `skew` property
inherits
========

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
The **`inherits`** CSS descriptor is required when using the `@property` at-rule and controls whether the custom property registration specified by `@property` inherits by default.

Syntax
------


```css
@property --property-name {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0ffee;
}

@property --property-name {
  syntax: "<color>";
  inherits: true;
  initial-value: #c0ffee;
}
```

Values
------

`true`

The property inherits by default.

`false`

The property does not inherit by default.

Formal definition
-----------------

|  |  |
| --- | --- |
| Related at-rule | `@property` |
| Initial value | `auto` |
| Computed value | as specified |

Formal syntax
-------------
```

inherits =   
  true   |  
  false    
  
```

Examples
--------

Add type checking to `--my-color` `custom property`, as a color, a default value, and not allow it to inherit its value:

Using CSS `@property` at-rule:


```css
@property --my-color {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0ffee;
}
```


Using JavaScript `CSS.registerProperty()`:


```js
window.CSS.registerProperty({
  name: "--my-color",
  syntax: "<color>",
  inherits: false,
  initialValue: "#c0ffee",
});
```

Specifications
--------------

| Specification |
| --- |
| CSS Properties and Values API Level 1 # inherits-descriptor |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* CSS Properties and Values API
* CSS Painting API
* CSS Typed Object Model
* Houdini APIs
initial-value
=============

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
The **`initial-value`** CSS descriptor is required when using the `@property` at-rule unless the syntax accepts any valid token stream. It sets the initial-value for the property.

The value chosen as the `initial-value` must parse correctly according to the syntax definition. Therefore, if syntax is `<color>` then the initial-value must be a valid `color` value.

Syntax
------


```css
@property --property-name {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0ffee;
}

@property --property-name {
  syntax: "<color>";
  inherits: true;
  initial-value: #c0ffee;
}
```

Values
------

A string with a value which is a correct value for the chosen `syntax`.

Formal definition
-----------------

|  |  |
| --- | --- |
| Related at-rule | `@property` |
| Initial value | `n/a (required)` |
| Computed value | as specified |

Formal syntax
-------------
```

initial-value =   
  <declaration-value>?    
  
```

Examples
--------

Add type checking to `--my-color` `custom property`, as a color, the initial-value being a valid color:

Using CSS `@property` at-rule:


```css
@property --my-color {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0ffee;
}
```


Using JavaScript `CSS.registerProperty()`:


```js
window.CSS.registerProperty({
  name: "--my-color",
  syntax: "<color>",
  inherits: false,
  initialValue: "#c0ffee",
});
```

Specifications
--------------

| Specification |
| --- |
| CSS Properties and Values API Level 1 # initial-value-descriptor |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* CSS Properties and Values API
* CSS Painting API
* CSS Typed Object Model
* Houdini APIs
syntax
======

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
The **`syntax`** CSS descriptor is required when using the `@property` at-rule and describes the allowable syntax for the property.

Syntax
------

The following are all valid syntax strings:


```css
syntax: "<color>"; /\* accepts a color \*/

syntax: "<length> | <percentage>"; /\* accepts lengths or percentages but not calc expressions with a combination of the two \*/

syntax: "small | medium | large"; /\* accepts one of these values set as custom idents. \*/

syntax: "\*"; /\* any valid token \*/
```

Values
------

A string with a supported syntax as defined by the specification. Supported syntaxes are a subset of CSS types. These may be used along, or a number of types can be used in combination.

`"<length>"`

Any valid `<length>` values.

`"<number>"`

Any valid `<number>` values.

`"<percentage>"`

Any valid `<percentage>` values.

`"<length-percentage>"`

Any valid `<length-percentage>` values.

`"<color>"`

Any valid `<color>` values.

`"<image>"`

Any valid `<image>` values.

`"<url>"`

Any valid `url()` values.

`"<integer>"`

Any valid `<integer>` values.

`"<angle>"`

Any valid `<angle>` values.

`"<time>"`

Any valid `<time>` values.

`"<resolution>"`

Any valid `<resolution>` values.

`"<transform-function>"`

Any valid `<transform-function>` values.

`"<custom-ident>"`

Any valid `<custom-ident>` values.

`"<transform-list>"`

A list of valid `<transform-function>` values.

Formal definition
-----------------

|  |  |
| --- | --- |
| Related at-rule | `@property` |
| Initial value | `n/a (required)` |
| Computed value | as specified |

Formal syntax
-------------
```

syntax =   
  <string>    
  
```

Examples
--------

Add type checking to `--my-color` `custom property`, using the `<color>` syntax:

Using CSS `@property` at-rule:


```css
@property --my-color {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0ffee;
}
```


Using JavaScript `CSS.registerProperty()`:


```js
window.CSS.registerProperty({
  name: "--my-color",
  syntax: "<color>",
  inherits: false,
  initialValue: "#c0ffee",
});
```

Specifications
--------------

| Specification |
| --- |
| CSS Properties and Values API Level 1 # the-syntax-descriptor |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* CSS Properties and Values API
* CSS Painting API
* CSS Typed Object Model
* Houdini APIs
paint()
=======

The **`paint()`** CSS function defines an `<image>` value generated with a PaintWorklet.

Syntax
------


```css
paint(workletName, ...parameters)
```


where:

*workletName*

The name of the registered worklet.

*parameters*

Optional additional parameters to pass to the paintWorklet

Examples
--------

### Basic usage example

In JavaScript, we register the paint worklet:


```js
CSS.paintWorklet.addModule("boxbg.js");
```


...then, in the CSS, we define the `background-image` as a `paint()` type with the worklet name, `boxbg`, along with any variables (ex. `--boxColor` and `--widthSubtractor`) the worklet will use:


```css
li {
  background-image: paint(boxbg);
  --boxColor: hsl(55 90% 60% / 100%);
}
li:nth-of-type(3n) {
  --boxColor: hsl(155 90% 60% / 100%);
  --widthSubtractor: 20;
}
li:nth-of-type(3n + 1) {
  --boxColor: hsl(255 90% 60% / 100%);
  --widthSubtractor: 40;
}
```


The result will be the following:

### With additional parameters

You can pass additional arguments via the CSS paint() function. In this example, we passed two arguments: whether the background-image on a group of list items is filled or just has a stroke outline, and the width of that outline:
```

<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
  <li>item 5</li>
  <li>item 6</li>
  <li>item 7</li>
  <li>item 8</li>
  <li>item 9</li>
  <li>item 10</li>
  <li>item 11</li>
  <li>item 12</li>
  <li>item 13</li>
  <li>item 14</li>
  <li>item 15</li>
  <li>item 16</li>
  <li>item 17</li>
  <li>item 18</li>
  <li>item 19</li>
  <li>item 20</li>
</ul>
```


```
CSS.paintWorklet.addModule(
  "https://mdn.github.io/houdini-examples/cssPaint/intro/worklets/hilite.js",
);
```



```css
li {
  --boxColor: hsl(55 90% 60% / 100%);
  background-image: paint(hollowHighlights, stroke, 2px);
}

li:nth-of-type(3n) {
  --boxColor: hsl(155 90% 60% / 100%);
  background-image: paint(hollowHighlights, filled, 3px);
}

li:nth-of-type(3n + 1) {
  --boxColor: hsl(255 90% 60% / 100%);
  background-image: paint(hollowHighlights, stroke, 1px);
}
```


We've included a custom property in the selector block defining a boxColor. Custom properties are accessible to the PaintWorklet.

Specifications
--------------

| Specification |
| --- |
| CSS Painting API Level 1 # paint-notation |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `PaintWorkletGlobalScope`
* CSS Painting API
* Using the CSS Painting API
* `<image>`
* Canvas API
Handling overflow in multi-column layout
========================================

In this guide, we look at how to deal with overflow in a multi-column (*multicol*) layout, both inside the column boxes and in situations where there is more content than will fit into the container.

Overflow inside column boxes
----------------------------

An overflow situation happens when an item's size is larger than the column box. For example, the situation could happen when an image in a column is wider than the `column-width` value or the width of the column based on the number of columns declared with `column-count`.

In this situation, the content should visibly overflow into the next column, rather than be clipped by the column box.

There are two columns of text. In the left column, there is a photo that is wider than the column. The image expands into that second column, appearing behind the text of the right column. The flow of text in the right column isn't affected by the protruding photo, but the appearance is.

If you want an image to fit the column box, setting `max-width: 100%` will prevent the image from growing beyond its container, in this case, the column box.

More columns than will fit
--------------------------

How overflowing columns are handled depends on whether the media context is fragmented, such as print, or is continuous, such as a web page.

In fragmented media, after a fragment (for example, a page) is filled with columns, the columns will move to a new page and fill that up with columns. In continuous media, columns will overflow in the inline direction. On the web, this means that you will get a horizontal scrollbar.

The example below shows this overflow behavior. The multicol container has a set `height` and there is more text than space to create columns; therefore, we get columns created outside of the container.

Using vertical media queries
----------------------------

One issue with multicol on the web is that if the columns are taller than the viewport, the reader will need to scroll the page up and down to read, which is not a good user experience. One way to avoid this is to only apply the column properties if you know there is enough vertical space.

In the example below, we used a `min-height` @media query to ensure there is enough vertical space before applying the column properties.

Next steps
----------

In the final guide in this series, we will see how fragmentation works with multicol layouts to give us control over how content breaks between columns.
Styling columns
===============

As column boxes created inside multi-column (*multicol*) containers are anonymous boxes, styling individual columns is not possible, but we can style the gaps between the columns and the container in general. This guide explains how to change the gap and style rules between columns.

Column gaps
-----------

The gap between columns is controlled using the `column-gap` or `gap` property. The `column-gap` property is defined in the multi-column layout module. The `gap` property is defined in the box alignment module. This is a unified property to define gaps between boxes in all layouts that support gaps, including CSS grid layout and CSS flexible box layout.

The initial value of `column-gap` is `1em`, which prevents columns from running into each other. In other layout methods, `column-gap` is supported as a synonym for `gap`, but with an initial value of `0`. The keyword value `normal` sets `column-gap` to the initial value.

You can change the gap by using any `<length>` value. In the example below, the `column-gap` is set to `40px`.

The allowed value for `column-gap` is a `<length-percentage>`, meaning percentages are allowed. Percentage values for `column-gap` are calculated as a percentage of the width of the multicol container.

Column rules
------------

The specification defines `column-rule-width`, `column-rule-style` and `column-rule-color`, providing a shorthand `column-rule`. These properties work in exactly the same way as the `border` properties: any `<line-style>` can be used as a `column-rule-style`, just as for valid `border-style`.

These properties are applied to the element, which is the multicol container, and therefore, all columns will have the same rule. Rules are only drawn between columns and not on the outer edges. Rules are also only drawn between columns that have content.

In this next example, a 5px-dotted rule with a color of `rebeccapurple` has been created using the longhand values.

Note that the rule itself does not take up any space: a wide rule will not push the columns apart to make space for the rule. Instead, the rule overlays the gap.

The example below uses a very wide rule of `40px` and a `10px` gap. The rule displays under the column content. To make space on both sides of the rule, the gap would need to be increased to be larger than `40px`.

Next steps
----------

This article details all the current ways in which column boxes can be styled. In the next guide, we will take a look at making elements inside a container span across all columns.