chevron-left chevron-right

[CSS] Niesamowicie wyglądające listy numerowane

Z racji nadchodzącego Sylwestra i okresu postanowień noworocznych można przygotować sobie odpowiednio wyglądającą listę z postanowieniami. W tym artykule dowiesz się, jak stworzyć listy, które zaskoczą innych efektownym widokiem nie umniejszając ich funkcjonalności.

Już kiedyś miałem okazję napisać o różnych sposobach tworzenia efektownych list za pomocą CSS. Dzisiejszy wpis będzie jakby jego rozwinięciem.

Przykład 1 - zagnieżdżone listy

Niesamowita lista CSS - przykład 1 - wygląd by Piotr Nalepa

Kod HTML

Na początek musimy przygotować odpowiednią strukturę HTML dla naszej listy. Nie będzie to nic odkrywczego, po prostu numeryczna lista:

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

<div id="lista1">
	<h2>Przykład 1</h2>
	<ol>
		<li>Pozycja 1</li>
		<li>Pozycja 2</li>
		<li>Pozycja 3</li>
		<li>Pozycja 4</li>
		<li>Pozycja 5</li>
		<li>Pozycja 6
			<ol>
				<li>Zagnieżdżona pozycja 6.1</li>
				<li>Zagnieżdżona pozycja 6.2</li>
				<li>Zagnieżdżona pozycja 6.3</li>
			</ol>
		</li>
		<li>Pozycja 7</li>
		<li>Pozycja 8
			<ol>
				<li>Zagnieżdżona pozycja 8.1</li>
				<li>Zagnieżdżona pozycja 8.2</li>
				<li>Zagnieżdżona pozycja 8.3</li>
			</ol>
		</li>
		<li>Pozycja 9</li>
		<li>Pozycja 10</li>
	</ol>
</div>

Na potrzeby tego artykułu, listy będą trzymane w osobnych kontenerach (czyt.: divach), nie jest to najbardziej fortunnie wyglądający kod. Dlatego na stronach lepiej definiować identyfikatory bezpośrednio do list.

Kod 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
29
30
31
32
33
34
35
36

#lista1 ol {
	counter-reset:	licznik;
	margin-left:	0;
	padding-left:	0;
}
#lista1 ol > li {
	position:	relative;
	margin:		0 0 6px 2em;
	padding:	4px 8px;
	list-style:	none;
	border-top:	2px solid #666;
	background:	#f6f6f6;
	display: 	block;
}
#lista1 ol > li:before {
	content: 	counter(licznik);
	counter-increment: 	licznik;
	position: 	        absolute;
	top: 	-2px;
	left: 	-2em;
        width: 	2em;
	-moz-box-sizing: 	border-box;
	-webkit-box-sizing:     border-box;
	box-sizing: 		border-box;
	margin-right: 	8px;
	padding: 	4px;
	border-top: 	2px solid #666;
	color: 	        #fff;
	background: 	#666;
	font-weight: 	bold;
	font-family: 	Arial, Helvetica, sans-serif;
	text-align: 	center;
}
#lista1 li ol,
#lista1 li ul { margin-top: 6px; }
#lista1 ol ol li:last-child { margin-bottom: 0; }

W tym przykładzie, a także w kolejnych, zostały wykorzystane atrybuty: counter-reset, counter-increment. Są to rzadko używane atrybuty, ale o bardzo ciekawych możliwościach i istnieją od czasów powstania CSS2. Dzięki nim, można numerować listy na swój sposób i wykorzystać numery list w odpowiednich miejscach za pomocą atrybutu: content, który służy do stawiania tekstu na stronę za pomocą CSS. Dzięki kombinacji tych trzech atrybutów oraz pseudoklasy :before na stronie "dzieje się magia".
Wykorzystano również atrybut: box-sizing, w celu dostosowania elementów listy tak, aby marginesy i paddingi zawierały się w szerokości i wysokości elementu, a nie dodawały się do szerokości i wysokości psując cały układ strony. Jest to nowe podejście do modelu pudełka znanego z CSS2. Dzięki niemu, nie trzeba się już martwić o kalkulowanie wartości szerokości i wysokości.

