Hari ini aku akan menunjukkan kepada Anda bagaimana untuk membuat tabel harga UI datar. Tabel merupakan elemen yang dapat mewakili rincian produk atau apa pun. UI saat ini datar adalah web tren desain. Jadi saya membuat tabel ini sebagai datar UI yang berarti sederhana dan tidak ada efek yang lebih. Tapi itu tampak hebat dan efektif.
Ada banyak layanan hosting yang populer menggunakan jenis harga meja bagi pengguna mereka untuk memahami harga produk yang berbeda milik daftar yang disediakan di dalamnya. Jadi menjadi tabel harga menarik bisa lebih eye-catching bagi para pengguna.
Saya yakin, harga meja ini akan memanfaatkan dengan hosting, produk, layanan pendaftaran domain dll, karena ini sangat penting untuk layanan tersebut.
HTML
Struktur ini cukup sederhana. Dalam mark up saya telah menggunakan div dan daftar unordered bukan meja. Setiap kolom dalam <div> dan class = "meja" yang diberikan. Setiap tabel harga telah kelas ekstra sendiri ditambah dengan ekonomi, standar dan premium.
Struktur ini cukup sederhana. Dalam mark up saya telah menggunakan div dan daftar unordered bukan meja. Setiap kolom dalam <div> dan class = "meja" yang diberikan. Setiap tabel harga telah kelas ekstra sendiri ditambah dengan ekonomi, standar dan premium.
<div class="table economic"> <h2>Economic</h2> <span class="price">$10/year</span> <ul> <li>20 GB space</li> <li>Unlimited Bandwidth</li> <li>15 Email Accounts</li> <li>10 MySQL Database</li> <li>24×7 Online Support</li> <li>100% Money Back Guarantee</li> </ul> <a class="button" href="#"><span data-hover="Buy">Buy</span></a></div><div class="table standard"> <h2>Standard</h2> <span class="price">$45/year</span> <ul> <li>100 GB space</li> <li>Unlimited Bandwidth</li> <li>50 Email Accounts</li> <li>35 MySQL Database</li> <li>24×7 Online Support</li> <li>100% Money Back Guarantee</li> </ul> <a class="button" href="#"><span data-hover="Buy">Buy</span></a></div><div class="table premium"> <h2>Premium</h2> <span class="price">$99/year</span> <ul> <li>Unlimited space</li> <li>Unlimited Bandwidth</li> <li>Unlimited Email Accounts</li> <li>Unlimited MySQL Database</li> <li>24×7 Online Support</li> <li>100% Money Back Guarantee</li> </ul> <a class="button" href="#"><span data-hover="Buy">Buy</span></a></div>Sekarang kita harus berdandan meja dengan desain datar sederhana. Tapi tampak hebat. Mari kita melompat ke bagian CSS.
CSS
Sekarang mari kita gaya keseluruhan. Kelas meja. Di sini saya menambahkan lebar 30%. Anda mungkin harus mengubah jika kontainer selama Anda terlalu besar..table { width:30%; margin:0 10px; background:#fff; text-align:center; float:left;}.table.standard { background:rgba(0,245,255,0.1);}Nama (judul h2) dari setiap meja sudah mendapat gaya cantik dengan latar belakang dan font yang cantik bernama Armata..table h2 { color:#fff; margin:0; padding:5px 0; text-align:center; font:Bold 25px armata; cursor:pointer; z-index:999; position:relative;}.table.economic h2 { background:#4593e3;}.table.standard h2 { background:#16a085;}.table.premium h2 { background:#cd4436;}Harga setiap tabel memiliki nilai yang berbeda itu sendiri ($ 10, $ 45 dan $ 99). Jadi saya membuat latar belakang yang berbeda..table .price { font:15px Armata; color:#fff; padding:10px 25px; display:inline-block; border-radius:0px 0px 100% 100%; cursor:pointer;}.table.economic .price { background:#4593e3;}.table.standard .price { background:#16a085;}.table.premium .price { background:#cd4436;}.table:hover .price { border-radius:0;}Harga meja seperti biasa dibangun dalam tabel HTML. Tapi di sini saya telah menggunakan <div> normal dan <ul>. Mari kita gaya daftar dengan perbatasan karena menjadi warna mereka..table ul { margin:9px 0; padding:0px;}.table ul li { list-style:none; font:15px Armata; padding:10px 5px; border:1px solid rgba(238,238,238,0.29); margin:2px 10px;}.table.economic ul li:hover { border-color:#4593e3;}.table.premium ul li:hover { border-color:#cd4436;}.table.standard ul li:hover { border-color:#16a085;}Sekarang kita dapat memberikan tombol yang indah dengan animasi menggunakan transisi dan translateY. Tombol memiliki unsur semu juga..table a { text-decoration:none; display:inline-block; overflow:hidden; color:#000; margin:1px 0 10px; text-transform:uppercase;}.table a:hover { color:#fff;}.table .button span { position:relative; display:inline-block; -webkit-transition:-webkit-transform 0.3s; -moz-transition:-moz-transform 0.3s; transition:transform 0.3s; padding:5px 35px; font:Bold 20px Armata;}.table .button span::before { position:absolute; top:100%; content:attr(data-hover); font-weight:700; -webkit-transform:translate3d(0,5px,10px); -moz-transform:translate3d(0,5px,10px): transform:translate3d(0,5px,10px):}.table .button:hover span,.table .button:focus span { -webkit-transform:translateY(-100%); -moz-transform:translateY(-100%); transform:translateY(-100%);}.table.economic a { border: 2px solid #4593e3;}.table.economic a:hover { background: #4593e3;}.table.standard a { border:2px solid #16a085;}.table.standard a:hover { background:#16a085;}.table.premium a { border:2px solid #cd4436;}.table.premium a:hover { background:#cd4436;}Itu saja. i hope you like Tabel Harga saya. Let me know tanggapan Anda tentang esign ini melalui komentar di bawah ini.
0 comments:
Post a Comment