DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Tablet Dashboard UI CSS&HTML
Cornea Florin
Cornea Florin

Posted on

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

DEV

Thank you.

Β 
Thanks for visiting DEV, we’ve worked really hard to cultivate this great community and would love to have you join us. If you’d like to create an account, you can sign up here.