Window Radius And Transparent
Pyloid allows you to easily set the border radius and transparency of windows. These features enable you to create various custom UI designs.
Basic Setup
To set up window border radius and transparency, follow these steps:
Use the
frame=False
option when creating a window to remove the default frame.Use HTML/CSS to set the desired border radius and transparency.
Setting Border Radius
Use the CSS border-radius
property to shape your window into a circle, oval, or rounded corners:
You can set different border-radius values to create various shapes:
border-radius: 10px;
- Slightly rounded cornersborder-radius: 20px 50px;
- Various corner radiiborder-radius: 50%;
- Perfect circle
Important Note
Important: The border-radius
property won't work if applied directly to the body
tag. You must apply it to a child element (e.g., div) inside the body
. For example:
Setting Transparency
Use the CSS rgba()
color value to set the window's transparency:
The transparency value is set by the last parameter (alpha channel) in rgba:
1.0
- Completely opaque0.5
- 50% transparent0.0
- Completely transparent
Critical Requirement
Important: For window transparency to work properly, you must set background: transparent;
on both the html
and body
elements. This is essential for the transparent parts of your window to actually appear transparent rather than having a solid background. Example:
Without setting background: transparent;
on these elements, your window will appear with a solid background regardless of the rgba values you set on child elements.
Setting Drag Region
For frameless transparent or rounded windows, you need to use the data-pyloid-drag-region
attribute to make them draggable:
Complete Example
Here's a complete example code for creating a circular semi-transparent window:
This example demonstrates the following features:
Creating a frameless window
Setting a circular border (
border-radius: 9999px
)Setting a semi-transparent background (
background: rgba(255, 255, 255, 0.3)
)Setting a draggable area (
data-pyloid-drag-region
)
Combine these settings to create various window designs.
Last updated
Was this helpful?