CSS Effects

An assortment of CSS effects demonstrating menus, dynamically expanding boxes, tabs and more.

Tube Station List HTML

<div id="tube_station">
	<ul>
	<li><a href="#stop1"><span class="bullet">•</span><span class="stops">Stop 1</span></a></li>
	<li><a href="#stop2"><span class="bullet">•</span><span class="stops">Stop 2</span></a></li>
	<li><a href="#stop3"><span class="bullet">•</span><span class="stops">Stop 3</span></a></li>
	<li><a href="#stop4"><span class="bullet">•</span><span class="stops">Stop 4</span></a></li>
	</ul>
</div><!--end tube_station-->

Tube Station List CSS

#tube_station{
	width: 80%;/*safari and konqueror*/
	clear: both;
	margin: 0% auto 1% auto;
}
#tube_station ul{
	list-style-type: none;
}
#tube_station ul li{
	float: left;
	display: inline;
	height: 3em;
	padding: 0 0 0 3em;
	background: url("images/line.png") repeat-x 0% 41%;
}
#tube_station .stops{
	position: relative; top: 1em; left: -2.75em;
	font-size: 85%;
}
#tube_station .bullet{
	font-size: 150%;
}
#tube_station a{
	text-decoration: none;
}

Back to contents.

Drop Shadow Effect

Using CSS to create a drop shadow effect.

Drop Shadow HTML

<div class="outer">
	<div class="inner">
		<p>Content in here</p>
	</div><!--end inner-->
</div><!--end outer-->

Drop Shadow CSS

.outer{
	border: 1px solid rgb(150,150,150);
	background: url("box-background.png") repeat-x 0% 0%;
	background-color: rgb(238,238,238);
}

.inner{
	position: relative; top: 3px; left: 3px;
	padding: 1%;
	border-right: 2px solid rgb(220,220,220);
	border-bottom: 2px solid rgb(180,180,180);
}

Back to contents.

Back to contents.

Rounded Button HTML

<div class="tab_container">
<div class="button_left"></div>
<div class="middle"><h2><a href="#">Rounded Button</a></h2></div>
<div class="button_right"></div>
</div>

Rounded Button CSS

.tab_container{
	float: left;
	clear: both;
	width: 100%;
}
.button_left {
	float : left;
	width: 16px;
	height: 32px;
	background : url("tab_left.png") no-repeat 0% 0%;
}
.middle {
	float : left;
	height : 32px;
	padding-top : 0.25em;
	text-align : center;
	background : url("tab_middle.png") repeat-x 0% 0%;
}
.button_right {
	float : left;
	width: 16px;
	height: 32px;
	margin : 0 0.25em 0 0;
	background : url("tab_right.png") no-repeat 100% 0%;
}
.middle h2{
	font-size: 90%;
	text-shadow: rgba(0,0,50, 0.9) -1px -1px 0;
/*shadow color opacity, horizontal, vertical, blur*/
}
.middle h2 a{
	text-decoration: none;
	color: rgb(245,245,245);
}
.middle h2 a:hover{
	color: rgb(211,185,255);
}

Back to contents.

Home