4

html5

css3

Lista numerowana

html5 css3

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 dokumencie HTML5

<!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 dokumencie CSS3

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%);
background: -o-linear-gradient(left bottom, rgb(255,255,255) 14%,
rgb(240,240,240) 100%);
background: -moz-linear-gradient(left bottom, rgb(255,255,255) 14%,
rgb(240,240,240) 100%);
background: -webkit-linear-gradient(left bottom, rgb(255,255,255) 14%,
rgb(240,240,240) 100%);
background: -ms-linear-gradient(left bottom, rgb(255,255,255) 14%,
rgb(240,240,240) 100%);
background: -webkit-gradient(
linear,
left bottom,
right top,
color-stop(0.14, rgb(255,255,255)),
color-stop(1, rgb(240,240,240)));
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;
}

Efekt

comments powered by Disqus

Do góry