1. Technology

Web Design Examples

HTML Examples - Examples of How HTML Works
Free examples for using HTML. HTML examples explaining how HTML works in various situations.

Example of How to Play a Sound on Click or on MouseOver
How to Play a Sound on Click or on MouseOver

CSS 2 Generated Content - Examples
Examples of how to use CSS 2 in non-IE browsers to add content to your Web pages.

Pull Quote Examples
Examples of how to style pull quotes with the blockquote tag and CSS.

Create a Rollover Image with Dreamweaver - Example
Create a Rollover Image with Dreamweaver

Show and Hide Text in DIVs with CSS and JavaScript - Example
An example of how to use JavaScript and CSS to show and hide blocks of text on your Web page.

Fancy CSS Headlines - Examples
See what you can do with CSS and headlines.

Border Style Examples
See what different CSS borders look like.

Nested Lists and CSS Descendant Selectors - Examples
Examples of how the CSS descendant selector affects your HTML in ways you might not have intended.

Initial Caps - Examples
Learn how to use CSS to create fancy initial caps for your paragraphs. There is even a simple image replacement technique to use a graphical image for your initial cap. This is a page of examples of how these CSS techniques look.

Fix a Background Image to the Bottom of a Table - Example
A test to see if it's possible to create a table with a background image where the background image is aligned with the bottom of the table, rather than the top.

Style Background Examples
An example of how the background styles work.

Styling Links with CSS - Examples
Examples of how to use CSS to style links to look like different things.

vertical-align Examples
Examples of how the vertical-align style property works.

Textarea Examples - HTML Forms Tutorial
Examples of the HTML form tag - textarea.

Textarea Examples - HTML Forms Tutorial
Examples of the HTML form tag - textarea.

CSS Box Model Examples
Examples showing how the CSS box model works in HTML

CSS Property cursor Examples
Examples of how to change the cursor using CSS.

white-space Property Examples
white-space Property Examples

line-height Examples
Examples of how to use the CSS property line-height to affect the leading or line spacing of your text elements.

letter-spacing Examples
Examples of how the letter-spacing CSS property works.

word-spacing Examples
Examples of how the word-spacing CSS property works.

text-indent Examples
Examples of how to use the text-indent style property.

Unequal Spacing Adds Dynamics
This very simple layout just centers everything, there is no other positioning done. And it's a pretty boring page.

Centered is Boring
This very simple layout just centers everything, there is no other positioning done. And it's a pretty boring page.

Placement Example 2
Placing elements on your Web page is an important part of Web design. This document has two images of a small dot. The placement is significant because it is a different distance from each edge of the Web page as well as from each other.

Placement Example
Placing elements on your Web page is an important part of Web design. This document has one image of a small dot. The placement is significant because it is a different distance from each edge of the Web page.

text-decoration Examples
Examples of the text-decoration style property.

text-transform Examples
Examples of the text-transform style property.

text-shadow Examples
Examples of the text-shadow style property.

Blink Tag Examples
Examples showing how the blink tag works in the browsers it works in.

Blockquote Tag Examples
Examples showing how the blockquote tag works.

Br Tag Examples
Examples showing how the br tag works.

Button Tag Examples
Examples showing how the button tag works.

Examples of the BASEFONT Tag
Examples of how to use the basefont tag.

Examples Using the bdo Tag
Examples of how to use the bdo tag.

Big and Small Examples
Examples of how to use the big and small tags.

Bold Examples
Examples of how the b tag works.

Form Field Has Focus Example
Form Field Has Focus Example

Web Forms Usability Examples - User Friendly Web Forms Examples
Online forms can be a pain for your readers to fill out, but they don't have to be. With some knowledge of HTML form tags, some CSS and JavaScript, you can create a form that your customers actually want to fill out. These examples will show you how the different techniques work in action.

Tabindex Examples
Tabindex Examples

CSS text-align Examples
Examples of how the CSS property text-align works.

