How to create a Bubble effect with CSS

Demo

• 
• 
• 
•        

Here is the CSS code:

<style type="text/css">      div#content{
          margin:20px;
          text-align:center;
     }

     #bubble {
          list-style: none;
  margin: 20px 0px 0px;
padding: 0px;
     }
     #bubble li {
display: inline-block;
margin: 0px 5px;
padding: 0px;
width: 72px;
height: 72px;
     }
     #bubble li a img {
position: relative;
border: none;
     }
     #bubble li a img.large {
display: none;
     }
     #bubble li a:hover img.small {
display: none;
z-index: 0;
     }
     #bubble li a:hover img.large {
display: block;
margin-top: -28px;
margin-left: -28px;
z-index: 1000;
     }
</style>

Here is the HTML code:

<div id="content">

<ul id="bubble"> 

     <li> 
          <a href="http://twitter.com/anklet1989" title="Follow me on Twitter"><img class="small" src="images/twitter.png" alt="Follow me on Twitter" /><img class="large" src="images/twitter_large.png" alt="Follow me on Twitter" /> 
          </a> 
     </li>
     <li> 
          <a href="http://facebook.com/duylamng" title="I'm on Facebook"><img class="small" src="images/facebook.png" alt="I'm on Facebook" /><img class="large" src="images/facebook_large.png" alt="I'm on Facebook" /> 
          </a> 
     </li> 
     <li> 
          <a href="http://delicious.com/save" onclick="window.open('http://delicious.com/save?v=5&amp;noui&amp;jump=close&amp;url=http://aext.net&amp;title=AEXT.NET', 'delicious','toolbar=no,width=550,height=550'); return false;" title="Save me"><img class="small" src="images/delicious.png" alt="Save me" /><img class="large" src="images/delicious_large.png" alt="Save me" /> 
          </a> 
     </li> 
     <li>
          <a href="http://technorati.com/faves?sub=addfavbtn&add=http://aext.net" title="Fave me on Technorati"><img class="small" src="images/technorati.png" alt="Fave me on Technorati" /><img class="large" src="images/technorati_large.png" alt="Fave me on Technorati" /></a>
     </li> 
</ul>
</div>

How to create a horizontal css menu

The Horizontal CSS Menu is used in many web sites. This kind of menus are looks very attractive and good for web page's design. It increase the look of the web pages design.
So here we go:

Here is the CSS code:

#nav{
     float:right; 
     font-family:Arial, Helvetica, sans-serif; 
     font-weight:bold;
     font-size:12px;
     z-index:9999;
     color:#fff;
}
#nav a:link, #nav a:active{
     display:block;
     padding: 14px 35px;
     color:#999999;
     text-decoration:none;
     text-transform:uppercase; 
     background-image:url(nav_button_bg.jpg); 
     background-position:top left;
}
#nav li{
     float:left;
     position:relative;
}
#nav, #nav ul{
     margin:0;
     padding:0;
     list-style-type:none; 
     list-style-position:outside;
     position:relative;
     line-height:1.5em;
     background-color:#2e2e2e;
     background-image:none;
}
#nav ul{
     position:absolute;
     width:13em;
     top:3.8em;
     display:none;
     z-index:1;
}
#nav li ul a{
     width:9em;
     float:left;
     background-color:#2e2e2e;
     background-image:none;
}
#nav a:hover,#nav li ul a:hover{
     color:#fff; 
     background-color:#292929;
}
#nav ul ul{
     top:auto;
}
#nav li ul ul{
     left:12em;
     margin:0px 0 0 10px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
     display:none;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
     display:block;
}

Here is the HTML code:

<ul id="nav">

     <li><a href="#">Home</a></li>
<li><a href="#">About</a>
          <ul>
  <li><a href="#">Philosophy</a></li>
               <li><a href="#">Work Ethic</a></li>
  <li><a href="">Team Member</a>
  <ul>
  <li><a href="#">Member One</a></li>
  <li><a href="#">Member Two</a></li>
  <li><a href="#">Member Three</a></li>
  </ul>
               </li>
  </ul>
  </li>
  <li><a href="#">Portfolio</a>
  <ul>
  <li><a href="#">Web Design</a></li>
  <li><a href="#">Identity</a></li>
  </ul>
  </li>
  <li><a href="#">Blog</a></li>
  <li><a href="#">Contact</a></li>
</ul>

How to create an Overlay message box

Here is the CSS code:

<style>  
    a.activator{
        font-family:"Courier New", Courier, monospace;
        font-size:36px;
text-decoration:none;
color:#666666;
font-weight:bold;
    }
  
    /* Style for overlay and box */
    .overlay{
        background:transparent url(images/overlay.png) repeat top left;
        position:fixed;
        top:0px;
        bottom:0px;
        left:0px;
        right:0px;
        z-index:100;
    }
    .box{
        position:fixed;
top:40%;
        left:-450px;
        background-color:#fff;
        color:#7F7F7F;
        padding:20px;
        border:2px solid #ccc;
        -moz-border-radius: 20px;
        -webkit-border-radius:20px;
        -khtml-border-radius:20px;
        -moz-box-shadow: 0 1px 5px #333;
        -webkit-box-shadow: 0 1px 5px #333;
        z-index:101;
    }
    .box h1{
        border-bottom: 1px dashed #7F7F7F;
        margin:-20px -20px 0px -20px;
        padding:10px;
        background-color:#FFFFFF;
        color:#666666;
        -moz-border-radius:20px 20px 0px 0px;
        -webkit-border-top-left-radius: 20px;
        -webkit-border-top-right-radius: 20px;
        -khtml-border-top-left-radius: 20px;
        -khtml-border-top-right-radius: 20px;
    }
    a.boxclose{
        float:right;
        width:26px;
        height:26px;
        background:transparent url(images/cancel.png) repeat top left;
        margin-top:-30px;
        margin-right:-30px;
        cursor:pointer;
    }
</style>

Here is the HTML code:

<!-- The overlay and the box -->
<a id="activator" class="activator" href="#">Click Me!</a>
<div class="overlay" id="overlay" style="display:none;"></div>
<div class="box" id="box">
    <a class="boxclose" id="boxclose"></a>
    <h1>Your Own Message</h1>
    <p>The Message will be over hear.</p>
    <p>You can do any thing in this box. Just make it. And enjoy it.</p>
</div>

Here is the jQuery code:

<!-- The JavaScript -->
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
    $(function() {
        $('#activator').click(function(){
            $('#overlay').fadeIn('fast',function(){
                $('#box').animate({'left':'410px'},500);
            });
        });
        $('#boxclose').click(function(){
            $('#box').animate({'left':'-450px'},500,function(){
                $('#overlay').fadeOut('fast');
            });
        });
    });
</script>

The Real Thought.....