JibberBook (A Free AJAX Guestbook)
JibberBook is an easy-to-use, open-source guestbook built with PHP5 and JavaScript. It aims to create a pleasant user experience while giving you much flexibility.

There is an Admin Area, that can help you to delete the spam comments and the other comments that you don’t want.

Demo View: Admin Area
Password: tetcocool

You can Download JibberBook from here: Download JibberBook

sorry friends, i have a big work this month, i will check out soon ! …..

Nested Side Bar Menu

This is code of the HEAD part:

<script type="text/javascript">
var menuids=["sidebarmenu1"] //Enter id(s) of each Side Bar Menu's main UL, separated by commas

function initsidebarmenu(){
for (var i=0; i<menuids .length; i++){
  var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
    for (var t=0; t<ultags.length; t++){
    ultags[t].parentNode.getElementsByTagName("a")[0].className+=" subfolderstyle"
  if (ultags[t].parentNode.parentNode.id==menuids[i]) //if this is a first level submenu
   ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px" //dynamically position first level submenus to be width of main menu item
  else //else if this is a sub level submenu (ul)
    ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
    ultags[t].parentNode.onmouseover=function(){
    this.getElementsByTagName("ul")[0].style.display="block"
    }
    ultags[t].parentNode.onmouseout=function(){
    this.getElementsByTagName("ul")[0].style.display="none"
    }
    }
  for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars
  ultags[t].style.visibility="visible"
  ultags[t].style.display="none"
  }
  }
}

if (window.addEventListener)
window.addEventListener("load", initsidebarmenu, false)
else if (window.attachEvent)
window.attachEvent("onload", initsidebarmenu)

</menuids></script>

This is code of the CSS part:

.sidebarmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
font: bold 13px Verdana;
width: 180px; /* Main Menu Item widths */
border-bottom: 1px solid #ccc;
}

.sidebarmenu ul li{
position: relative;
}

/* Top level menu links style */
.sidebarmenu ul li a{
display: block;
overflow: auto; /*force hasLayout in IE7 */
color: white;
text-decoration: none;
padding: 6px;
border-bottom: 1px solid #778;
border-right: 1px solid #778;
}

.sidebarmenu ul li a:link, .sidebarmenu ul li a:visited, .sidebarmenu ul li a:active{
background-color: #012D58; /*background of tabs (default state)*/
}

.sidebarmenu ul li a:visited{
color: white;
}

.sidebarmenu ul li a:hover{
background-color: black;
}

/*Sub level menu items */
.sidebarmenu ul li ul{
position: absolute;
width: 170px; /*Sub Menu Items width */
top: 0;
visibility: hidden;
}

.sidebarmenu a.subfolderstyle{
background: url(right.gif) no-repeat 97% 50%;
}

/* Holly Hack for IE \*/
* html .sidebarmenu ul li { float: left; height: 1%; }
* html .sidebarmenu ul li a { height: 1%; }
/* End */

This is code of the HTML part:

<div class="sidebarmenu">
<ul id="sidebarmenu1">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Folder 1</a>
  <ul>
  <li><a href="#">Sub Item 1.1</a></li>
  <li><a href="#">Sub Item 1.2</a></li>
  </ul>
</li>
<li><a href="#">Item 3</a></li>

<li><a href="#">Folder 2</a>
  <ul>
  <li><a href="#">Sub Item 2.1</a></li>
  <li><a href="#">Folder 2.1</a>
    <ul>
    <li><a href="#">Sub Item 2.1.1</a></li>
    <li><a href="#">Sub Item 2.1.2</a></li>
    <li><a href="#">Sub Item 2.1.3</a></li>
    <li><a href="#">Sub Item 2.1.4</a></li>
    </ul>
  </li>
</ul>
</li>
<li><a href="#">Item 4</a></li>
</ul>
</div>

Save this IMAGE
Right Click – Save Target As

CSS3 Gradient Menu Buttons

This is code of the CSS part:

.gradientbuttons ul{
padding: 3px 0;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font: bold 13px Verdana;
list-style-type: none;
text-align: center; /*set to left, center, or right to align the menu as desired*/
}

.gradientbuttons li{
display: inline;
margin: 0;
}

