Membuat Pagination Neumorphism Design
Pada kesempatan kali ini kita akan belajar membuat desain Pagination Neumorphism.
Penjelasan:
Pagination adalah sebuah fitur yang digunakan untuk membatasi bagian isi artikel web dalam jumlah penomoran halaman agar desain tampilannya terlihat lebih rapih dan terstruktur, sehingga dapat dipisah/di pilih berapa data yang akan di tampilkan terlebih dahulu.
Neumorphism yaitu sebuah desain hasil kombinasi antara design Skeumorphism dan Flat. Neumorphism sendiri merupakan paduan kata New dan skeumorphism jadilah kata (Neumorphism), untuk lebih mudah membedakannya, Neumorphism adalah istilah yang di gunakan pada user interface untuk membuat suatu komponen lebih nyata.
Dan pada Pagination ini kita akan mendesign dengan style Neumorphism dimana ketika user mengklik tombol pada urutan halaman akan muncul efek bayangan Neomorfik dan menunjukan kepada user bahwa tab ini sedang aktif.
Ngoding
Disini kita akan membuat 2 buah file , yang satu untuk html dan satu lagi untuk css.
Pertama-tama buka terlebih dahulu Text Editor Kalian dan buatlah file Html bernama pagination.html
<!DOCTYPE html>
<!-- Created By sharecode -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<!-- <title>Neumorphism</title> -->
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.5.1.js">
</script>
</head>
<body>
<div class="container">
<ul class="pagination">
<li><a href="#">Previous</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
<li><a href="#">Next</a>
</li>
</ul>
</div>
<script>
$("li").click(function(){
$(this).addClass("active").siblings().removeClass("active");
});
</script>
</body>
</html>
Selanjutnya buat file css bernama neumorphism.css
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
margin: 0;
padding: 0;
outline: none;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
html,body{
display: grid;
height: 100%;
place-items: center;
text-align: center;
background: #dde1e7;
}
.container{
background: #dde1e7;
padding: 25px;
border-radius: 3px;
box-shadow: -3px -3px 7px #ffffff73,
3px 3px 5px rgba(94,104,121,0.288);
}
.pagination{
display: flex;
list-style: none;
}
.pagination li{
flex: 1;
margin: 0px 5px;
background: #dde1e7;
border-radius: 3px;
box-shadow: -3px -3px 7px #ffffff73,
3px 3px 5px rgba(94,104,121,0.288);
}
.pagination li a{
font-size: 18px;
text-decoration: none;
color: #4D3252;
height: 45px;
width: 55px;
display: block;
line-height: 45px;
}
.pagination li:first-child a{
width: 120px;
}
.pagination li:last-child a{
width: 100px;
}
.pagination li.active{
box-shadow: inset -3px -3px 7px #ffffff73,
inset 3px 3px 5px rgba(94,104,121,0.288);
}
.pagination li.active a{
font-size: 17px;
color: #6f6cde;
}
.pagination li:first-child{
margin: 0 15px 0 0;
}
.pagination li:last-child{
margin: 0 0 0 15px;
}
Selesai dan lihat hasilnya
Belum ada Komentar
Posting Komentar