The Q Tag - Examples
The Q Tag Examples

font-smooth Examples
font-smooth Examples

font-effect Examples
font-effect Examples

Center the Entire Page
Return to the Centering article

The CSS 3 background-size Property Examples
Use CSS 3 to stretch background images to fit the element.

Faking a Stretched Background Image - Across the Whole Page
Use the z-index property to layer your content on top of your stretched background image.

Faking a Stretched Background Image
Use the z-index property to layer your content on top of your stretched background image.

AREA Tag Examples - XHTML 1.0 area Element - HTML 4.01 AREA Tag
Examples of the AREA tag in HTML 4.01 and XHTML 1.0

ADDRESS Tag Examples - XHTML 1.0 address Element - HTML 4.01 ADDRESS Tag
Examples of the ADDRESS tag in HTML 4.01 and XHTML 1.0

ABBR Tag Examples - XHTML 1.0 abbr Element - HTML 4.01 ABBR Tag
Examples of the ABBR tag in HTML 4.01 and XHTML 1.0

ACRONYM Tag Examples - XHTML 1.0 acronym Element - HTML 4.01 ACRONYM Tag
Examples of the ACRONYM tag in HTML 4.01 and XHTML 1.0

A Tag Examples - XHTML 1.0 A Element - HTML 4.01 A Tag
Examples of the A tag in HTML 4.01 and XHTML 1.0

Search Engine Examples
Sample search engines that add search capabilities to your Web site

Tabs in HTML with CSS
Tab 1

Tabs in HTML with CSS
Tab 1

Tabs in HTML with CSS
Tab 1

Tabs in HTML with CSS
Tab 1

CSS Positioning, Example 1
This example shows how relative positioning works

CSS Positioning, Example 2
This example shows how absolute positioning works

Font Shorthand Examples
Font Shorthand Examples

Font Variants Examples
Below are samples of text set at different font-variants. Not …

Font Styles
Font Styles

Example of CSS Counters - Automatic Numbering with CSS Counters
Example of CSS Counters

Sample Frameset in Dreamweaver
om

Untitled
Web Design / HTML @ About.com

Navigation
Web Design / HTML @ About.com

Sample Frameset in Dreamweaver
blsampleframeset.htm

Navigation
Web Design / HTML @ About.com

How to Create Frames in Dreamweaver
How to Create Frames in Dreamweaver

Sample iFrames
An example of how to link into iframes

Font Weights
Font Weights

Tableless Web Pages
Sample Framed Page

Sample Tables with CSS
Sample Tables with CSS

What's the difference between display: hidden and visibility: none? - Examples
What's the difference between display: hidden and visibility: …

Lists and CSS and Web Browsers - Getting Lists to Look the Same in IE and ...
Lists and CSS and Web Browsers

Testing display:table; in Internet Explorer
Testing display:table; in Internet Explorer

Centering Text - Example
Centering Text - Example

http://webdesign.about.com/od/examples/l/bl_tagcloud.htm
Most Popular Articles

Form Validation in Action
Using javascript and Perl to validate your form entries

Styling Horizontal Rules with CSS - Examples
Styling Horizontal Rules with CSS

Floating Images Down the Right Column
Floating Images Down the Right Column

Floating Images Down the Left Column
Floating Images Down the Left Column

Using the CSS Property: Float
Using the CSS Property: Float

How to Float an Image to the Left of Text - Examples
How to Float an Image to the Left of Text - Examples

How to Float an Image to the Right of Text - Examples
How to Float an Image to the Right of Text - Examples

CSS 3 Opacity - Example
CSS 3 opacity example

Change Text Color Dynamically - Modern Browsers - An Example
See an example. It used to be very difficult to get text to change color in Netscape (4). But now it's very easy. And your HTML can be valid XHTML as well.

Definition Lists - Turning a Bulletted List Into a Definition List
Definition Lists

Definition Lists - A Basic Definition List
Definition Lists

Definition Lists - Zeroed Out Margins on the DD
Definition Lists