.gradientbuttons li a{
text-decoration: none;
padding: 5px 7px;
margin-right: 5px;
border: 1px solid #778;
color: white;
border:1px solid gray;
background: #3282c2;
border-radius: 8px; /*w3c border radius*/
box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* w3c box shadow */
-moz-border-radius: 8px; /* mozilla border radius */
-moz-box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* mozilla box shadow */
background: -moz-linear-gradient(center top, #a4ccec, #72a6d4 25%, #3282c2 45%, #357cbd 85%, #72a6d4); /* mozilla gradient background */
-webkit-border-radius: 8px; /* webkit border radius */
-webkit-box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* webkit box shadow */
background: -webkit-gradient(linear, center top, center bottom, from(#a4ccec), color-stop(25%, #72a6d4), color-stop(45%, #3282c2), color-stop(85%, #357cbd), to(#72a6d4)); /* webkit gradient background */
}

.gradientbuttons li a:hover{
color: lightyellow;
}

.redtheme li a{
font-size:18px;
background: darkred;
background: -moz-linear-gradient(center top, #f5795d, #e55e3f 25%, #d02700 45%, #e55e3f 85%, #f5795d);
background: -webkit-gradient(linear, center top, center bottom, from(#f5795d), color-stop(25%, #e55e3f), color-stop(45%, #d02700), color-stop(85%, #e55e3f), to(#f5795d));
}

.greentheme li a{
font-size:12px;
background: green;
background: -moz-linear-gradient(center top, #7ad690, #3ec05c 25%, #298a40 45%, #3ec05c 85%, #7ad690);
background: -webkit-gradient(linear, center top, center bottom, from(#7ad690), color-stop(25%, #3ec05c), color-stop(45%, #298a40), color-stop(85%, #3ec05c), to(#7ad690));
}

.blacktheme li a{
font-size:16px;
background: black;
background: -moz-linear-gradient(center top, #9f9f9f, #686868 25%, #2a2a2a 45%, #686868 85%, #9f9f9f);
background: -webkit-gradient(linear, center top, center bottom, from(#9f9f9f), color-stop(25%, #686868), color-stop(45%, #2a2a2a), color-stop(85%, #686868), to(#9f9f9f));
}

.orangetheme li a{
font-size:14px;
background: #e55e3f;
background: -moz-linear-gradient(center top, #ecad9a, #e5937c 25%, #cf4c2a 45%, #e5937c 85%, #ecad9a);
background: -webkit-gradient(linear, center top, center bottom, from(#ecad9a), color-stop(25%, #e5937c), color-stop(45%, #cf4c2a), color-stop(85%, #e5937c), to(#ecad9a));
}

This is code of the HTML part:

<div class="gradientbuttons">
<ul>
<li><a href="http://www.fokakmena.com">Home</a></li>
<li><a href="http://www.fokakmena.com/index.php/css-library/">CSS</a></li>
<li><a href="http://www.fokakmena.com/index.php/photoshop-resources/">PS</a></li>
<li><a href="http://www.fokakmena.com/index.php/javascript-codes/">JS</a></li>
<li><a href="http://www.fokakmena.com/index.php/tutorials/">TUTORIAL</a></li>
</ul>
</div>

<br />

<div class="gradientbuttons redtheme">
<ul>
<li><a href="http://www.fokakmena.com">Home</a></li>
<li><a href="http://www.fokakmena.com/index.php/css-library/">CSS</a></li>
<li><a href="http://www.fokakmena.com/index.php/photoshop-resources/">PS</a></li>
<li><a href="http://www.fokakmena.com/index.php/javascript-codes/">JS</a></li>
<li><a href="http://www.fokakmena.com/index.php/tutorials/">TUTORIAL</a></li>
</ul>
</div>

<br />

<div class="gradientbuttons greentheme">
<ul>
<li><a href="http://www.fokakmena.com">Home</a></li>
<li><a href="http://www.fokakmena.com/index.php/css-library/">CSS</a></li>
<li><a href="http://www.fokakmena.com/index.php/photoshop-resources/">PS</a></li>
<li><a href="http://www.fokakmena.com/index.php/javascript-codes/">JS</a></li>
<li><a href="http://www.fokakmena.com/index.php/tutorials/">TUTORIAL</a></li>
</ul>
</div>

<br />

<div class="gradientbuttons blacktheme">
<ul>
<li><a href="http://www.fokakmena.com">Home</a></li>
<li><a href="http://www.fokakmena.com/index.php/css-library/">CSS</a></li>
<li><a href="http://www.fokakmena.com/index.php/photoshop-resources/">PS</a></li>
<li><a href="http://www.fokakmena.com/index.php/javascript-codes/">JS</a></li>
<li><a href="http://www.fokakmena.com/index.php/tutorials/">TUTORIAL</a></li>
</ul>
</div>

<br />

<div class="gradientbuttons orangetheme">
<ul>
<li><a href="http://www.fokakmena.com">Home</a></li>
<li><a href="http://www.fokakmena.com/index.php/css-library/">CSS</a></li>
<li><a href="http://www.fokakmena.com/index.php/photoshop-resources/">PS</a></li>
<li><a href="http://www.fokakmena.com/index.php/javascript-codes/">JS</a></li>
<li><a href="http://www.fokakmena.com/index.php/tutorials/">TUTORIAL</a></li>
</ul>
</div>

CSS3 Text Shadows

This is mixed code, HTML & CSS:

<style type="text/css">
.now{font:64px Rockwell, Georgia, Verdana;text-transform: uppercase;}
</style>
	<p>Basic Shadow:</p>
    <div>
		<span class="now" style="font-size:40px;font-weight:bold;text-shadow: 5px 5px 0 #959595;">FokakMena.com</span>
	</div>
	<p>Blurred Shadow:</p>
    <div>
		<span class="now" style="font-size:40px;font-weight:bold;text-shadow: 5px 5px 7px #959595;">FokakMena.com</span>
	</div>
	<p>Shadow with text color set to match closely the document's background color:</p>
    <div>
		<span class="now" style="font-size:40px;font-weight:bold;text-shadow: 5px 5px 3px #414141;color: #f2f2f2;">FokakMena.com</span>
	</div>
	<p>Inset (aka Letterpress) Text Shadow:</p>
    <div>
		<span class="now" style="font-size:40px;font-weight:bold;text-shadow: 0 -2px 1px #8a8a8a;">FokakMena.com</span>
	</div>
	<p>Here's a more dramatic example done against a dark background:</p>
    <div>
		<span class="now" style="font-size:40px;font-weight:bold;text-shadow: 0 1px 2px #8a8a8a;;background:#494949;color:black;">FokakMena.com</span>
	</div>
	<p>Multiple, Simultaneous text Shadows:</p>
    <div>
		<span class="now" style="font-size:40px;font-weight:bold;text-shadow: 5px 5px 0 red, -5px -5px 0 orange;">FokakMena.com</span>
	</div>
	<p>3D looking Text Shadow:</p>
    <div>
		<span class="now" style="font-size:40px;font-weight:bold;color: #12c911;text-shadow: 1px 1px black, 2px 2px #149c14, 3px 3px #149c14, 4px 4px #149c14, 5px 5px #149c14, 6px 6px #149c14, 7px 7px #149c14, 8px 8px #149c14;">FokakMena.com</span>
	</div>
	<p>Glowing Text Shadow:</p>
    <div>
		<span class="now" style="font-size:40px;font-weight:bold;background:black;text-shadow: 0 0 5px #FFFFA0, 0 0 10px #FFFF4D, 0 0 15px #FFFF41, 0 0 20px #FFFF2A, 0 0 25px #FFFF2B, 0 0 30px #FEFE00, 0 0 35px #F7F700;">FokakMena.com</span>
	</div>

Slick CSS3 Buttons

This is the CSS part:

	body { background: #fff; }
	#container { width: 960px; margin: 0 auto; }
	p { margin: 50px 0; }

	.button { color: #fff; padding: 8px 14px 10px; background-color: #bc1815; border: none; margin-right: 25px; position: relative;;
		-webkit-user-select: none;
		-webkit-box-shadow: inset 0px -3px 1px rgba(0, 0, 0, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.25);
		-moz-box-shadow: inset 0px -3px 1px rgba(0, 0, 0, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.25);
		box-shadow: inset 0px -3px 1px rgba(0, 0, 0, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.25);
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		border-radius: 3px;
		-webkit-text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5);
		-moz-text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5);
		text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5);
			 }
	.button:active { position: relative; top: 3px;
	    -webkit-box-shadow: inset 0px -3px 1px rgba(255, 255, 255, 1), inset 0 0px 3px rgba(0, 0, 0, 0.9);
	    -moz-box-shadow: inset 0px -3px 1px rgba(255, 255, 255, 1), inset 0 0px 3px rgba(0, 0, 0, 0.9);
	    box-shadow: inset 0px -3px 1px rgba(255, 255, 255, 1), inset 0 0px 3px rgba(0, 0, 0, 0.9);
	}
	.button:active:after { content: ""; width: 100%; height: 3px; background: #fff; position: absolute; bottom: -1px; left: 0; }

	.button.blue { background: #22C3EB; }
	.button.green { background: #67b600; }
	.button.orange { background: #da8a00; }
	.button.yellow { background: #b3a400; }
	.button.turquoise { background: #00b1af; }

	.button:last-of-type { margin: 0; }

	.button.gradient {
		background-image: -webkit-gradient(
			linear,
			left bottom,
			left top,
			color-stop(0.1, rgba(0,0,0,0.3)),
			color-stop(1, rgba(255,255,255,0.2))
		);
		background-image: -moz-linear-gradient(
			center bottom,
			rgba(0,0,0,0.3) 1%,
			rgba(255,255,255,0.2) 100%
		);
		background-image: gradient(
			center bottom,
			rgba(0,0,0,0.3) 1%,
			rgba(255,255,255,0.2) 100%
		);
	}

	.button.gradient:hover {
		background-image: -webkit-gradient(
			linear,
			left bottom,
			left top,
			color-stop(0.1, rgba(0,0,0,0.45)),
			color-stop(1, rgba(255,255,255,0.3))
		);
		background-image: -moz-linear-gradient(
			center bottom,
			rgba(0,0,0,0.45) 1%,
			rgba(255,255,255,0.3) 100%
		);
		background-image: gradient(
			center bottom,
			rgba(0,0,0,0.45) 1%,
			rgba(255,255,255,0.3) 100%
		);
	}

This is the HTML part:

    <div>
        <a href="#" class="button">Press me!</a>
        <a href="#" class="button blue">Press me!</a>
        <a href="#" class="button green">Press me!</a>
        <a href="#" class="button orange">Press me!</a>
        <a href="#" class="button yellow">Press me!</a>
        <a href="#" class="button turquoise">Press me!</a>
	</div>

	<p>With gradient overlay:</p>

    <div>
        <a href="#" class="button gradient">Press me!</a>
        <a href="#" class="button blue gradient">Press me!</a>
        <a href="#" class="button green gradient">Press me!</a>
        <a href="#" class="button orange gradient">Press me!</a>
        <a href="#" class="button yellow gradient">Press me!</a>
        <a href="#" class="button turquoise gradient">Press me!</a>
	</div>

This is a simple Clock with a black background “LCD”

Copy this code in head area:

<style type="text/css">
.styling{
background-color:black;
color:lime;
font: bold 15px MS Sans Serif;
padding: 3px;
}
</style>

Copy this code in body area:

<div align="center" dir="ltr">
<span id="digitalclock" class="styling"></span>
<script>
<!--

var alternate=0
var standardbrowser=!document.all&&!document.getElementById

if (standardbrowser)
document.write('<form name="tick"><input type="text" name="tock" size="6"/>')

function show(){
if (!standardbrowser)
var clockobj=document.getElementById? document.getElementById("digitalclock") : document.all.digitalclock
var Digital=new Date()
var hours=Digital.getHours()
var minutes=Digital.getMinutes()
var dn="AM"

if (hours==12) dn="PM"
if (hours>12){
dn="PM"
hours=hours-12
}
if (hours==0) hours=12
if (hours.toString().length==1)
hours="0"+hours
if (minutes< =9)
minutes="0"+minutes

if (standardbrowser){
if (alternate==0)
document.tick.tock.value=hours+" : "+minutes+" "+dn
else
document.tick.tock.value=hours+"   "+minutes+" "+dn
}
else{
if (alternate==0)
clockobj.innerHTML=hours+"<font color='lime'> : "+minutes+" "+"<sup style='font-size:1px'>"+dn+"</sup>"
else
clockobj.innerHTML=hours+"<font color='black'> : </font>"+minutes+" "+"<sup style='font-size:1px'>"+dn+"</sup>"
}
alternate=(alternate==0)? 1 : 0
setTimeout("show()",1000)
}
window.onload=show

//-->
</script>
</div>

An interesting CSS trick is the creation of “circles”, by using CSS3′s border-radius property that’s set to a very large value: When you do this, the border on each of the four corners of the element merge into a continuous round edge, creating the look of a circle. Using this nifty little trick.

The key as mentioned is just to set the border-radius property to a very large value, at least 50% of both the width and height of the element:

width:100px;
height:100px;
border-radius: 400px; /*really large border radius to create round borders*/
-moz-border-radius: 400px;
-webkit-border-radius: 400px;

This technique works in all browsers that support CSS3′s border-radius property, namely, IE9+, FF3+, Safari, Chrome, and Opera 9+.
The CSS:

/*Credits: Dynamic Drive CSS Library */

.circlemenu{
width: 100%;
overflow:hidden;
}

.circlemenu ul{
margin: 0;
padding: 0;
font: bold 14px Verdana;
list-style-type: none;
text-align: center; /* "left", "center", or "right" align menu */
}

.circlemenu li{
display: inline;
margin: 0;
}

.circlemenu li a{
display:inline-block;
text-align:center;
text-decoration: none;
color: white;
background:#b72d23;
margin: 0;
margin-right:5px; /*right spacing between each link */
width:100px;
height:100px;
border-radius: 400px; /*really large border radius to create round borders*/
-moz-border-radius: 400px;
-webkit-border-radius: 400px;
}

.circlemenu a span{
position:relative;
top:40%;
}

.circlemenu li a:visited{
color: white;
}

.circlemenu a:hover{
background: #a71b15;
}

The HTML:

<div>
<ul>
<li><a href="#"><span>Link 1</span></a></li>
<li><a href="#"><span>Link 2</span></a></li>
<li><a href="#"><span>Link 3</span></a></li>
<li><a href="#"><span>Link 4</span></a></li>
<li><a href="#"><span>Link 5</span></a></li>
</ul>
</div>