Nice looking ui design for tablet with modern hover effects.
The html code is just a simple structure with one aside element and one section.
The HTML:
<div class="page">
<aside class="menu">
<a href="" class="logo">Logo</a>
<a href="" class="menu-item">
<p class="material-icons icon">dashboard</p>
<p class="text">Dashboard</p>
</a>
<a href="" class="menu-item">
<p class="material-icons icon">manage_accounts</p>
<p class="text">Settings</p>
</a>
<a href="" class="menu-item">
<p class="material-icons icon">today</p>
<p class="text">Calendar</p>
</a>
<a href="" class="menu-item active">
<p class="material-icons icon">touch_app</p>
<p class="text">Accesibility</p>
</a>
<a href="" class="menu-item">
<p class="material-icons icon">theaters</p>
<p class="text">Theaters</p>
</a>
</aside>
<section class="main">
<h2>Accesibility</h2>
<ul>
<li>
<div>Item</div>
<div>Price</div>
<div>Rate</div>
</li>
<li>
<div>Itmem 1</div>
<div>12.5</div>
<div>2 out of 10</div>
</li>
<li>
<div>Itmem 2</div>
<div>22.8</div>
<div>5 out of 10</div>
</li>
<li>
<div>Itmem 3</div>
<div>37</div>
<div>4 out of 10</div>
</li>
<li>
<div>Itmem 4</div>
<div>299.9</div>
<div>9.5 out of 10</div>
</li>
<li>
<div>Itmem 5</div>
<div>0.5</div>
<div>0 out of 10</div>
</li>
<li>
<div>Itmem 6</div>
<div>52.52</div>
<div>8 out of 10</div>
</li>
<li>
<div>Itmem 7</div>
<div>24.9</div>
<div>7 out of 10</div>
</li>
</ul>
</section>
</div>
For the css part i'm going to add only the more interesting element that is the menu hover effect.
So for a menu item we have the following structure in HTML:
<a href="" class="menu-item">
<p class="material-icons icon">dashboard</p>
<p class="text">Dashboard</p>
</a>
in order to make it look as I intended, the following css was needed:
.menu a.menu-item {
display: block;
text-decoration: none;
}
.menu a.menu-item:hover .icon,
.menu a.menu-item.active .icon {
background-image: linear-gradient(-70deg , #08bfb3, #44e4c4);
color: #eee;
border-radius: 10px 10px 0 10px;
z-index: 2;
}
.menu a.menu-item:hover .text,
.menu a.menu-item.active .text {
background-image: linear-gradient(-90deg , #2a71e5, #1a71a8);
z-index: -1;
border-radius: 10px 0 0 10px;
width: 54%;
}
.menu .icon {
position: relative;
color: #0e8af6;
margin: 5px;
padding: 10px;
}
.menu .text {
color: #eee;
padding: 20px 20px 20px 25px;
margin: 0 0 0 -30px;
}
.menu p {
line-height: 24px;
vertical-align: middle;
display: inline-block;
}
Top comments (1)
Looking to enhance your tablet app's user interface? Dive into this insightful article on Tablet UI Design for expert tips and strategies to create an engaging user experience