Posted onMay 9, 2019

How to create a dialog interface in CSS

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 classdialog.

HTML

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

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

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 classarrow inside the.dialog element and add some CSS to style the new element.

<div>    <ul>        <li>          <a href="#">Dashboard</a>        </li>        <li>            <a href="#">Sign out</a>        </li>    </ul>    <div></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;}

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

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