POSTED: Wednesday, September 16, 2009

CSS dropdown menu without javascripting or hacks

Here is a tiered CSS drop-down menu that works in IE 6, 7, and 8; Opera 9 and 10; Firefox 3.5.3.00; Flock 2.0 and 2.52; and Chrome 2.0.172.43 and 3.0.195.21 without hacks or javascripting and is accessible without using a mouse. One downside is that it still uses images for the tabs and the sub-menus are only one level. View source to download code.Example:Code:<style type=text/css><!--body,td,th {font-family: Verdana, Geneva, sans-serif;font-size: 100%;color: #666;}body {background-color:...

Read More "CSS dropdown menu without javascripting or hacks"

Posted by Michael MacNaughton on Wednesday, September 16, 2009 in CSS (6)

POSTED: Thursday, June 18, 2009

The @font-face rule and CUFON

The CSS Fonts Module Level 3 - W3C Working Draft was released June 18, 2009.This CSS3 module describes how font properties are specified and how font resources are loaded dynamically.Section 4.1 The @font-face rule defines the rule this way: The @font-face rule allows for linking to fonts that are automatically activated when needed. This permits authors to work around the limitation of 'web-safe' fonts, allowing for consistent rendering independent of the fonts available in a given user's environment....

Read More "The @font-face rule and CUFON"

Posted by Michael MacNaughton on Thursday, June 18, 2009 in CSS (6)

POSTED: Wednesday, April 01, 2009

CUFON Styles : font color, line-height and sizing

After our brief post regarding fontreplacement using CUFON we have been innundated with requests on how tomanipulate the look and feel of the replacementfonts.Examples:CITE { PADDING-BOTTOM: 10px; LINE-HEIGHT: 1.2em; MARGIN: 1em 0px; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; BACKGROUND: #fff; COLOR: #0c6; FONT-SIZE: 300%; PADDING-TOP: 10px}H5 { PADDING-BOTTOM: 10px; LINE-HEIGHT: 1.2em; MARGIN: 1em 0px; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; BACKGROUND: #fff; COLOR: #666; FONT-SIZE: 200%; PADDING-TOP:...

Read More "CUFON Styles : font color, line-height and sizing"

Posted by Michael MacNaughton on Wednesday, April 01, 2009 in CSS (6)

POSTED: Sunday, March 15, 2009

CSS Drop Caps, the @font-face tag, sIFR and Cufon

This week we have been in interesting discussions regarding font rendering in html pages. The first discussions were centered around theaccelerating trendfor web pages to emulate magazine design.Thisstarted in2004 with the limited useof CSSDrop Caps as shown in thisparagraph (the large Blue letter T). The code (example below) can be inline or, if usedfrequently, in theexternal style sheet.<span style=line-height: 0.8em; padding-right: 5px; font-family: times,Georgia; float: left; color: #9dacbf;...

Read More "CSS Drop Caps, the @font-face tag, sIFR and Cufon"

Posted by Michael MacNaughton on Sunday, March 15, 2009 in CSS (6)

POSTED: Tuesday, January 27, 2009

CSS reference and web standards curriculum

There are a number ofresources available via the web to quickly reference HTML or CSS code and examples. Many are stuck in static PDF files and some are simply not maintained as standards change.Opera, the browser that promotes itself as the most standards-compliant Web browser and Yahoo! Developer Network created the WSC (Web Standards Curriculum) to help teach students and beginner coders to have a solid grounding in standards-based web design. Their courses in HTML, CSS and JavaScript are good...

Read More "CSS reference and web standards curriculum"

Posted by Michael MacNaughton on Tuesday, January 27, 2009 in CSS (6)

POSTED: Friday, January 23, 2009

Resize images on the fly with CSS

Sizing images with CSS is a little used but powerful tool that gives web sites real liquid design.The size of the image (in percentages) is based on the browser interpretation of the size of the containing element rather than as a percentage of the actual size of the image.An image 300px wide with a percentage size of 60% may be rendered many different sizes depending upon the size of its container. And, if that element is itself sized with a percentage, it may also change depending upon screen...

Read More "Resize images on the fly with CSS"

Posted by Michael MacNaughton on Friday, January 23, 2009 in CSS (6)