alihan/textual
1
0
Fork 0
mirror of https://github.com/Textualize/textual.git synced 2025-10-17 02:38:12 +03:00
Code Issues Packages Projects Releases Wiki Activity

Update *opacity references.

Browse Source
This commit is contained in:
Rodrigo Girão Serrão
2023-01-06 10:47:31 +00:00
parent 2dda286628
commit a25ba1bea4
2 changed files with 26 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
docs/styles/opacity.md
View File

@@ -8,9 +8,10 @@ The `opacity` property sets the opacity/transparency of a widget.
opacity: <a href="../../css_types/number">&lt;number&gt;</a> | <a href="../../css_types/percentage">&lt;percentage&gt;</a>; opacity: <a href="../../css_types/number">&lt;number&gt;</a> | <a href="../../css_types/percentage">&lt;percentage&gt;</a>;
--8<-- "docs/snippets/syntax_block_end.md" --8<-- "docs/snippets/syntax_block_end.md"
The opacity of a widget can be set as a [`<number>`](../css_types/number.md) between `0` and `1` or a [`<percentage>`](../css_types/percentage.md) between `0%` and `100%`. The opacity of a widget can be set as a [`<number>`](../css_types/number.md) or a [`<percentage>`](../css_types/percentage.md).
`0`/`0%` means no opacity, which is equivalent to full transparency. `0`/`0%` means no opacity, which is equivalent to full transparency.
Conversely, `1`/`100%` means full opacity, which is equivalent to no transparency. Conversely, `1`/`100%` means full opacity, which is equivalent to no transparency.
Values outside of these ranges will be clamped.
### Values ### Values

38
docs/styles/text_opacity.md
View File

@@ -4,20 +4,35 @@ The `text-opacity` blends the color of the content of a widget with the color of
## Syntax ## Syntax
``` --8<-- "docs/snippets/syntax_block_start.md"
text-opacity: <FRACTIONAL>; text-opacity: <a href="../../css_types/number">&lt;number&gt;</a> | <a href="../../css_types/percentage">&lt;percentage&gt;</a>;
``` --8<-- "docs/snippets/syntax_block_end.md"
The text opacity can be set as a [`<number>`](../css_types/number.md) or a [`<percentage>`](../css_types/percentage.md).
`0`/`0%` means no opacity, which is equivalent to full transparency.
Conversely, `1`/`100%` means full opacity, which is equivalent to no transparency.
Values outside of these ranges will be clamped.
### Values ### Values
As a fractional property, `text-opacity` can be set to either a float (between 0 and 1), ### &lt;number&gt;
or a percentage, e.g. `45%`.
Float values will be clamped between 0 and 1. --8<-- "docs/snippets/type_syntax/number.md"
Percentage values will be clamped between 0% and 100%. The value of [`<number>`](../../css_types/number) is clamped between `0` and `1`.
### &lt;percentage&gt;
--8<-- "docs/snippets/type_syntax/percentage.md"
The value of [`<percentage>`](../../css_types/percentage) is clamped between `0%` and `100%`.
## Example ## Example
This example shows, from top to bottom, increasing text-opacity values. This example shows, from top to bottom, increasing `text-opacity` values.
=== "Output"
```{.textual path="docs/examples/styles/text_opacity.py"}
```
=== "text_opacity.py" === "text_opacity.py"
@@ -31,18 +46,11 @@ This example shows, from top to bottom, increasing text-opacity values.
--8<-- "docs/examples/styles/text_opacity.css" --8<-- "docs/examples/styles/text_opacity.css"
``` ```
=== "Output"
```{.textual path="docs/examples/styles/text_opacity.py"}
```
## CSS ## CSS
```sass ```sass
/* Set the text to be "half-faded" against the background of the widget */ /* Set the text to be "half-faded" against the background of the widget */
Widget {
text-opacity: 50%; text-opacity: 50%;
}
``` ```
## Python ## Python