Lista to ważny element każdej strony internetowej. Służy do wyszczególnienia oraz uporządkowania ważnych treści. Ma wielorakie zastosowanie np. jako menu czy wypunktowanie ważnych cech. Dzięki CSS3 przygotujemy efekty, które zachęcą internautów przeglądających naszą witrynę do sprawdzenia ich zawartości.
Lista numerowana w HTML
<!DOCTYPE html>
<html>
<head>
<title>Lista numerowana w CSS3#</title>
</head>
<body>
<section>
<ol id="lista" class="lista">
<li><a href="#">Lista numerowana</a></li>
<li><a href="#">Lista numerowana</a></li>
<li><a href="#">Lista numerowana</a>
<ol>
<li><a href="#">Podlista numerowana</a></li>
<li><a href="#">Podlista numerowana</a></li>
</ol>
</li>
<li><a href="#">Lista numerowana</a></li>
</ol>
</section>
</body>
</html>Lista numerowana w CSS
Zaczniemy od przygotowania ogólnych deklaracji dla listy ol.
ol {
counter-reset: li;
list-style: none;
padding: 0;
}
ol ol {
margin: 0 0 0 2em;
}Poniżej zdefiniujemy formatowanie zawartości z tekstem w prawej części listy.
.lista a {
position: relative;
display: block;
padding: .6em .6em .6em 1.0em;
margin: .6em 0 .6em 2.9em;
border: 1px solid #e0e0e0;
background: linear-gradient(left bottom, rgb(255,255,255) 14%,
rgb(240,240,240) 100%);
color: #505050;
text-decoration: none;
transition: all .3s ease-out;
}
.lista a:hover {
border: 1px solid #f00000;
}Dalej nadamy styl dla wypunktowania oraz efekt po najechaniu na element listy.
.lista a:before {
counter-increment: li;
position: absolute;
left: -2.9em;
top: 43%;
content: counter(li, decimal);
color: #fff;
margin-top: -1em;
background: #f00000;
height: 2.4em;
width: 2.4em;
line-height: 2.4em;
text-align: center;
font-weight: bold;
text-shadow: 0 1px 0 rgba(0,0,0,.5);
}
.lista a:after {
position: absolute;
content: '';
border: .5em solid transparent;
left: -1em;
top: 53%;
margin-top: -.5em;
transition: all .3s ease-out;
}
.lista a:hover:after {
left: -.5em;
border-left-color: #f00000;
}