Doddle USS provides custom controls to fill in for Unity's missing gradients and box shadows. Both the gradient and box shadow controls use Unity's mesh API. The gradient control is currently a 4-corner gradient box.
The box shadow element uses a 2 shape approach to draw the shadow explained below, and must be placed within a parent wrapper VisualElement as the box shadow control will fill 100% width/height of the parent VisualElement.
Inner shape- is a 4 vertex shape equal to the size of the parentVisualElement - corner radius/2, so the transition will fade out as it approaches the outer shape.Outer shape- is a shape with the same size as the parent VIsualElement, and rounded corners matching the--box-shadow-corner-radiusproperty.
Inner Shape
Outer Shape
Meshes in Unity are drawn in winding order (clockwise), and the vertices below plus the vertices added for corner radius forms triangles, then drawn.
Inner shapevertices will be--box-shadow-color.Outer shapevertices will betransparent.- The box shadow will gradually transition from
--box-shadow-colortotransparent.
The box shadow implements the following custom USS properties enabling you to adjust the look and feel of box shadows from USS classes, and not only the editor.
--box-shadow-color- color of the box shadow fill. By default, the value isRGBA(0.0f, 0.0f, 0.0f, 1.0f).--box-shadow-offset-x- horizontal offset of the box shadow from the VisualElement position.+values move the shadow right.-values move the shadow left.--box-shadow-offset-y- vertical offset of the box shadow from the VisualElement position.+values move the shadow down.-values move the shadow up.--box-shadow-spread-x- scaling of the box shadow in both x directions. Range of accepted values is1f-100f.--box-shadow-spread-y- scaling of the box shadow in both y directions. Range of accepted values is1f-100f.--box-shadow-corner-radius- radius of the corner circles of the box shadow. This property controls how rounded the edges of the shadow are.
USS
USS
USS
USS
USS
USS
The gradient element uses a simpler 4 vertex shape approach to draw the VisualElement.
The gradient implements the following custom USS properties enabling you to adjust the look and feel of gradients from USS classes, and not only the editor.
--gradient-bottom-left- color of the gradient fill in the bottom left quadrant of the VisualElement.--gradient-top-left- color of the gradient fill in the top left quadrant of the VisualElement.--gradient-top-right- color of the gradient fill in the top right quadrant of the VisualElement.--gradient-bottom-right- color of the gradient fill in the bottom right quadrant of the VisualElement.
USS
UXML
On this page