CSS Tips & Tricks (3)

CSS Rollovers without preload

Here is a link whose text is replaced by image:

• History
• Symbols

The images for these rollover links:

Think about it, why do we need put the images for the a:link and a:hover in the same image file?

The HTML for the rollover link:

<ul id="cssrollover">
	<li><a id="history" href="#">History</a></li>
	<li><a id="symbols" href="#">Symbols</a></li>
</ul>

The CSS for the rollover link:

ul#cssrollover{
	list-style: none;
}

ul#cssrollover li {
	width:203px;
	height: 36px;
	display: block;
	text-indent: -9999px;
	overflow: hidden;
}

ul#cssrollover li a:link,
ul#cssrollover li a:visited{
	display: block;
	width:203px;
	height: 36px;
}

ul#cssrollover li a:hover{
	text-decoration: none;
}

ul#cssrollover a#history:link,
ul#cssrollover a#history:visited{
	display: block;
	background: url(cssimages/history.gif) no-repeat top right;
}

ul#cssrollover a#history:hover{
	display: block;
	background: url(cssimages/history.gif) no-repeat 0px -36px;
}

ul#cssrollover a#symbols:link,
ul#cssrollover a#symbols:visited{
	display: block;
	background: url(cssimages/symbols.gif) no-repeat top right;
}

ul#cssrollover a#symbols:hover{
	display: block;
	background: url(cssimages/symbols.gif) no-repeat 0px -36px;
}

A Pinned-down Menu

You must have noticed the menu on the right, it will always stay at the fixed position of the browser screen. It's called a pinned-down menu. Here is the HTML for the pinned-down menu in this page:

<div class="banner">
	<p>
		<a href="#">Forms</a>
		<a href="#">Centering</a>
		<a href="#">Stylesheets</a>
		<a href="#">Pinned-down</a>
		<a href="#">Fluid Layout</a>
		<a href="#">Drop Shadows</a>
		<a href="#">Rounded Corners</a>
		<a href="#">Shadowed Boxe</a>
		<a href="#">Tabbed Interface</a>
	</p>
</div>

Here is the CSS for the pinned-down menu:

div.banner {
	font-size: 0.8em;
	text-align: center;
	position: fixed;
	top: 20px;
	left: auto;
	right: 20px;
	width: 140px;
}
div.banner p {
	background: #900;
}
div.banner a{ 
	display: block;
	margin: 0 0.5em;
	border-top: 2px groove #900
}
div.banner a:first-child { border-top: none }
div.banner a:link, div.banner a:visited { 
	text-decoration: none;
	color: #fff;
}
div.banner a:hover {
	background: #000;
	color: white;
}

It shouldn't be hard for you to figure out how to implement the pinned-down bannder on the left. It's just a background image used fixed positioning.

body {
	background:  #333 url(cssimages/cs134.gif) top left fixed no-repeat;
	...
}

Rounded Corners

Take a look at the following block of text whose background has rounded corners:

The HTML for the this rounder cornered block with text:

<div class="round_box">
	<div class="round_top"><div></div></div>
	<div class="round_content">
		<p>Styles sheets define HOW HTML ... single CSS document!</p>
	</div>
	<div class="round_bottom"><div></div></div>
</div>

The CSS for the this rounder cornered block with text:

.round_box {
   background: #fff6c0;
}
.round_top {
   background: url(css/cssimages/corner_tr.gif) no-repeat top right;
}
.round_top div {
	background: url(css/cssimages/corner_tl.gif) no-repeat top left;
}
.round_bottom {
   background: url(css/cssimages/corner_br.gif) no-repeat bottom right;
}
.round_bottom div {
   background: url(css/cssimages/corner_bl.gif) no-repeat bottom left;
}

.round_top, .round_top div, 
.round_bottom, .round_bottom div {
   width: 100%;
   height: 20px;
}
.round_content { 
	margin: 0 20px; 
}

A Tabbed Interface (Sliding Doors Technique)

item 1 item 2 item 3 clear

The HTML for the tabbed interface above is:

<p>
	<a href="#item1">item 1</a>
	<a href="#item2">item 2</a>
	<a href="#item3">item 3</a>
	<a href="#default">clear</a>
</p>
<div class="items">
	<p id="item1">... item 1...</p>
	<p id="item2">... item 2...</p>
	<p id="item3">...</p>
	<p id="default"></p>
</div>

The CSS for the tabbed interface above is:

div.items p {display: none}
div.items p:target {display: block}

 

©2007 Mehmud Abliz