Tutorial: How to create an Overlay Panel

Overlay Panel
Overlay Panel

Today I’m doing another webdesign tutorial, this time I’m going to be showing you how to create an overlay panel. There are lots of ways you can use it, one of then is as a dialog, like in image above.

So let’s start with the HTML structure:

<div class="overlay_panel">
	<b>Overlay Panel</b>
	<p>Phasellus vel metus iaculis mauris condimentum imperdiet. Praesent feugiat fermentum 
           aliquet. Mauris porttitor, nisl at eleifend sodales, eros ex eleifend arcu, sit amet 
           molestie dui neque non tellus. In hac habitasse platea dictumst. Nunc quis accumsan 
           nisi. Donec at congue ante. Morbi laoreet a leo eget pharetra. Aenean scelerisque c
           onsequat vehicula. Sed quis condimentum arcu. Quisque pulvinar mauris eget sapien so
           llicitudin, vitae blandit lectus pellentesque. Nullam at nibh rhoncus, feugiat tellu
           s ut, iaculis velit.
        </p>
	<a href="#" onclick="hide()">OK</a>
</div>

The only thing that matters here is the div with the overlay_panel class, you can put anything you want inside it. As an example I’ve put a title, a text and an ok button.

Now let’s do the styling:

.overlay_panel {
    position: fixed;
    top: 0; 
    left: 0;
    right: 0;
    bottom: 0;
    margin: 100px auto;
    width: 50%;
    display: none;
    border-radius: 2px;
    text-align: justify;
    background-color: white;
    color: #333;
    padding: 20px;
    box-shadow: 2px 2px 10px 2px #333;
}
.overlay_panel a{
	float:right;
}

You can adjust the width, height, color and pretty much everything else as you like, but you should keep the display: none to make it hidden by default, and also the position: fixed, which will position your panel in front of your page content.

Lastly, this is how to show/hide it:

function show() {
    document.getElementsByClassName("overlay_panel")[0].style.display = "block";
}
 
function hide() {
    document.getElementsByClassName("overlay_panel")[0].style.display = "none";
}

These two functions just switches the display from none to block, and vice versa. Note that I’ve used the function getElementsByClassName to get the element, but it returns an array, so I had to specify the index to access my element. Alternatively, you could use getElementsById function, which returns only one element.

Tutorial: How to Create Cards UI with CSS & HTML

Cards Demo
Cards Demo

In this short tutorial I’m going to show you how to create cards, they are trending for quite some time now and I thought it would be a good idea to write about them. For this example I’m only using HTML and CSS, my goal here is to just show you how to create the design. Please let me know in the comments if you want another post on how to add animations and some functionalities to it.

So first let’s create our HTML structure, as you can see in the image above, our cards will be composed of an image and a description containing a title and a small text. This is how it should look like in code:

<div class="card">
   <img src="img.jpg" >
   <div class="description">
      <h4 class="title"><b>magna tincidunt et</b></h4> 
         <p class="text">Nam nec lorem eu nibh aliquam egestas non lobortis neque. 
            Ut tristique tortor sem, eget tristique lectus consectetur id. 
            Vivamus sem metus, fermentum in orci ut, rhoncus semper tellus. 
            Praesent eget porttitor metus. Phasellus a ipsum vulputate, cursus massa eu, 
            tincidunt purus. Curabitur auctor vulputate velit</p> 
   </div>
</div>

Don’t forget to pick an image and specify it on the img src attribute. Now we already have our card, it’s not very pretty, though. Let’s add some style to it:

.title, .text{
   font-family: verdana;
   font-size: 12px;
}
 
.title{
   margin-bottom: 0px;
}
 
.text{
   margin-top: 5px;
}
.card {
   box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
   transition: 0.3s;
   width: 300px;
   margin: 3px;
   float: left;
}
 
.card:hover {
   box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
 
.description {
   padding: 2px 16px;
}
 
.card img{
   width:100%;
}

Now just add this CSS to your page. I styled my card this way but feel free to edit this CSS as you like.

That’s it guys! We’ve created a very basic card, as I said before let me know in the comments what functionalities do you want it to have.