How to create a dialog interface in CSS

May 15, 2018
Written by Jakz Aizzat
@jakzaizzat

End Result

Progress

We want to create a dialog interface with multiple list item. First of all, let's build the list item first and wrap it with a div with a class dialog.

HTML

<div class="dialog">
  <ul>
    <li>
      <a href="#">Dashboard</a>
    </li>
    <li>
      <a href="#">Sign out</a>
    </li>
  </ul>
</div>

Let's style the element with the CSS. Change the background colour and text colour.

CSS

.dialog {
  background-color: #1c3d5a;
  border-radius: 0.25rem;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  width: 300px;
  margin: 0 auto;
}

Progress

We should add some style into the list item. So, we want to change the colour into white and remove the bullet.

.dialog ul {
  list-style: none;
  padding: 0;
  width: 100%;
}

.dialog li {
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-left: 1rem;
}

.topNav-dropdown li a {
  color: #fff;
}

Progress

Seems good. Now, we need to add a little triangle at the bottom to make it looks it comes out from the bottom. Let's add another div with the class arrow inside the .dialog element and add some CSS to style the new element.

<div class="dialog">
  <ul>
    <li>
      <a href="#">Dashboard</a>
    </li>
    <li>
      <a href="#">Sign out</a>
    </li>
  </ul>
  <div class="arrow"></div>
</div>
.arrow {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #1c3d5a;
  position: relative;
  top: 0.6rem;
}

Progress

Hmm. Now we can see the little triangle at the bottom. We need to centre the position. Since, it's wrapped in one div (.dialog), let's align with the power of the flexbox. Add new rules in the .dialog class.

.dialog {
  background-color: #1c3d5a;
  border-radius: 0.25rem;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  width: 300px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

Progress

Seems good. Let's add some animation to make it pop up. Create a new animation property in the CSS and assign it into .dialog class.

@keyframes popout {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}
@-webkit-keyframes popout {
  from {
    -webkit-transform: scale(0);
  }
  to {
    -webkit-transform: scale(1);
  }
}

.dialog {
  background-color: #1c3d5a;
  border-radius: 0.25rem;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  width: 300px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  animation: popout 0.7s ease;
}

Progress

Hopefully, you enjoyed this little tutorial. If you want to grab a code, feel free to grab it on my CodePen.