CSS Skinning Reference

CSS Skinning Reference

ProGUI utilizes a powerful, CSS-inspired skinning engine to decouple application logic from visual design. Using familiar CSS syntax, you can style backgrounds, borders, typography, shadows, and animated transitions.

While largely adhering to standard CSS3 syntax, ProGUI introduces several powerful extensions optimized for desktop GUI development (such as DPI-snapping images, custom text rendering modes, and granular z-depth shadows).

Selectors, States, and Themes

Styles are applied using class names, IDs, states (pseudo-classes), and themes. You construct the target path when using SkinSetValue(Path$, State$, Component$, Property$, Value$).

• Classes & IDs: Targets widgets via WidgetSetClass(Widget, "className") or WidgetSetName(Widget, "myId"). In paths, use .className or #myId.
• States: Equivalent to CSS pseudo-classes. Built-in states include hover, active (mouse down), inactive, and maximized.
• Themes: You can prefix a path with a theme name (e.g., win11:button) to apply styles only when a specific theme is active via SkinSetTheme().
• Components: Some widgets have sub-components (e.g., a scrollbar has thumb1, thumb2, trackbar).

Variables & Colors

ProGUI supports CSS variables and standard color formats.

• Variables: Use var(variable-name, fallback-value). Set global variables programmatically using SkinSetGlobalVariable().
• Colors:
  • Hex: #RGB, #RRGGBB, #RRGGBBAA
  • RGB/RGBA: rgb(255, 0, 0), rgb(255 0 0), rgb(255 0 0 / 0.5), rgb(255 0 0 / 50%), rgba(255, 0, 0, 0.5), rgba(255, 0, 0, 50%)
  • HSL/HSLA: hsl(120, 100%, 50%), hsl(120 100% 50% / 0.5), hsla(120, 100%, 50%, 0.8) etc..
  • Named Colors: Standard HTML color names (e.g., red, cornflowerblue, transparent).
  • System Colors (ProGUI Extension): sys_accent, sys_colorization, sys_border.

Background Properties

Backgrounds support solid colors, images, and gradients. Multiple backgrounds can be layered using comma separation.

• background-color: Sets the solid background color.
• background-image: url('path'), linear-gradient(...), radial-gradient(...), or none.
  • URL Extensions: ProGUI allows passing multi-resolution image variants and internal flags separated by semicolons within the url() string to alter image loading behavior:
    • snaptodpi: Automatically selects the best multi-resolution image size based on the monitor’s DPI and snaps to that exact size without stretching.
    • snaptosize: Automatically selects the best image size based on the widget’s physical dimensions and snaps to that exact size without stretching.
    • trim: Automatically crops transparent pixels from the image edges.
    • Example: background-image: url('images/icon_96dpi.png; icon_120dpi.png; icon_144dpi.png; snaptodpi trim');
• background-repeat: repeat, repeat-x, repeat-y, space, round, no-repeat.
• background-size: auto, cover, contain, or exact lengths (e.g., 100px 50%).
• background-position: Keywords (center, top, bottom, left, right) or coordinates (e.g., 10px 50%).
• background-attachment: scroll (default) or fixed.
• background-opacity (ProGUI Extension): Sets the overall opacity of the background layer independently of the widget. Accepts values from 0 to 1 or 0% to 100%.
• background: Shorthand property for setting color, image, position, size, repeat, and attachment simultaneously.

Border Properties

Borders can be solid lines or complex DPI-scaled image borders.

• border-width / -top-width, -right-width, -bottom-width, -left-width: Width in pixels (e.g., 1px).
• border-style / -top-style, etc.: solid, double, inset, outset, groove, ridge, dotted, dashed.
• border-color / -top-color, etc.: Standard color values.
• border-radius / -top-left-radius, etc.: Defines corner rounding (e.g., 5px, 10px 5px).
• border-mask (ProGUI Extension): Controls clipping of the widget’s background against the border.
  • mask-inner: Clips background to the inside edge of the border.
  • mask-outer: Clips background to the outside edge of the border.
