mirror of
https://github.com/Textualize/textual.git
synced 2025-10-17 02:38:12 +03:00
56 lines
1.3 KiB
Markdown
56 lines
1.3 KiB
Markdown
# Tint
|
|
|
|
The `tint` style blends a color with the whole widget.
|
|
|
|
## Syntax
|
|
|
|
--8<-- "docs/snippets/syntax_block_start.md"
|
|
tint: <a href="../../css_types/color"><color></a> [<a href="../../css_types/percentage"><percentage></a>];
|
|
--8<-- "docs/snippets/syntax_block_end.md"
|
|
|
|
The tint style blends a [`<color>`](../css_types/color.md) with the widget. The color should likely have an _alpha_ component (specified directly in the color used or by the optional [`<percentage>`](../css_types/percentage.md)), otherwise the end result will obscure the widget content.
|
|
|
|
## Example
|
|
|
|
This examples shows a green tint with gradually increasing alpha.
|
|
|
|
=== "Output"
|
|
|
|
```{.textual path="docs/examples/styles/tint.py"}
|
|
```
|
|
|
|
=== "tint.py"
|
|
|
|
```python hl_lines="11"
|
|
--8<-- "docs/examples/styles/tint.py"
|
|
```
|
|
|
|
1. We set the tint to a `Color` instance with varying levels of transparency, set through the method `.with_alpha`.
|
|
|
|
=== "tint.css"
|
|
|
|
```sass
|
|
--8<-- "docs/examples/styles/tint.css"
|
|
```
|
|
|
|
## CSS
|
|
|
|
```sass
|
|
/* A red tint (could indicate an error) */
|
|
tint: red 20%;
|
|
|
|
/* A green tint */
|
|
tint: rgba(0, 200, 0, 0.3);
|
|
```
|
|
|
|
## Python
|
|
|
|
```python
|
|
# A red tint
|
|
from textual.color import Color
|
|
widget.styles.tint = Color.parse("red").with_alpha(0.2);
|
|
|
|
# A green tint
|
|
widget.styles.tint = "rgba(0, 200, 0, 0.3)"
|
|
```
|