How to create a dialog interface in CSS
Tags: css, css3, animation
Published: 2019-05-09 09:33:10

---
title: How to create a dialog interface in CSS
published: true
description: We want to create a dialog interface with multiple list item.
tags: css, css3, animation
---


![End Result](https://jakzaizzat.com/wp-content/uploads/2019/05/Screenshot-2019-05-06-at-3.55.40-AM.png)

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: .25rem;
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1);
        margin-left: .5rem;
        margin-right: .5rem;
        width: 300px;
        margin: 0 auto;
    }
```


![Progress](https://jakzaizzat.com/wp-content/uploads/2019/05/Screenshot-2019-05-06-at-3.59.24-AM.png)

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](https://jakzaizzat.com/wp-content/uploads/2019/05/Screenshot-2019-05-06-at-4.02.42-AM-1.png)

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: .6rem;
}
```


![Progress](https://jakzaizzat.com/wp-content/uploads/2019/05/Screenshot-2019-05-06-at-4.06.43-AM.png)

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: .25rem;
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1);
        margin-left: .5rem;
        margin-right: .5rem;
        width: 300px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
```


![Progress](https://jakzaizzat.com/wp-content/uploads/2019/05/Screenshot-2019-05-06-at-4.08.53-AM.png)

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: .25rem;
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1);
        margin-left: .5rem;
        margin-right: .5rem;
        width: 300px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      animation: popout 0.7s ease;
    }

```


![End Result](https://jakzaizzat.com/wp-content/uploads/2019/05/ezgif.com-video-to-gif.gif)

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


{% codepen https://codepen.io/jakzaizzat/pen/EzxQZy  %}


Original submitted from [my blog](https://jakzaizzat.com/how-to-create-a-dialog-css/)