Simple Pop-Up Design with CSS

Here I will be showing how to get the pop up design done with pure CSS. I am converting below image into html pop up

You can do it in two ways, one is using the two divs and another one is with adding top curve through CSS.

When you have some links to be linked to the head text you need to follow the 2 divs method because in CSS content method you cant add a tag to the head text.

Method 1 (2 Divs Method)

Take one parent div and a child div. Parent should have position:relative and child position:absolute

HTML

<div class="pop">

    <span><a href="http://userinterfacehome.blogspot.in/">Pop Head </a></span>

</div>

CSS

.pop{

    background:#333;

    display:inline-block;

    width:250px;

    height:120px;

    border-radius:8px;

    position:relative;

    margin-top:25px

}

span{

    position:absolute; 

    left:0; 

    top:-20px;

    color:white;

    display:inline-block;

    border-radius:8px 8px 0 0;

    background:#333; 

    padding:6px;

    width:100px

}

a{

    text-decoration:none;

    color:white

}

Check the DEMO HERE

 

Method 2 (CSS Content Method)

In this method I am using CSS pseudo-class to get the heading design done by CSS dynamically.

HTML

<div class="pop"></div>

CSS

.pop {
    background:#333;
    width:250px;
    height:120px;
    border-radius:8px;
    display: inline-block;
}
.pop::before {
    content:"Pop up head";
    display: block;
    width: 90px;
    background:#333;
    border-radius:8px;
    padding: 3px;
    margin-top: -14px;
    text-align: center;
    color: white;
}

Check the DEMO HERE

That is it!!