How to create a dialog CSS

How to create a dialog CSS
How to create a dialog CSS 2
Dialog Interface

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;
    }
How to create a dialog CSS 3

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;
}
How to create a dialog CSS 4

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;
}
How to create a dialog CSS 5

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;
    }
How to create a dialog CSS 6

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;
    }
How to create a dialog CSS 7
Popup Animation


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

https://codepen.io/jakzaizzat/pen/EzxQZy

Leave a Reply

Your email address will not be published. Required fields are marked *

How to create a dialog CSS 9
Up Next:

How to Return Status Code with Laravel Resource

How to Return Status Code with Laravel Resource