Skip to content

Commit b890289

Browse files
add proposal docs
1 parent d769ffd commit b890289

3 files changed

Lines changed: 97 additions & 0 deletions

File tree

docs/css-multiple-background.md

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
---
2+
title: "CSS How to handle multiple background fills"
3+
version: 0.1.0
4+
revision: 1
5+
---
6+
7+
# How to handle multiple background fills
8+
9+
## Definition of `"multiple background fills"`
10+
11+
- one or none active solid fill
12+
- one or more gradient fill above solid fill
13+
- one or more image fill
14+
15+
## Possible combinations
16+
17+
single solid fill
18+
19+
```css
20+
._1 {
21+
background: #fff;
22+
}
23+
._2 {
24+
background-color: #fff;
25+
}
26+
```
27+
28+
single solid fill with single gradient fill
29+
30+
```css
31+
._1 {
32+
background-color: #fff;
33+
background-image: linear-gradient(to bottom, #fff, #fff);
34+
}
35+
36+
._2 {
37+
background: #fff;
38+
background-image: linear-gradient(to bottom, #fff, #fff);
39+
}
40+
```
41+
42+
no solid fill with single gradient fill
43+
44+
```css
45+
._1 {
46+
background: linear-gradient(to bottom, #fff, #fff);
47+
}
48+
49+
._2 {
50+
background-image: linear-gradient(to bottom, #fff, #fff);
51+
}
52+
```
53+
54+
no solid fill with multiple gradient fill
55+
56+
```css
57+
._1 {
58+
background: linear-gradient(to bottom, #fff, #fff), linear-gradient(to bottom, #fff, #fff);
59+
}
60+
```

docs/css-text-gradient.md

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
---
2+
title: "CSS Gradient on text layer"
3+
version: 0.1.0
4+
revision: 1
5+
---
6+
7+
# CSS - Gradient on Text Layer
8+
9+
Applying a gradient to a text fill is quite different from simply giving a color to a text.
10+
Yet hooray CSS, it is much more simple than other platforms (flutter, android, ...)
11+
12+
**How to**
13+
14+
```css
15+
h1 {
16+
font-size: 72px;
17+
background: -webkit-linear-gradient(#eee, #333);
18+
-webkit-background-clip: text;
19+
-webkit-text-fill-color: transparent;
20+
}
21+
```
22+
23+
### References
24+
25+
- https://cssgradient.io/blog/css-gradient-text/
26+
- https://github.com/gridaco/designto-code/issues/84

docs/css-text-vertical-align.md

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
---
2+
title: "CSS Vertically align text content"
3+
version: 0.1.0
4+
revision: 1
5+
---
6+
7+
# Vertical align of text content
8+
9+
### References
10+
11+
- https://stackoverflow.com/questions/8865458/how-do-i-vertically-center-text-with-css

0 commit comments

Comments
 (0)