Przykład 2 - pytania i odpowiedzi

Niesamowita lista CSS - przykład 2 - wygląd by Piotr Nalepa

Kod HTML

1
2
3
4
5
6
7
8
9
10

<div id="lista2">
	<dl>		
		<dt>Co to jest CSS?</dt>
		<dd>CSS - Cascading Style Sheets (z ang. Kaskadowe Arkusze Stylów) jest to ...</dd>			
		<dt>Co to jest HTML?</dt>
		<dd>HTML - HyperText Markup Language ? hipertekstowy język znaczników ...</dd>			
		<dt>Co to jest JavaScript?</dt>
		<dd>JavaScript jest to ...</dd>			
	</dl>
</div>

Tym razem wykorzystujemy listę definicji do utworzenia kolejnego efektu listy. Ten typ listy zazwyczaj się wykorzystuje do różnego typu elementów strony związanych z pytaniami i odpowiedziami.

Kod CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

#lista2 dl { counter-reset: licznik; }
#lista2 dt {
	position: relative;
	font: 	  bold 16px Georgia;
	padding:  4px 0 10px 0;
}
#lista2 dt:before {
	content: 		counter(licznik);
	counter-increment: 	licznik;
	position: 	absolute;
	left: 	0;
	top: 	0;
	font: 	bold 50px/1 Arial, Helvetica, sans-serif;
}
#lista2 dd 		{ margin: 0 0 50px 0; }	
#lista2 dt, #lista2 dd 	{ padding-left: 50px; }

Dzięki powyższemu kodowi, uzyskaliśmy efekt pierwszego znaku dużego (nie pamiętam nazwy typograficznej) co nadaje pewnej elegancji tekstowi na stronie.

Przykład 3 - listy z obrazkami

Niesamowita lista CSS - przykład 3

Pora na najbardziej efektowny przykład listy, który można wykorzystać do tworzenia opisów czynności lub jako galerię zdjęć. Dzięki niemu, strona na pewno zyska na elegancji.

Kod HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<div id="lista3">
	<ol>
		<li>
			<img ...>
			<div>...</div>
		</li>
		<li>
			<img ...>
			<div>...</div>
		</li>
		<li>
			<img ...>
			<div>...</div>
		</li>
	</ol>
</div>

Kod 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
29
30

#lista3 ol { list-style: none; }
#lista3 li {
   counter-increment: 	licznik;
   position: 		relative; 
   clear: 		both;
}
#lista3 li:before {
   content: 	counter(licznik, upper-roman);
   font-size: 	40px;
   background: 	rgba(255,132,0,0.7);
   color: 	#fff;
   position: 	absolute;
   top: 	0;
   left: 	0;
   width: 	100px;
   height: 	100px;
   line-height: 100px;
   text-align: 	center;
}
#lista3 li > div {
   float: 	right;
   width: 	440px;
   margin: 	-40px -130px 100px 0;
   background: 	rgba(0,0,0,0.3);
   padding: 	50px;
   position: 	relative;
   font: 	18px/1.5 bold Arial, Helvetica, sans-serif;
   color: 	#fff;
   text-align: 	center;
}

W tym przykładzie wystąpiła mała zmiana dotycząca counter(). Tym razem counter() przyjmuje 2 parametry: nazwę licznika oraz typ licznika. W ten sposób osiągnęliśmy rzymskie numerowanie listy na obrazkach. Dla efektu przezroczystości tła użyliśmy kolorów w systemie rgba.

Podsumowanie

Analizując powyższe przykłady, można było się zapoznać z atrybutami, które do tej pory nie były wykorzystywane najczęściej. Teraz, znając ich dodatkowe możliwości można tworzyć efektownie wyglądające strony WWW z różnymi stylami numeracji listy bez korzystania z technologii pośrednich typu PHP czy JS. Jest to na pewno spore ułatwienie. Tym bardziej, że efekty działają we wszystkich najnowszych przeglądarkach włączając w to Internet Explorer 9.


Demo z tego artykułu można zobaczyć tutaj: listy numeryczne z CSS

Artykuł powstał na podstawie: źródło, źródło2.