Home | S M O | Web 2.0 | BackLinks | RSS News

Web Elements

Confetti Menu

The colorful menu you see below is simply a DIV element with a few P elements inside. The visual effect is due to the fact that each P element is positioned individually and has its own font and color. It works best with short texts, because the visual effect is based on overlap.

The HTML Source Code:

Note the class "map" on the DIV element, which makes it into a container for the menu, and the ID attributes on the Ps. The P elements must each have a (different) ID, called p1, p2,... or p10. It is not necessary to use the IDs in order (as the example shows).

The CSS Source Code:

DIV.map {                     
  padding-top: 120px;
  margin-left: 1em;    
  margin-right: 1em;  
  margin-bottom: 2em;
  margin-top: 5em;
  clear: both;
  text-shadow: 0.2em 0.2em /* 0.2em */ silver }

#p1, #p2, #p3, #p4, #p5, #p6, #p7, #p8, #p9, #p10 {
  white-space: nowrap }
#p1, #p2, #p3, #p4, #p5, #p6, #p7, #p8, #p9, #p10 {
  text-indent: 0 }
#p1 A, #p2 A, #p3 A, #p4 A, #p5 A, #p6 A, #p7 A, #p8 A, #p9 A, #p10 A {
  text-decoration: none }

#p1, #p1 A   {color: #DDD; font: 100px/1 Impact, Helvetica Narrow, sans-serif}
#p2, #p2 A   {color: #000; font: italic 40px/1 "Georgia", serif}
#p3, #p3 A   {color: #080; font: 40px/1 "Verdana", sans-serif}
#p4, #p4 A   {color: #37F; font: bold 40px/1 Courier New, Courier, monospace}
#p5, #p5 A   {color: #F73; font: bold 100px/1 "Verdana", sans-serif}
#p6, #p6 A   {color: #22A; font: bold 25px/1 "Verdana", sans-serif}
#p7, #p7 A   {color: #088; font: italic 80px/1 "Verdana", sans-serif}
#p8, #p8 A   {color: #088; font: italic 30px/1 "Georgia", serif}
#p9, #p9 A   {color: #088; font: italic 30px/1 "Georgia", serif}
#p10, #p10 A {color: #F73; font: bold 60px/1 "Verdana", sans-serif}

#p1  {text-align: right;  margin: -165px 0 85px 0}    /* top right */
#p2  {text-align: left;   margin: -190px 0 150px 5%}  /* top left */
#p3  {text-align: right;  margin: -100px 35% 40px 0}   /* center */
#p4  {text-align: right;  margin: -95px 0 55px 0}     /* center right */
#p5  {text-align: left;   margin: -130px 0 30px 0}    /* center left */
#p6  {text-align: left;   margin: -40px 0 15px 35%}   /* bottom center */
#p7  {text-align: right;  margin: -80px 0 0px 0}      /* bottom right */
#p8  {text-align: left;   margin: -40px 0 20px 3%}    /* bottom left */
#p9  {text-align: right;  margin: -55px 0 5px 0}      /* bottom right */
#p10 {text-align: left;   margin: -120px 0 70px 0}    /* center left */

The style sheet starts by defining a DIV element with class "map". It creates a 120px high space into which the contents of the P elements will be placed. Each of the elements with IDs p1 to p10 is then given a color and a font, and each element is positioned inside the space created by the DIV by means of the 'margin' property: a negative top margin moves the element up into the DIV space and a positive bottom margin makes sure the next element starts again at the bottom of the DIV.

Create Web Pages

A web page needs standardized text called HTML, create or read by any normal text editors like Windows Notepad or Notepad++. Name it whatever title fits, but make sure it has the extension of .html. Every web page consists of 2 essential parts, the head part and the body part, which, are indicated respectively by the <head> tag and the <body> tag.

EXAMPLE:

<html>
<head>
<title>The Web Page Title</title>
</head>
<body>
<h1>The EXAMPLE Reloaded</h1>
<p>I have an EXAMPLE.</p>
<h2>Masterpieces</h2>
<p>This is a Masterpiece.</p>
<h2>Diddle doodles</h2>
<p>He once diddled while he was working.</p>
<h2>Donkey heehaws</h2>
<p>And he seemed quite satisfied with his masterpiece.</p>
</body>
</html>

<html> : indicates web page is a HTML file, or static web page, and things followed or embraced in it are HTMLized (HTML tagged) content.
<head> : makes room for the head section of a HTML file.
<body> : makes room for the body section of a HTML file.
<title> : indicates title of the page that is displayed on the caption of the browser window.
<h1> : means Header 1, or 1st header or headline that governs overall story of the page.
<h2> : means Header 2, or the 2nd header that governs part of the overall story of the page. 4 more headers, namely h3, h4, h5, h6. Well-structured web pages cannot go without them.
<p> : indicates a paragraph, the main text flow should go in here. Web pages live with content and content goes in <p> - the essence of every web page.

Browsers render 2 paragraphs wider apart than they do with 2 lines within one paragraph.

Essential Tag Elements

None of the tags have the privilege to go without a corresponding closing tag. E.g. Every <p> has to end with a </p>. Every tag in a web page closes in this manner, that is:

Wherein ellipsis are the placeholders of text content in between them.

Certain tags can only be placed in certain tags. E.g. <title> tag can only be positioned within the <head> section, and either an error occurs or things don’t go as expected if you put it in the <body> section. It’s the same with <hx> and <p>, they are never supposed to appear in the <head> section.

Font Family

For “Font Family” you can specify an actual font name, like “Courier New” in the custom field. If the name has spaces, you should quote it, and it is case-insensitive. You can specify a comma-separated list of font names, which will be used in the order listed when some are not found on the user's system. Designers should use the most desired font first, the most compatible font second-to-last, and the generic font family last and always. For example, a common font-family value is “Verdana”, “Arial”, sans-serif.

13 Fonts Installed on Both PC and Mac Considered as “Safe”

The common “Web Safe” fonts for CSS Typography:
Windows font | Mac font | Font family

Arial, Arial, Helvetica, sans-serif
Arial Black, Arial Black, Gadget, sans-serif
Comic Sans MS, Comic Sans MS, cursive
Courier New, Courier New, Courier, monospace
Georgia, Georgia, serif
Impact, Impact, Charcoal, sans-serif
Tahoma, Geneva, sans-serif
Times New Roman, Times, serif
Trebuchet MS, Helvetica, sans-serif
Verdana, Verdana, Geneva, sans-serif

“Safe” to Use in Cross-platform and Cross-browser CSS Typography:
Windows font | Mac font | Font family

Lucida Console, Monaco, monospace
Lucida Sans Unicode, Lucida Grande, sans-serif
Palatino Linotype, Book Antiqua, Palatino, serif

List of Fonts

academy engraved let
algerian
amaze
arial
arial black
balthazar
bankgothic lt bt
bart
bimini
comic sans ms
book antiqua
bookman old style
braggadocio
britannic bold
brush script mt
century gothic
century schoolbook
chasm
chicago
colonna mt
comic sans ms
commercialscript bt
coolsville
courier
courier new
cursive
dayton
desdemona
fantasy
flat brush
footlight mt light
futurablack bt
futuralight bt
garamond
gaze
geneva
georgia
geotype tt
(*above: Geotype TT)

helterskelter
helvetica
herman
highlight let
impact
jester
joan
john handy let
jokerman let
kelt
kids
kino mt
la bamba let
lithograph
lucida console
map symbols
marlett
(*above: Marlett)
matteroffact
matisse itc
matura mt script capitals
mekanik let
(*above: mekanik let)
monaco
monospace
monotype sorts
ms linedraw
new york
olddreadfulno7 bt
(*above: OldDreadfulNo7 BT)
orange let
palatino
playbill
pump demi bold let
puppylike
roland
sans-serif
scripts

