Advanced Search

Return to Snippet

Revision: 19200
at October 16, 2009 23:59 by sspitler01
Initial Code 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<title>google analytics buttons</title>
<style type="text/css">
/* default stuff */
body {padding:20px; font-family:arial; text-align:center;}
p, li {font-size: 12px; line-height:18px;}
h3 {margin-bottom:6px;}
.examplesGoHere {text-align:left; margin:0 auto; }
.letsGiveItAFixedWidthOf200Pixels { width:200px; }
ul {list-style:none;margin-left:0;padding-left:0;margin-top:0;}
ul li {margin-bottom:8px; margin-left:0;padding-left:0; }



/* notched effect for links in the unordered list */
.notchedListItems a {
	display:block;
	border: solid #666;
	border-width: 0 1px;
	text-decoration: none;
	outline:none;
	color: #000;
	background: #e4e4e4;
}
.notchedListItems a b {
	display: block;
	position:relative;
	top: -1px;
	left: 0;
	border:solid #666;
	border-width:1px 0 0;
	font-weight:normal;
}
.notchedListItems a b b {
  border-width:0 0 1px;
  top: 2px;
  padding:1px 6px;
}
.notchedListItems a:hover,
.notchedListItems a:hover b {background:#666;color:white;}



.feature {
	border:solid #647aae;
 	border-width:0 1px;
	background:#b0c0e6;
}
.feature div {
  position:relative;
  top: -1px;
  left: 0;
  border:solid #647aae;
  border-width:1px 0 0;
}
.feature div div {
	top: 2px;
	border-width:0 0 1px;
	padding: .3em .3em .1em;
}
</style>
</head>
<body>

<div class="examplesGoHere letsGiveItAFixedWidthOf200Pixels">

	<h3>A list</h3>

	<ul class="notchedListItems">
		<li><a href="#"><b><b>About</b></b></a></li>
		<li><a href="#"><b><b>Contact</b></b></a></li>
		<li><a href="#"><b><b>Buy Pie</b></b></a></li>
	</ul>


	<h3>A div</h3>

	<div class="feature">
		<div>
			<div>
				<p>This is an example of the notched corners as applied to a div container.</p>
				<p>This is an example of the notched corners as applied to a div container.</p>
				<p>This is an example of the notched corners as applied to a div container.</p>
			</div>

		</div>
	</div>




</div><!-- end .examplesGoHere -->






</body>
</html>
Initial URL 
http://www.askthecssguy.com/examples/notchedcorners/index.html
Initial Description 









Initial Title





google analytics buttons









Initial Tags





css, google









Initial Language





CSS