Eine Liste wie eine Zeitleiste stylen? CSS Anleitung

von | Jan 9, 2023 | Design | 0 Kommentare

Schlagwörter: CSS - CSS3

Inhaltsverzeichnis

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>

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*/




0 Kommentare

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

WordPress

Allgemein

Technik

Design

Konzept

WordPress Plugins

Interessantes

Vermarktung