Definition Lists - Highlighted Term
Definition Lists

Definition Lists - Prettier List
Definition Lists

Definition Lists - Styling a Form
Definition Lists

First Form Field Selected - Use JavaScript to Put the Cursor in the First ...
Use JavaScript to Put the Cursor in the First Form Field

First Form Field Selected - Use JavaScript to Put the Cursor in the First ...
Use JavaScript to Put the Cursor in the First Form Field

Sample Auto-Redirecting Drop-Down Menu
Sample Auto-Redirecting Drop-Down Menu

HTML Forms - Your First HTML Form
Building your first HTML form, hints on building and using HTML forms

http://webdesign.about.com/od/examples/l/bl_aa020801b.htm
Making HTML Forms Work

http://webdesign.about.com/od/examples/l/bl_cssdropshadows.htm
CSS Drop Shadows

Display the Current Date - Use JavaScript to Display the Current Date
Use JavaScript to Display the Current Date

Standards Based DHTML Menus - Sample DHTML Menu
DHTML menus are one of the most popular ways to use dynamic HTML. They allow you to have crisp menus on your site while providing additional information to your customers as they mouse over the links.

CSS Drop Caps - Example of CSS Drop Caps
CSS Drop Caps

http://webdesign.about.com/od/examples/l/bl_092606.htm
Table caption examples

The CSS Outline Style In Action
See the CSS outline style property in action

HTML Table Attributes - Example of nowrap
Learn how to use table attributes to create more useful tables

Sample Table Alignments Using CSS
table alignments align valign vertical-align CSS align CSS valign

HTML Table Attributes - Examples
Learn how to use table attributes to create more useful tables

Rounded Corners Using CSS and No Images
Learn how to create rounded corners without images using just CSS

Borders
Examples of CSS borders.

css3 tabs navigation example
Sample CSS Tabbed Navigation

CSS3 rounded corners
Learn how to create rounded corners without images using a CSS 3 style property. This technique works in all modern browsers except Internet Explorer 8, and should be supported in Internet Explorer 9.

CSS 3 nth-of-type examples
Examples of the CSS 3 pseudo-class and how you can use this property to create zebra stripe tables and alternate image placement.

bl_add-google-map-example.htm
An example of how to add a Google map to a Web page

bl_simple-mailto-form.htm
Here is an example of a simple mailto form for web pages.

bl_label-tag-examples.htm
See examples of the HTML label tag in action. See how it makes forms more accessible by making fields easier to click and find.

bl_style-forms-with-css-examples.htm
Learn how to build nice looking forms by styling them with CSS. These forms are styled with CSS to have colors, backgrounds, images and more. Learn to style forms with CSS by example.

bl_color.htm
Examples of the CSS property color.

bl_pull-quote-examples.htm
See how doing different things with the styles can make pull quotes more memorable and fun.

bl-simple-dhtml-javascript-scripts-count-characters.htm
An example of how to use JavaScript to count the number of characters in a textarea box.

bl-simple-dhtml-javascript-scripts-countdown.htm
An example of how to use JavaScript to display a countdown timer on your web page.

bl-simple-dhtml-javascript-scripts-date.htm
An example of how to use JavaScript to display the current date on your web page.

bl-simple-dhtml-javascript-scripts-tolower.htm
An example of how to use JavaScript to convert the text in a form to upper or lowercase.

bl-sidebar.htm
Add a sidebar to your browser to find out what's new on About.com Web Design and HTML.

z-index Examples
Z-Index Examples

Tableless Web Pages
Left Column

CSS Navigation Bar - Example
CSS Navigation Bar Example

Basic Canvas Examples
Examples of how the HTML 5 canvas tag works.

Basic Canvas Examples
Examples of how the HTML 5 canvas tag works.

HTML 5 Canvas Examples - Drawing on Your Canvas - Examples of Drawing on an...
Examples of how the HTML 5 canvas tag works.