scruff let
serif
short hand
signs normal
(*above: Signs Normal)
simplex
simpson
stylus bt
superfrench
surfer
swis721 bt
swis721 blkoul bt
symap
(*above: Symap)
symbol
(*above: symbol)
tahoma
technic
tempus sans itc
terk
times
times new roman
trebuchet ms
trendy
txt
verdana
victorian let
vineta bt
vivian
webdings
(*above: Webdings)
wingdings
(*above: Wingdings)
western
westminster
westwood let
(*above: Westwood LET)
wide latin
zapfellipt bt

CSS Reference

Property	Description	Values
font	Setting all of the properties for a font	font-style font-variant font-weight font-size/line-height font-family caption icon menu message-box small-caption status-bar
font-family	A prioritized list of font family names and/or generic family names for an element	family-name generic-family
font-size	Sets the size of a font	xx-small x-small small medium large x-large xx-large smaller larger length %
font-style	Sets the style of the font	normal italic oblique
font-weight	Sets the weight of a font	normal bold bolder lighter 100 200 300 400 500 600 700 800 900
padding	Setting all of the padding properties	padding-top padding-right padding-bottom padding-left
border	Setting all of the properties for the four borders	border-width border-style border-color
border-collapse	Sets whether the table borders are collapsed into a single border or detached as in standard HTML	collapse separate
line-height	Sets the distance between lines	normal number length %
letter-spacing	Increase or decrease the space between characters	normal length
text-align	Aligns the text in an element	left right center justify
text-decoration	Adds decoration to text	none underline overline line-through blink
float	Sets where an image or a text will appear in another element	left right none
clear	Sets the sides of an element where other floating elements are not allowed	left right both none
background	Setting all background properties	background-color background-image background-repeat background-attachment background-position
outline	Setting all the outline properties	outline-color outline-style outline-width
outline-style	Sets the style of the outline around an element	none dotted dashed solid double groove ridge inset outset
content	Generates content in a document. Used with the :before and :after pseudo-elements	string url counter(name) counter(name, list-style-type) counters(name, string) counters(name, string, list-style-type) attr(X) open-quote close-quote no-open-quote no-close-quote
list-style	Setting all of the properties for a list	list-style-type list-style-position list-style-image
list-style-type	Sets the type of the list-item marker	none disc circle square decimal decimal-leading-zero lower-roman upper-roman lower-alpha upper-alpha lower-greek lower-latin upper-latin hebrew armenian georgian cjk-ideographic hiragana katakana hiragana-iroha katakana-iroha
margin	Setting the margin properties	margin-top margin-right margin-bottom margin-left

Units in CSS

When you use specify lengths in CSS, you should generally use the relative units appropriate to the property. For width properties, use ex units, which corresponds to the width of the lower-case 'x' character. For height properties, use em units, which corresponds to the height of the capital 'M' character. Relative units are preferred to absolute units, like px, pt, and in. One reason for this is that one day, monitors may have more than 96 dots per inch, in which case your 14px font will look too small. Other relative values like smaller, bolder, and percentages are also better choices than the absolute values. There are always exceptions though.

Measurements

Unit	Description
%	percentage
in	inch
cm	centimeter
mm	millimeter
em	1em is equal to the current font size. 2em means 2 times the size of the current font. E.g., if an element is displayed with a font of 12 pt, then '2em' is 24 pt. The 'em' is a very useful unit in CSS, since it can adapt automatically to the font that the reader uses
ex	one ex is the x-height of a font (x-height is usually about half the font-size)
pt	point (1 pt is the same as 1/72 inch)
pc	pica (1 pc is the same as 12 points)
px	pixels (a dot on the computer screen)

Colors

Unit	Description
color_name	A color name (e.g. red)
rgb(x,x,x)	An RGB value (e.g. rgb(255,0,0))
rgb(x%, x%, x%)	An RGB percentage value (e.g. rgb(100%,0%,0%))
#rrggbb	A HEX number (e.g. #ff0000)