S&box Wiki

Home / Custom Style Properties

Custom Style Properties

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
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, 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 ); } }

Account Management

Special Pages

Wiki List