Examples of Web Safe Font Stacks
See some examples of web safe font stacks

Sample Input Fields - Examples of the INPUT Tag in HTML Forms
The HTML form input tag has many different ways of displaying. These are some examples of the input tag and how it looks on web pages.

What's The Difference Between Email and Text Input Fields - Can You See a...
A sample form that uses both an email input field and a text field. Most browsers display them the same way.

z-display-xml.css
z-display-xml.css

z-display-xml.htm
z-display-xml.htm

HTML Scroll Bars with CSS - Examples
HTML Scroll Bars with CSS - Examples

Overflow-x and Overflow-y Examples - Scrolling HTML Boxes with Overflow-x...
See how the CSS 3 properties overflow-x and overflow-y look in web designs.

Scrollbar Colors - Changing the Colors - Examples
Scrollbar Colors - Changing the Colors

bl-colgroup-tag-examples.htm
Colgroup Examples

HTML5 Minimal Document
z-html5-minimal-document.htm

HTML4 Minimal Markup Example
z-html4-minimal-document.htm

Why Pasting Special Characters is a Bad Idea - Example
See why copying and pasting special characters won't always work correctly in every browser. It's best to always use the character codes themselves.

z-rectangle.svg
z-rectangle.svg

z-circle.svg
z-circle.svg

z-triangle.svg
z-triangle.svg

SVG in HTML - Examples
Examples of how to include SVG graphics inside web pages. These examples will work natively in all browsers except Internet Explorer, and there is a plugin for IE that your readers can get to see SVG images.

z-ellipse.svg
z-ellipse.svg

Clearing Floats in CSS Layouts - Examples
Examples of how a cleared float will work in various situations.

Height 100% -- Working
Height 100%—Working

Height 100% Working
Height 100% Not Working

CSS Padding Examples
Examples of how CSS padding works.

HTML Table Examples
Examples of how HTML tables look.

Sample WOFF Page
Here is an example of a page that uses WOFF files for the fonts. If your browser supports embedded fonts, you should see fonts outside of the normal ones.

zCalligraffiti-webfont.woff
zCalligraffiti-webfont.woff

zCalligraffiti-webfont.ttf
zCalligraffiti-webfont.ttf

zCalligraffiti-webfont.svg
zCalligraffiti-webfont.svg

zCalligraffiti-webfont.eot
zCalligraffiti-webfont.eot

Iframe and CSS Examples
Examples showing how to use CSS with iframes in HTML documents.

Sample Page for Iframe
Sample Page for Iframe

CSS3 Multi-Column Layout Examples
See some examples of how CSS3 multi-columns work.

Text-Align Examples
Text-Align Examples

zCalluna-Regular-webfont.eot
zCalluna-Regular-webfont.eot

zCalluna-Regular-webfont.svg
zCalluna-Regular-webfont.svg

zCalluna-Regular-webfont.ttf
zCalluna-Regular-webfont.ttf

zCalluna-Regular-webfont.woff
zCalluna-Regular-webfont.woff

CSS Transitions Examples
Examples of how to create simple CSS animations with transitions.

CSS Translation Examples
Examples of how to use the CSS translation properties.

CSS Transformation Examples
Examples of how to use the CSS translation properties.

Border Image Examples
Border Image Examples

Untitled Document
Vertically Positioned Text with CSS

Examples of the background-clip CSS3 Style Property
Examples of the background-clip CSS3 Style Property

Examples of the background-origin CSS3 Style Property
Examples of the background-origin CSS3 Style Property

Outer Glow Effect with CSS3 and No Images
Outer Glow Effect with CSS3 and No Images

CSS3 Buttons
CSS3 Buttons

Hyphenation Examples and Testing
Hyphenation Examples and Testing

Make Things Fade In and Out with CSS3 - Examples
Make Things Fade In and Out with CSS3

Example of an SVG File Included in an HTML File
Here is an example of an SVG file included right in the HTML of an HTML file.

©2014 About.com. All rights reserved.