Posted By

sspitler01 on 10/16/09

Tagged

css
google

Versions (?)

Last Edited at 10/16/09 11:59pm

Statistics

Viewed 505 times

Favorited by 0 user(s)

Related snippets

google analytics buttons

/ Published in: CSS

Highlighted TextExpand

<!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>

<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>

<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>

</body>
</html>

URL: http://www.askthecssguy.com/examples/notchedcorners/index.html

Report this snippet Tweet