Mobile Friendly Website

CSSPLAY

Doing it with style

BOXESMore snazzy borders

Date : 22nd July 2006

For all browsers



The snazzy border container


This is the outer snazzy box containing the three snazzy boxes below.


Blah Blah Title

You are not currently logged in.

If you don't have a login you can register here.

If you have one, then LOGIN here.

If you don't know if you should have one - and need convincing that free, confidential, fast and useful is not enough then click here for a demo.

Blah Blah Title

You are not currently logged in.

If you don't have a login you can register here.

If you have one, then LOGIN here.

If you don't know if you should have one - and need convincing that free, confidential, fast and useful is not enough then click here for a demo.

Blah Blah Title

You are not currently logged in.

If you don't have a login you can register here.

If you have one, then LOGIN here.

If you don't know if you should have one - and need convincing that free, confidential, fast and useful is not enough then click here for a demo.


The end



Information

This is a continuation of the Snazzy borders theme and is based on a request by Mark Haller for a Snazzy border box with a coloured heading that can be easily styled in different colours.

The color change is held in a separate background class style for each color which is then combined with the standard snazzy box style.

The result is that you can combine the standard style and the background color style to give the required look.

This can be used for any number of different color combinations.

Code

<div class="xsnazzy">
<b class="xtop"><b class="xb1"></b><b class="xb2 color_a">
</b><b class="xb3 color_a"></b><b class="xb4 color_a"></b></b>
<div class="xboxcontent">
<h1 class="color_a">Blah Blah Title</h1>
<p>You are not currently logged in.</p>
<p>If you don't have a login you can 
<a href="#nogo">register here</a>.</p>
<p>If you have one, then LOGIN <a href="#nogo">here</a>.</p>
<p>If you don't know if you should have one - and need convincing 
that free, confidential, fast and useful is not enough then click 
<a href="#nogo">here for a demo</a>.</p>
</div>
<b class="xbottom"><b class="xb4"></b><b class="xb3"></b>
<b class="xb2"></b><b class="xb1"></b></b>
</div>

Cascading Style Sheet

.zsnazzy {width:740px; margin:0 0 100px 5px;}
.xsnazzy h1, .zsnazzy h1 {
	margin:0; 
	font-size:1.2em; 
	padding:0 10px 5px 10px; 
	border-bottom:1px solid #444;
	}
	.xsnazzy p, .zsnazzy p {
	margin:0; 
	padding:5px 10px; 
	font-size:10px;
	}
	.xsnazzy {
	background: transparent; 
	width:240px; 
	float:left; 
	margin:0 3px;
	}

	.xtop, .xbottom {
	display:block; 
	background:transparent; 
	font-size:1px;
	}
	.xb1, .xb2, .xb3, .xb4 {
	display:block; 
	overflow:hidden;
	}
	.xb1, .xb2, .xb3 {
	height:1px;
	}
	.xb2, .xb3, .xb4 {
	background:#fff; 
	border-left:1px solid #444;
	border-right:1px solid #444;
	}
	.xb1 {
	margin:0 5px; 
	background:#444;
	}
	.xb2 {
	margin:0 3px;
	border-width:0 2px;
	}
	.xb3 {
	margin:0 2px;
	}
	.xb4 {
	height:2px; 
	margin:0 1px;
	}

	.xboxcontent {
	display:block; 
	border:0 solid #444; 
	border-width:0 1px; 
	height:auto;
	}
	* html .xboxcontent {
	height:1px;
	}

	.color_a {
	background:#c9ba65;
	color:#fff;
	}
	.color_b {
	background:#d4d8bd; 
	color:#000;
	}
	.color_c {
	background:#758279; 
	color:#fff;
	}
	.color_d {
	background:#b2ab9b; 
	color:#000;
	}


If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced. Please email me for more information.

Support CSSPLAY

Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.


CUSTOM SEARCH

Facebook Twitter rss feed Facebook Fan Page