Creating cute pop-ups with HTML and CSS

December 23rd, 2009 by Alex Leave a reply »

This time, we are going to see how to create nice and smooth info boxes, or pop-up boxes if you wish. Basically, what we’ll need is to create a sequence of good colored borders and a light background for the box.

First, let’s create our pop-up box and define some basic styles. Remember, we’ll need a sequence of borders, so let’s create a set of border style rules too.

<style>
.boxwrap {}
.boxwrap2 { }
.boxwrap3 { }
.box { background: #83d8ff; text-align: center; font: normal 22px Tahoma; text-shadow: 1px 1px 1px #fffff7; padding: 20px; }
</style>
<div class='boxwrap'>
  <div class='box'>Welcome to our website!</div>
</div>

Now, let’s work on our borders. First, let’s create a semi-dark colored, thin border. Then, add a lighter border to highlight it. And finally, finish with a darker border from the same color family. Remember to do it upside-down (i.e. boxwrap #3 is the most inner border, and border #1 is the most outer)

<style>
.boxwrap { border: 1px solid #d49101 }
.boxwrap2 { border: 1px solid #ffe490 }
.boxwrap3 { border: 10px solid #ffc000 }
</style>
<div class='boxwrap'><div class='boxwrap2'><div class='boxwrap3'>
  <div class='box'>Welcome to our website!</div>
</div></div></div>

This is what we get in the end.

Welcome to our website!

Try different color combination and add more additional borders if you need:

Welcome to our website!

Comments are closed.