Tablet Dashboard UI CSS&HTML

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;
}

Comments

[Kimberly]

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