microsoft.com Home   All Products  |   Support  |   Search  |   microsoft.com Home  
Microsoft

Microsoft Typography | Typography on the Web | Specifying... | Demo 1 | explanation next


Demo 1 explanation


How the SpaceGUN page was created

The SpaceGUN page is posted in section one of the Microsoft Typography CSS Gallery. It was designed as a demonstration of CSS for Microsoft's WWWLive conference in July 1996.

The page contains four basic elements: the masthead, a tag line, subheadings which relate to articles in the magazine, and short descriptions of those articles. The first three of these elements use the negative margin technique to achieve different layering effects.


The masthead

The masthead is made up of five offset layers of the phrase 'SpaceGUN Magazine'. Within the BODY of the HTML file the following code was used; 

<BODY> 
<DIV ALIGN=CENTER CLASS=layer1>SpaceGUN</DIV>
<DIV ALIGN=CENTER CLASS=layer2>SpaceGUN</DIV>
<DIV ALIGN=CENTER CLASS=layer3>SpaceGUN</DIV>
<DIV ALIGN=CENTER CLASS=layer4>SpaceGUN</DIV>
<DIV ALIGN=CENTER CLASS=layer5>SpaceGUN</DIV>

The attributes for each layer were defined in a STYLE section within the HEAD of the HTML file. 

<HTML>
<HEAD>
<TITLE>SpaceGun Magazine</TITLE>
<STYLE>

.layer1 { color: black; 
	font-size: 150px;
	line-height: 183px;
	font-family: Impact; }
.layer2 { color: black; 
	margin-top: -163px; 
	margin-left: -60px;	
	font-size: 150px; 	
	line-height: 183px;
	font-family: Impact; }
.layer3 { color: white; 
	margin-top: -190px;
	margin-left: -20px; 
	font-size: 150px; 
	line-height: 183px;
	font-family: Impact; }
.layer4 { color: white; 
	margin-top: -183px; 
	margin-left: -40px; 
	line-height: 183px;
	font-size: 150px; 	
	font-family: Impact; }
.layer5 { color: red; 
	margin-top: -190px;
	margin-left: -30px;	
	line-height: 183px;
	font-size: 150px; 
	font-family: Impact; }
</STYLE>
</HEAD>
<BODY>

The key to the layout is the margin-top and margin-left elements. The margin-top elements have a negative value. This is what causes subsequent 'SpaceGUN's to be placed on top of the previous layer. The margin-left values are used to shift some of the layers horizontally. The values for the margin-left and margin-top were arrived at through experimentation.

These styles were then reused for the word 'Magazine'. 

<DIV ALIGN=CENTER CLASS=layer1>Magazine</DIV>
<DIV ALIGN=CENTER CLASS=layer2>Magazine</DIV>
<DIV ALIGN=CENTER CLASS=layer3>Magazine</DIV>
<DIV ALIGN=CENTER CLASS=layer4>Magazine</DIV>
<DIV ALIGN=CENTER CLASS=layer5>Magazine</DIV>


The tag line

For the tag line the fact that Courier New is a fixed-pitch font is used to ensure that layers don't collide. Here a margin-top with a negative value is used to achieve a slight vertical offset. The phrase 'MUSiC ~ VIDEO ~ sPoRt ~ fAsHIon' was split in two so that every second character will appear on a different line. 

 U i  ~  I E  ~  P R  ~  A H o 

M S C ~ V D O ~ s o t ~ f s I n

As multiple spaces would be collapsed down to a single space, non breaking spaces (&nbsp;) were used as required. 

<DIV CLASS=tag1><B>U i 
&nbsp;~&nbsp;  I E &nbsp;~&nbsp; P R 
&nbsp;~&nbsp;  A H 
o</B></DIV>

<DIV CLASS=tag2><B>M S C ~ V D 
O ~ s o t ~ f  s I n</B></DIV>

Within the STYLE section properties and values are assigned to the new style classes, tag1 and tag2. 

.tag1 { color: white; 
	margin-top: 50px; 
	font-size: 30px; 
	font-family: Courier New }
.tag2 { color: black; 
	margin-top: -37px; 
	font-size: 30px; 
	font-family: Courier New }


The subheadings

The subheads work in exactly the same way. However here slight text variations for each headline are used. 

<DIV CLASS=subh1>~Music & politics
of Africa...</DIV>
<DIV CLASS=subh2>~Music & politics...</DIV>
<DIV CLASS=subh3>~Music...</DIV>

Within the STYLE section properties are assigned to the new style classes; subh1, subh2 and subh3. 

.subh1 { color: black; 
	margin-top: 20px; 
	margin-left: 10px; 
	font-size: 50px; 
	font-family: Impact }
.subh2 { color: white; 
	margin-top: -70px; 
	margin-left: 15px; 
	font-size: 50px; 
	font-family: Impact }
.subh3 { color: red; 
	margin-top: -60px; 
	margin-left: 20px; 
	font-size: 50px; 
	font-family: Impact }


The description text

The description text is placed under the subheading the page. 

<DIV CLASS=description>
in this weeks issue an interview with the 
'Godsister of Funk' <A HREF="/
cssguide/default.htm">Miranda 
Hong-Kong-Bank</A> + a round up 
of all the <A HREF="/cssguide/
default.htm">new releases!
</A>, including the latest CD 
from KLINGON DEATHRAY! </DIV>

Properties are assigned to the description style class. 

.description { color: white; 
	margin-left: 60px; 
	margin-right: 100px; 
	font-size: 18px; 
	font-weight: bold; 
	line-height: 140%; 
	margin-top: 5px; 
	font-family: Courier New }

Additional subheadings and descriptions are as required, all taking their properties from the styles previously defined.


Final bits and pieces.

A background color for the page is assigned. 

BODY { background: darkorange }

Since the page will break if the window is too narrow it is placed in a fixed width table. 

<CENTER>
<TABLE WIDTH=720 
     CELLPADDING=0 CELLSPACING=0 BORDER=0>
<TR>
<TD>

</TD>
</TR>
</TABLE>
</CENTER>

The properties of the text used to indicate hypertext links are defined. The 'text-decoration: none' property is used to turn off link underlining. 

A:link { text-decoration: none; 
	color: black }


Making the page look better in non-css browsers

The layered masthead
By enclosing the five layers with <FONT SIZE=0 COLOR=#FFFFFF> these layers can be made invisible in non-CSS browsers, because this markup will be ignored by CSS-enabled browsers. 

<FONT SIZE=0 COLOR=#FFFFFF> 
<DIV STYLE="color: orange; font-size: 24pt>
This text will be invisible in non-CSS browsers 
</DIV>
</FONT>



this page was last updated 30 June 1997
© 1997 Microsoft Corporation. All rights reserved. Terms of use.
comments to the MST group: how to contact us

 

Microsoft Typography | Typography on the Web | Specifying fonts... | Demo 1 | explanation next