Revision Difference
custom-style-properties#562738
<cat>UI.Styles</cat>⤶
<title>Custom Style Properties</title>⤶
⤶
We've added a few custom style properties to our implementation of css. Your editor might complain that these don't exist, but they do.⤶
⤶
Here's what we added⤶
⤶
⤶
⤶
| Name | Description / Notes |⤶
|-------------------|-----|⤶
| aspect-ratio | float: Added by Facebook Flexbox. Element tries to keep its aspect ratio. | ⤶
| background-image-tint | Color: multiplies the `background-image` by this color; not a replacement for `filter` or `backdrop-filter` | ⤶
| border-image-tint | Color: multiplies the border image by this color |⤶
| sound-in | The name of a sound to play when this style is applied to an element for the first time. This is useful to put on a:hover style to play a sound when hovering. | ⤶
| sound-out | The name of a sound to play when this style is removed from an element for the first time | ⤶
| text-stroke | This will put an outline around text. This property is the same as the non-standard [-webkit-text-stroke property](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-stroke), and follows the same syntax: `text-stroke: size colour` |⤶
| mask-scope | `default` will apply the mask normally / `filter` will use the mask to blend between unfiltered and filtered |⤶
⤶
# Custom pseudo-classes⤶
⤶
There are also some custom pseudo-classes for applying transitions when an element is created or deleted. ⤶
⤶
* `:intro` - is removed when the element is created, things will transition away from this.⤶
* `:outro` - is added when Panel.Delete() is called, the Panel waits for all transitions to finish before actually deleting itself.⤶
⤶
```⤶
mypanel {⤶
transition: all 2s ease-out;⤶
transform: scale( 1 );⤶
⤶
// When the element is created make it expand from nothing.⤶
&:intro {⤶
transform: scale( 0 );⤶
}⤶
⤶
// When the element is deleted make it double in size before being deleted.⤶
&:outro {⤶
transform: scale( 2 );⤶
}⤶
}⤶
```⤶
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