Gehen euch die einfachen Listen in HTML auch langsam auf den Wecker? Dann habe ich hier ein Beispiel wie ihr eine Liste verschönern könnt. Mit diesem kleinen Trick kann man aus einer Liste ne Art Timeline machen oder einfach die ganze Liste ein wenig farbenfroher designen.
Video
HTML
1
2
3
4
5
6
7
| <ol>
<li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</li>
<li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</li>
<li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</li>
<li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</li>
<li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</li>
</ol> |
<ol>
<li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</li>
<li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</li>
<li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</li>
<li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</li>
<li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</li>
</ol>
CSS
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
| ol {
padding: 0;
margin: 0;
max-width: 70%; /* grösse der liste einstellen */
position: relative;
}
ol::before {
content: '';
width: 0.5rem;
height:100%;
position: absolute;
top: 0;
left: 10%; /* liste linie abstand*/
background: rgb(234,185,255);
z-index: -1;
}
li {
background: rgb(185, 239, 255);
border-radius: 1.5rem;
padding: 0.5rem 1.5rem 1rem;
margin-top: 20px; /* liste punkte abstand*/
}
::marker {
color: rgba(0,0,0,0) /* punkte durchsichtig machen*/ |
ol {
padding: 0;
margin: 0;
max-width: 70%; /* grösse der liste einstellen */
position: relative;
}ol::before {
content: '';
width: 0.5rem;
height:100%;
position: absolute;
top: 0;
left: 10%; /* liste linie abstand*/
background: rgb(234,185,255);
z-index: -1;
}li {
background: rgb(185, 239, 255);
border-radius: 1.5rem;
padding: 0.5rem 1.5rem 1rem;
margin-top: 20px; /* liste punkte abstand*/
}::marker {
color: rgba(0,0,0,0) /* punkte durchsichtig machen*/
0 Kommentare