tag gezocht
Ik zoek een "tag" waarin ik een voortgang kan simuleren.
Ik ken de tag progress maar ik heb niet genoeg aan gedaan en nog te doen. Ik zoek iets met meerdere kleuren en secties die per sectie ook tekst kan bevatten.
Nu heb ik een image gemaakt met php maar 100% gelukkig ben ik er ook niet mee.
Ik heb ook geprobeerd met een div (width: 100%) met verschillende span of divs in met width: ##% maar als de tekst te groot is verminkt deze de sectie.
Iemand ideeen?
Jan
Een willekeurige voortgangsindicator:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html>
<head>
<style>
.voortgang {
--hoogte: 40px;
width: 200px;
height: var(--hoogte);
line-height: var(--hoogte);
border: 1px solid gray;
background-image: linear-gradient(to top, red 0%, blue 100%);
background-repeat: no-repeat;
text-align: center;
color: yellow;
font-weight: bold;
font-family: sans-serif;
text-shadow:
1px 1px 0 green,
1px -1px 0 green,
-1px 1px 0 green,
-1px -1px 0 green;
}
</style>
</head>
<body>
<div class="voortgang" style="background-size: 73% 40px;">
73 %
</div>
</body>
</html>
<html>
<head>
<style>
.voortgang {
--hoogte: 40px;
width: 200px;
height: var(--hoogte);
line-height: var(--hoogte);
border: 1px solid gray;
background-image: linear-gradient(to top, red 0%, blue 100%);
background-repeat: no-repeat;
text-align: center;
color: yellow;
font-weight: bold;
font-family: sans-serif;
text-shadow:
1px 1px 0 green,
1px -1px 0 green,
-1px 1px 0 green,
-1px -1px 0 green;
}
</style>
</head>
<body>
<div class="voortgang" style="background-size: 73% 40px;">
73 %
</div>
</body>
</html>
Met CSS kan je ook animaties gebruiken, doorzichtige kleuren en filter-effecten. Wil je iets er bij, dan doe je dat met CSS. Je kunt HTML pseudo-elementen gebruiken (::before en ::after) en als dat niet genoeg is, maak je er vanuit PHP gewoon een HTML element bij. Moet het iets speciaals wat niet kan met CSS? Dan kan je overwegen om JavaScript er bij te gebruiken (daar was het ooit voor bedoeld).
Toevoeging op 12/02/2022 19:39:16:
Eventueel kan je tekst in een div laten afbreken door:
Code (php)
1
2
3
4
5
2
3
4
5
div {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
ik heb er meerdere nodig. 4 soms 5
Code (php)
1
2
3
2
3
<div style='position:relative; background-image: linear-gradient(to right, red 0%, red 25%,green 25%,green 50%,blue 50%, blue 75%, yellow 75%, yellow 100%); text-align: center'>
<div id='todo' style='position: absolute; background: white; right: 0; top: 0; bottom: 0; left: 73%'></div>
</div>
<div id='todo' style='position: absolute; background: white; right: 0; top: 0; bottom: 0; left: 73%'></div>
</div>
Voor wie CSS flexbox niet vaak genoeg gebruikt om het paraat te hebben is deze link wel handig:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/#aa-flexbox-properties
Maar hoe los ik dan de tekstinhoud aan zodat deze past in de exacte breedte van de sectie?
Zover ik weet onbreekt er een css optie "fit"
dit zou handig zijn maar bestaat niet
Code (php)
1
2
3
4
2
3
4
.fit {
font-size: 15px;
overflow: fit;
}
font-size: 15px;
overflow: fit;
}
Gewijzigd op 14/02/2022 07:05:49 door Jan R