CSS Effects

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

Tube Station List Menu

•Tube Station
•Drop Shadow
•Zen Corners
•Rounded Button

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.

Using css to place corner images in a box layout and remain scalable, cross device and browser compatable. The box expands dynamically with the content.

Zen Corners HTML


<div id="top">
	<div id="topleft">
	</div><!--end topleft-->
	<div id="topright">
	</div><!--end topright-->
	<div id="header">
		<h1>Zen Corners</h1>
	</div><!--end header-->
</div><!--end top-->
<div id="right">
<div id="left">
	<div id="zen_content">

		<p>Content in here.</p>

	</div><!--end zen_content-->
</div><!--end right-->
</div><!--end left-->
<div id="bottom">
	<div id="bottomleft">
	</div><!--end bottomleft-->
	<div id="bottomright">
	</div><!--end bottomright-->
	<div id="footer">
		<h2>Footer</h2>
	</div><!--end footer-->
</div><!--end bottom-->

Zen Corners CSS

#top{
	clear: both;
	width: 100%;
	height: 80px;
	background: url("flourish_horizontal.png") repeat-x 0% 0%;
	/*Corner images from http://openclipart.org/*/
}
#topleft{
	float: left;
	width: 80px;
	height: 80px;
	background: rgb(255,255,255) url("flourish_uleft.png") no-repeat 0% 0%;
	/*background color for the corners hide the horizontal graphics*/
}
#header{
	text-align: center;
	padding-top: 1%;
	margin: 0 auto 0 auto;
}
#header h1{
	font-size: 120%;
}
#topright{
	float: right;
	width: 80px;
	height: 80px;
	background: rgb(255,255,255) url("flourish_uright.png") no-repeat 100% 0%;
}
/*-------------------------middle and content-------------------------*/
#zen_content{
	padding: 0 1em 0 1em;
}
#left{
	float: left;
	width: 100%;
	background: url("flourish_vertical.png") repeat-y 0% 0%;
}
#right{
	float:right;
	width: 100%;
	background: url("flourish_vertical.png") repeat-y 100% 0%;
}
/*-------------------------bottom-------------------------*/
#bottom{
	clear: both;
	width: 100%;
	height: 80px;/*height should be the same as the bottom corner height*/
	background: url("flourish_horizontal.png") repeat-x 0% 100%;
}
#footer{
	text-align: center;
	padding-top: 2%;
	margin: 0 auto 0 auto;
}
#footer h1{
	font-size: 120%;
}
#bottomleft{
	float: left;
	width: 80px;
	height: 80px;
	background: rgb(255,255,255) url("flourish_bleft.png") no-repeat 0% 100%;
}
#bottomright{
	float: right;
	width: 80px;
	height: 80px;
	background: rgb(255,255,255) url("flourish_bright.png") no-repeat 100% 100%;
}

Back to contents.

Rounded Button

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