Revision Difference
supported-style-properties#562737
<cat>UI.Styles</cat>⤶
<title>Supported Style Properties</title>⤶
⤶
We try to keep as close to standard web styles as possible - but not every property is implemented. We'll use this page to highlight any differences.⤶
⤶
Anything marked in bold may behave differently to how you expect it.⤶
⤶
# Common Types⤶
⤶
| Name | Description / Notes | Examples |⤶
|-------------------|-----|⤶
| float | A standard float | `flex-grow: 10`⤶
| Color | Can have alpha. | `color: #fff`, `color: #ffffffaa`, `color: rgba( red, 0.5 )` |⤶
| Length | A dimension, pixel or relative. | `left: 10px`, `left: 10%` |⤶
⤶
# Supported Properties⤶
⤶
| Name | Parameters | Examples / Notes |⤶
|-------------------|--------------|------------------|⤶
| align-content | auto / flex-end / flex-start / center / stretch / space-between / space-around / baseline / stretch |⤶
| align-items | as above |⤶
| align-self | as above |⤶
| backdrop-filter | blur(Length) / saturate(Length) / contrast(Length) / brightness(Length) / grayscale(Length) / sepia(Length) | `backdrop-filter: blur(10px) saturate(80%)` |⤶
| background | Fills in the properties below |⤶
| background-color | Color |⤶
| background-image | url(string) / linear-gradient(Color, Color) / radial-gradient(Color, Color) | ⤶
| background-position | Length, Length (optional) | `background-position: 10px`, `background-position: 10px 15px` |⤶
| background-repeat | no-repeat / repeat-x / repeat-y / repeat |⤶
| background-size | Length, Length (optional) | `background-size: 10px`, `background-size: 10px 15px` |⤶
| border | [ border-width border-style border-color ] | `border: 10px solid white` |⤶
| border-bottom | Same as `border` |⤶
| border-bottom-color | Color |⤶
| border-bottom-left-radius | Length |⤶
| border-bottom-right-radius | Length |⤶
| border-bottom-width | Length |⤶
| border-color | Color |⤶
| border-image |⤶
| border-left | Same as `border` |⤶
| border-left-color | Color |⤶
| border-left-width | Length |⤶
| border-radius | Length | `border-radius: 10px`, `border-radius: 10px 0px 10px 10px`⤶
| border-right | Same as `border` |⤶
| border-right-color | Color |⤶
| border-right-width | Length |⤶
| border-top | Same as `border` |⤶
| border-top-color | Color |⤶
| border-top-left-radius |⤶
| border-top-right-radius |⤶
| border-top-width | Length |⤶
| border-width | Length |⤶
| bottom | Length |⤶
| box-shadow | Length, Length (optional), Length (blur, optional), Length (spread, optional), Color⤶
| color | Color / linear-gradient(Color, Color) / radial-gradient(Color, Color) |⤶
| cursor | none / pointer / progress / wait / crosshair / text / move / not-allowed | ⤶
| **display** | flex (default) / none | Everything is flex by default. |⤶
| filter | blur(Length) / saturate(Length) / contrast(Length) / brightness(Length) / grayscale(Length) / sepia(Length) / border-wrap(Length, Color) | `filter: blur(20px)` |⤶
| flex-basis | Length |⤶
| flex-direction | column / column-reverse / row-reverse / row |⤶
| flex-grow | float |⤶
| flex-shrink | float |⤶
| flex-wrap | wrap / wrap-reverse / nowrap |⤶
| font-color | Color |⤶
| **font-family** | string | Specify a single font, based on the filename, see <page>Fonts</page>. |⤶
| font-size | Length |⤶
| font-style | normal / italic |⤶
| font-weight | normal / bold / lighter / bolder / int | `font-weight: normal`, `font-weight: 300` |⤶
| gap | Length, Length (optional) | shorthand for row-gap and column-gap, specifies the size of gutters⤶
| height | Length |⤶
| image-rendering | auto / anisotropic / bilinear / trilinear / point / pixelated / nearest-neighbour |⤶
| justify-content | center / flex-end / flex-start / space-between / space-around / space-evenly |⤶
| left | Length |⤶
| letter-spacing | Length / normal | ⤶
| mask | Shorthand for other mask properties |⤶
| mask-image | url(string) / linear-gradient(Color, Color) / radial-gradient(Color, Color) |⤶
| mask-mode | luminance / alpha |⤶
| mask-repeat | repeat-x / repeat-y / repeat / no-repeat |⤶
| mask-size | Length, Length (optional) |⤶
| mask-position | Length, Length (optional) |⤶
| margin | Fills in the properties below |⤶
| margin-bottom | Length |⤶
| margin-left | Length |⤶
| margin-right | Length |⤶
| margin-top | Length |⤶
| max-height | Length |⤶
| max-width | Length |⤶
| min-height | Length |⤶
| min-width | Length |⤶
| mix-blend-mode | normal / lighten / multiply |⤶
| opacity | Float |⤶
| order | Integer |⤶
| overflow | hidden / scroll / visible |⤶
| padding | Fills in the properties below |⤶
| padding-bottom | Length |⤶
| padding-left | Length |⤶
| padding-right | Length |⤶
| padding-top | Length |⤶
| pointer-events | none / all / auto |⤶
| **position** | static (default) / relative / absolute | See how it works: https://yogalayout.com/docs/absolute-relative-layout/ |⤶
| right | Length |⤶
| text-align | center / left / right |⤶
| text-decoration | Color / Length / LineStyle, Line | Properties can be in any order and you can have multiple lines |⤶
| text-decoration-color | Color | Color of the line decoration |⤶
| text-decoration-line | underline/line-through/overline | Multiple properties can be set, `text-decoration-line: overline underline;` |⤶
| text-decoration-skip-ink | all/none | Decides whether the line decoration should draw above glyphs or not |⤶
| text-decoration-style | solid/double/dotted/dashed/wavy | Line decoration style |⤶
| text-decoration-thickness | Length | Thickness of the decoration line |⤶
| text-decoration-line-through-offset | Length | How much the line-through decoration is offset |⤶
| text-decoration-overline-offset | Length | How much the overline decoration is offset |⤶
| text-decoration-underline-offset | Length | How much the underline decoration is offset |⤶
| text-shadow | Length, Length (optional), Length (blur, optional), Length (spread, optional), Color⤶
| text-transform | none / capitalize / lowercase / uppercase |⤶
| text-overflow | ellipsis / clip⤶
| word-break | normal / break-all⤶
| line-height | Length⤶
| top | Length |⤶
| transform | Fills in the properties below |⤶
| transform-origin | x-position / y-position / z-position |⤶
| transform-origin-x | Length |⤶
| transform-origin-y | Length |⤶
| transition | Fills in the properties below |⤶
| transition-delay | float |⤶
| transition-duration | float |⤶
| transition-property | string |⤶
| transition-timing-function | linear / ease / ease-in-out / ease-out / ease-in / bounce-in / bounce-out / bounce-in-out |⤶
| white-space | normal / nowrap |⤶
| width | Length |⤶
| z-index | int |⤶
⤶
⤶
## Useful Resources⤶
* https://yogalayout.com/playground/ - a great website for visualizing how flex layouts work.This page has been [moved](https://docs.facepunch.com/s/sbox-dev/doc/style-properties-WSPC2zsKHu).
Garry's Mod
Rust
Steamworks
Wiki Help
S&box