Stiluri de Paginare CSS
Tema de aici este stilizarea avansată a paginării: efecte hover, tranziții și breadcrumbs.
Paginare cu Efect Hover
Un link de pagină își poate schimba culoarea de fundal când mouse-ul trece peste el, datorită selectorului :hover.
Exemplu
În această paginare, doar linkurile neactive reacționează la hover:
Prompt
Creează o bară de paginare cu săgeți anterior/următor și numere de pagină 1-5. Stilizează pagina activă cu fundal albastru și text alb. Adaugă un efect hover care schimbă culoarea de fundal în gri deschis pentru linkurile neactive.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pagination Hover Effect</title>
<style>
.pagination {
display: inline-block;
padding: 0;
margin: 0;
list-style: none;
}
.pagination li {
display: inline;
}
.pagination li a {
color: black;
padding: 8px 16px;
text-decoration: none;
border: 1px solid #ddd;
}
.pagination li a.active {
background-color: #4CAF50;
color: white;
border: 1px solid #4CAF50;
}
.pagination li a:hover:not(.active) {
background-color: lightgray;
}
</style>
</head>
<body>
<h2>Pagination with Hover Effect</h2>
<ul class="pagination">
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a href="#" class="active">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
</body>
</html>
Efect de Tranziție la Hover
Pentru o animație lină la hover, dă linkurilor de pagină proprietatea transition.
Exemplu
La hover, culoarea de fundal se schimbă acum treptat, datorită unui efect de tranziție:
Prompt
Creează o bară de paginare cu săgeți anterior/următor și numere de pagină 1-5. Stilizează linkurile cu chenar, border-radius și padding. Adaugă o tranziție CSS astfel încât schimbarea culorii de fundal la hover să se animeze lin pe parcursul a 1 secundă.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pagination Transition Effect</title>
<style>
.pagination {
display: inline-block;
padding: 0;
margin: 0;
list-style: none;
}
.pagination li {
display: inline;
}
.pagination li a {
display: inline-block;
padding: 8px 12px;
text-decoration: none;
border: 1px solid gray;
color: black;
margin: 0 4px;
border-radius: 5px;
transition: background-color 1s;
}
.pagination li a.active {
background-color: #4CAF50;
color: white;
}
.pagination li a:hover:not(.active) {
background-color: lightgray;
}
</style>
</head>
<body>
<h2>Pagination with Transition Effect</h2>
<ul class="pagination">
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a href="#" class="active">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
</body>
</html>
Paginare tip Breadcrumb
Un breadcrumb este încă un tip de paginare. Afișează calea către pagina curentă sub formă de linkuri, cu un caracter precum „/” între ele.
Exemplu
Între elementele acestei navigări de tip breadcrumb se află separatori:
Prompt
Creează o navigare de tip breadcrumb cu patru elemente: Acasă, Poze, Vara 25 și Italia. Stilizează-o cu fundal gri deschis, fără marcatori de listă, elemente inline, culoare verde pentru linkuri și un separator „/” între elemente folosind proprietatea CSS content.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Breadcrumb Pagination</title>
<style>
ul.breadcrumb {
padding: 8px;
list-style: none;
background-color: #eee;
}
ul.breadcrumb li {
display: inline;
}
ul.breadcrumb li a {
color: green;
}
ul.breadcrumb li+li:before {
padding: 8px;
color: black;
content: "/\00a0";
}
</style>
</head>
<body>
<h2>Breadcrumb Pagination</h2>
<ul class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Pictures</a></li>
<li><a href="#">Summer 25</a></li>
<li>Italy</li>
</ul>
</body>
</html>