• border: Shorthand for width, style, color, and mask. (e.g., border: 1px solid #CCC mask-inner).

Box Shadow Properties

ProGUI provides a highly advanced shadow rendering engine with standard CSS syntax plus extended Z-depth controls.

• box-shadow: <x-offset> <y-offset> <blur-radius> <spread-radius> <color> <inset> <z-depth> <masking>
  • Standard params: 5px 5px 10px 0px rgba(0,0,0,0.5)
  • inset: Draws an inner shadow instead of an outer shadow.
  • Z-Depth Extensions (ProGUI Specific, primarily for inset):
    • background: Renders the shadow immediately above the skin background.
    • above: Renders the shadow above the user draw event handler (default for inset).
    • infront: Renders the shadow in front of child layout widgets.
    • ontop: Renders the shadow on top of everything, including scrollbars.
  • Masking Extensions (ProGUI Specific):
    • inside: Clips the shadow to the inside of the border mask.
    • outside: Clips the shadow to the outside of the border mask.

Text & Typography Properties

Text properties define how labels and font content render within the widget.

• color: The text color.
• font-family: Font name (e.g., Arial, Segoe UI).
• font-size: Size of the font. Supported units: px, pt, vw (viewport width %), vh (viewport height %).
• font-weight: normal, bold, thin, extralight, light, semilight, medium, semibold, extrabold, black, extrablack, or numeric 100 to 999.
• font-style: normal, italic, oblique.
• text-align: Horizontal alignment. start, left, center, middle, end, right, justify.
• vertical-align (ProGUI Extension): Vertical alignment. top, center, middle, bottom.
• text-wrap (or text-wrap-mode): wrap, nowrap.
• text-decoration: underline, line-through (or strike-through).
• text-overflow: clip, ellipsis.
• text-rendermode (ProGUI Extension): Controls sub-pixel anti-aliasing logic.
  • cleartype: Utilizes ClearType rendering (best for standard LCDs).
  • grayscale (or greyscale): Uses standard grayscale anti-aliasing (best for transparent backgrounds over complex imagery).
  • aliased: No anti-aliasing.

Transitions & Animations

ProGUI features an extremely robust animation engine capable of automatically interpolating between skin states (e.g., fading colors or animating border radii when a user hovers over a button).

• transition: Shorthand for <property> <duration>s <easing-function> <delay>s allow-discrete. Multiple transitions are comma-separated.
  • Example: transition: background-color 0.3s ease-out, border-radius 0.5s ease-out-bounce

Supported Easing Functions:

ProGUI supports standard CSS easing, cubic-bezier, and a massive library of extended game-engine-style easing functions:

• linear, ease, ease-in, ease-out, ease-in-out
• cubic-bezier(x1, y1, x2, y2)
• Quad: ease-in-quad, ease-out-quad, ease-in-out-quad, ease-out-in-quad
• Cubic: ease-in-cubic, ease-out-cubic, ease-in-out-cubic, ease-out-in-cubic
• Quart: ease-in-quart, ease-out-quart, ease-in-out-quart, ease-out-in-quart
• Quint: ease-in-quint, ease-out-quint, ease-in-out-quint, ease-out-in-quint
• Sine: ease-in-sine, ease-out-sine, ease-in-out-sine, ease-out-in-sine
• Expo: ease-in-expo, ease-out-expo, ease-in-out-expo, ease-out-in-expo
• Circ: ease-in-circ, ease-out-circ, ease-in-out-circ, ease-out-in-circ
• Elastic: ease-in-elastic, ease-out-elastic, ease-in-out-elastic, ease-out-in-elastic
• Elastic 2: ease-in-elastic2, ease-out-elastic2 (Features advanced wobble/bounce physics parameters)
• Back: ease-in-back, ease-out-back, ease-in-out-back, ease-out-in-back
• Bounce: ease-in-bounce, ease-out-bounce, ease-in-out-bounce, ease-out-in-bounce

See Also

Skinning Overview, SkinSetValue, WidgetSetSkinState

Supported OS

Windows, Linux