Archive | HTML RSS feed for this section

CSS text shadows and background sizing

14 Feb

Introduction

CSS3 offers advancements in how Web designers can apply design touches to their designs. One of the most often wished for properties – text-shadow, which allows easy creation of drop shadows – looks to be popular as new versions of popular browsers are starting to support the property.

I will also look at background-size – this is a CSS property that will let Web designers set the backgrounds of elements so that the background images can stretch or fill the entire background image, if widely implemented.

Together both CSS properties can add unique twists to everyday Web design with minimal effort. In this article I will explore both of these, showing how they work with some simple examples. (you can download the code examples here.)

Bringing Light to Text Shadows

Text shadows were first seen in the CSS 2 specification, but they didn’t make into the 2.1 specification since browsers weren’t supporting the property. Within the CSS 3 specification however the text-shadow property has made a reappearance.

Let’s take a look at a CSS rule that utilizes the text-shadow property to get a better idea of the values it accepts:

h1 { text-shadow: #555 3px 3px 2px; }

The first value sets the color for the shadow. In the example shown in Figure 1 (text-shadows01.html), the shortcut for the value #555555 is being used.

A text shadow applied to the heading

Figure 1: The text-shadow property applied to a heading.

The second value sets the x-coordinates for the shadow. The greater the value, the further away from the right of the text the shadow is placed. A negative value pulls the shadow to the left.

In the Figure 2 (text-shadows02.html), a value of 20 pixels is used for the x-coordinate – this pulls the shadow to the right:

h1 { text-shadow: #555 20px 3px 2px; }

The text shadow has moved to the right of the text

Figure 2: The shadow moves to the right.

The third value sets the y-coordinates for the shadow. The greater the value, the further below the text the shadow is placed. A negative value pulls the shadow above the text.

In the Figure 3 (text-shadows03.html), a value of 20 pixels is used for the y-coordinate – this pulls the shadow down below the text:

h1 { text-shadow: #555 3px 20px 2px; }

The text shadow has moved below the text

Figure 3: The shadow moved to the bottom.

The last value sets the blur radius of the shadow. The greater the value, the more diffuse the blur effect. In Figure 4 (text-shadows04.html), a value of 20 pixels is used for the blur radius:

h1 { text-shadow: #555 3px 3px 20px; }

More blur on the text shadow

Figure 4: A large diffuse drop shadow.

While the text-shadow property allows for an easy addition of a graphic effect to a Web page, some restraint should be applied.

For starters, the Web is two-dimensional medium. You shouldn’t overdo it – adding cheesy Photoshop effects like beveling or shadows forces elements on a page to appear three dimensional. The greater the bevel or length of the drop shadow, the greater the trespass in the design, as these effects draw attention to the elements rather than letting the design as a whole communicate to the reader.

I’d recommend one to two pixels depth at most for effects like text shadow. This touch gives a slight lift off the Web page, but doesn’t attract too much attention to itself, letting the overall design of the page work as a whole.

Lastly, make sure to bulletproof your design so that it takes into account browsers that don’t support text-shadow. For example, don’t set the color of the headline text to be the same as the background otherwise browsers that don’t support the text-shadow property will appear to display a blank area, as shown in Figure 5, leaving your site’s visitors without legible text.

No text shadow in Firefox

Figure 5: The heading appears gone in the Firefox browser.

Support for Text-Shadow

Modern browsers are including support for text-shadow includes Safari 3 and Opera 9.5.

There are methods discussed elsewhere that go into detail on how to get a cross-browser support for text-shadow in other browsers like Firefox and Mozilla through a mixture of CSS hacks, pseudo-elements and proprietary filters. Those methods however seem rather excessive for such a simple effect and not as graceful as a cut and dry CSS3 property.

The Story on Background Sizing

As Web designers, it’s important to make sure every image is properly optimized and sized before a site goes live. These extra steps help to keep file sizes low and speeds browser rendering times, but the Web isn’t a pixel perfect medium.

As elements can be resized, perfectly sized background images can show their edges. These are times when stretching or filling an element’s background image would be most helpful as shown in Figure 6 (background-sizing01.html.)

This background image is overrun by text

Figure 6: The background image is overrun by text.

In CSS3, there’s a property that can help do just that: background-size. It should probably be called “background-stretching” instead, since it can expand an image to fill the background of an element as shown in Figure 7 (background-sizing02.html):

div { background-image: url(bkgd_col.png); background-size: 100% auto; background-repeat: repeat-y; border: 1px solid #466900; }

The image resizes to the width of the element

Figure 7: The background image resizes to the width of the element.

The first value for the background-size property sets the width and the second one sets the height. If there is only one value, its value is applied to both the width and height. The background-size property accepts percentage and length values as well as auto.

An interesting effect is to tile out the images perfectly in the background. In this example, the backgrounds are set to place two copies of the image side-by-side as shown in Figure 8 (background-sizing03.html).

body { background-image: url(starstripes.png); background-size: 50% auto; background-repeat: repeat-x; margin-top: 30%; }

Background sizing in action

Figure 8: Perfectly placing two images in the background.

What’s happening is that the first value of background-size splits the width of an element in half and tells the browser to showcase two images in the available space. The second value of auto tells the browser to use as much space as needed for the height so that the aspect ratio of the image is kept in place.

A word of warning: when using raster images like GIF, JPEG or PNGs, images will start to look jagged as they resize. (One day all browsers will support SVG and it will be a beautiful thing.)

Support for Background Size

Currently, support for background-size is limited to Safari 3 and Opera 9.5. And in order to use the property in those browsers, proprietary CSS property values need to be used: -o-background-size and -webkit-background-size. The following declaration block would be used in order to get the greatest support from browsers side by side at present:

body { background-image: url(starstripes.png); background-size: 50% auto; -o-background-size: 50% auto; -webkit-background-size: 50% auto; background-origin: border; background-repeat: repeat-x; margin-top: 30%; }

As the CSS3 spec solidifies, the proprietary values should be removed, and replaced with the single standard value.

In Conclusion

While not fully supported in most browsers, the future of CSS3 holds much promise. With the adoption of new CSS3 properties, Web designers can look to making their designs more visually interesting and, hopefully, a little easier to produce.

200718 Sep Liquid faux columns with background-size

14 Feb

Until the Advanced Layout and Grid Layout modules are implemented, we have to get by with the existing tricks of the trade. One of those is the use of faux columns, a background image which simulates equal-height columns. This is a good technique, but the drawback is that it only works with fixed-width columns.

That problem was overcome with the advent of liquid faux columns, which uses some background-position trickery and a bit of maths to create a variable-width effect.

With the (tentative) introduction of background-size in Safari and Opera, however, faux columns are about to become a lot easier; all you need to do is create a background image and assign a percentage value to background-size, allowing the image to expand or contract with its containing box.

Take a look at this example (only tested in Safari 3 and Opera 9.5; may work in Konqueror 3.5.7 also). If you resize your browser window, the text and columns should maintain their proportions.

The way this is done is with a simple PNG image; I’ve made it 1000px wide, with two coloured columns of 250px each, so that it’s easier to calculate column widths (25%,50%,25%).

I’ve set this as the background-image on the html element, which has been assigned a width of 90%. Inside this there is a container div with a width of 100%, and my three columns with the widths set at the same ratio as the background image:

<div id="container">
	<div id="one">
	</div>
	<div id="two">
	</div>
	<div id="tre">
	</div>
</div>

#container {
position: relative;
width: 100%;
}
#one {
margin: 0 25%;
}
#two, #tre {
position: absolute;
top: 0;
width: 25%;
}
#two { left: 0; }
#tre { right: 0; }

The html element has the background-size declaration applied to it, with a percentage value to make it liquid, using the browser-specific prefixes followed by the proposed declaration (for safety):

html {
background-image: url('opera_bg.png');
-khtml-background-size: 100%;
-o-background-size: 100%;
-webkit-background-size: 90%;
background-size: 100%;
background-position: 50% 0;
background-repeat: repeat-y;
width: 90%;

You’ll notice that the Webkit value is different from the others; during this test, it seems that Webkit obtains its width from the entire browser window, not from the containing element; therefore, we have to set this value to be equal to the width of the containing element. I haven’t tested this thoroughly yet, so I’m not sure if this is a persistent bug or if there’s something I’m doing wrong. Anyway, Opera 9.5 behaves as expected.

After that I’ve added the background-position and background-repeat declarations; background-repeat to tile the image down the page, and background-position because Webkit seems to ignore the margin values and puts the image at top left of the browser window; this is only necessary if you’re centre-aligning your page.

Apart from a little tidying up, that’s it; once the module becomes a recommendation and the browser-specific prefixes are dropped, it will require only a few lines of code for the simple effect. In the meantime, remember that this is for experimentation purposes only and shouldn’t be used in a live environment. This is just a sketch of the technique at the moment, and requires more testing.

You can skip to the end and leave a response.

Mastering Text

13 Feb

There is still much overuse of the br tag when p should be used for paragraphs, but it is generally accepted that p tags should be used to represent paragraphs. By the same logic, there are a number of tags that should be used to define certain text elements such as quotations, abbreviations and computer code.

HTML Dog, The Book HTML Dog book cover

HTML Dog is hosted by Titan Internet

It should be kept in mind that although most browsers will render these tags in various ways, the important point to remember is that it isn’t what each element looks like, but rather what meaning it applies.

Abbreviations and acronyms

abbr and acronym are used for abbreviations and acronyms respectively.

An abbreviation is a shortened form of a phrase. Very general. An acronym however is an abbreviation made up of the initial letters (or parts of words) of the phrase it is representing. So CSS is a valid acronym, whereas HTML and XHTML are not (if ‘Hypertext markup language’ was an acronym, it would be ‘HML’. Similarly, XHTML would be EHML).

For optimum accessibility, the phrase that the acronym or abbreviation is representing should be used in the title attribute.

 <p>This web site is about <abbr title="HyperText Markup Language">HTML</abbr> and <acronym title="Cascading Style Sheets">CSS</acronym>.</p> 

For some baffling reason, Internet Explorer, the most common web browser, doesn’t support the abbr tag. Luckily, a guy called Marek Prokop has developed a clever Javascript workaround for this.

There is a lot of discussion about the use of abbreviation and acronym elements. Lars Holst provides perhaps the most detailed insight.

Quotations

blockquote, q and cite are used for quotations. blockquote is block-line and used for large citations, whereas q is in-line and used for smaller phrases. cite is also in-line and preferable to q for its semantic nature and possible future deprecation of q.

Again, the title attribute can be used to show where the citation has come from.

Note: q does not usually change the appearance of the enclosed text – you need to use CSS if you want to apply a style.

 <p>So I asked Bob about quotations and he said <cite>I know as much about quotations as I do about pigeon fancying</cite>. Luckily, I found HTML Dog and it said...</p> <blockquote title="From HTML Dog, http://www.htmldog.com/"> <p>blockquote, q and cite are used for quotations. blockquote is block-line and used for large or citations, whereas q is in-line and used for smaller phrases. cite is also in-line and preferable to q for its semantic nature and possible future deprecation of q.</p> </blockquote> 

Code

There are a few tags, code and var that are specifically for computer code and pre and samp, which are, in practice, also used mainly for code.

code is used for computer code.

var is used to indicate a variable within code.

 <code><var>ronankeatingisbland</var> = true;</code> 

samp is similar to code, but is supposed to be used for a sample of outputted code.

pre is preformatted text and is unusual in HTML tags that is preserves the white space within it. It is most commonly used for blocks of code.

 <pre> &lt;div id="intro"&gt; &lt;h1&gt;Some heading&lt;/h1&gt; &lt;p&gt;Some paragraph paragraph thing thing thingy.&lt;/p&gt; &lt;/div&gt; </pre> 

Definition terms

dfn is a definition term and is used to highlight the first use of a term. Like abbr and acronym, the title attribute can be used to describe the term.

 <p>Bob's <dfn title="Dog">canine</dfn> mother and <dfn title="Horse">equine</dfn> father sat him down and carefully explained that he was an <dfn title="A mutation that combines two or more sets of chromosomes from different species">allopolyploid</dfn> organism.</p> 

Addresses

address should be used for an address.

 <address> HMTL Dog House<br /> HTML Street<br /> Dogsville<br /> HT16 3ML </address> 

Obscure rarities

There are some tags that are worth noting, but are rarely used because of their super specific nature.

bdo can be used to reverse the direction of the text, and can be used to display languages that read right to left. The value of the required attribute dir can be ltr (left to right) or rtl (right to left).

 <bdo dir="rtl">god lmth</bdo> 

kbd is used to indicate text that should be typed by the user.

 <p>Now type <kbd>woo hoo</kbd></p> 

ins and del are used to display editorial insertions and deletions of text respectively. It can have the attributes datetime (in the format of YYYYMMDD) and cite (a URL to a description as to why the insertion or the deletion has been made).

The ins element is usually shown underlined and the del element is usually displayed with a strikethrough.

 <p>This is some <del datetime="20030522">nonsense</del> <ins cite="http://www.htmldog.com">very informative stuff</ins> that I've written.</p> 

Presentational elements

b, i, tt, sub, sup, big and small are all presentational elements and as such, by their very definition, shouldn’t be used when attempting to separate meaning and presentation. b defines a bold element for example, which has no meaning at all – these tags define purely visual characteristics, which should be the job of CSS. Even though they are valid tags, there are others (such as strong and em, which are examples of ‘phrase elements’) that actually add meaning. If you want to solely replicate specific styles of these tags, without any intended meaning, then you should apply CSS to span tags.

Accessible Forms

13 Feb

Forms aren’t the easiest of things to use for people with disabilities. Navigating around a page with written content is one thing, hopping between form fields and inputting information is another. Because of this, it is a good idea to add a number of elements to the form.

HTML Dog, The Book HTML Dog book cover

HTML Dog is hosted by Titan Internet

Labels

Each form field should have its own label. The label tag sorts this out, with a for attribute that associates it to a form element:

 <form> <label for="yourName">Your Name</label> <input type="text" name="yourName" id="yourName" /> ... 

Labels have the added bonus of visual browsers rendering the labels themselves clickable, putting the focus on the associated form field.

Note: name and id are both required – the name for the form to handle that field and the id for the label to associate it to.

Field sets and legends

You can group fields, for example name (first, last, middle, title etc.) or address (line 1, line 2, county, country, postal code, country etc.) using the fieldset tag.

Within the field set, you can set a legend with the legend tag.

Note: Visual browsers tend to represent field sets with a border surrounding them and legends breaking the left of the top border.

 <form action="somescript.php" > <fieldset> <legend>Name</legend> <p>First name <input type="text" name="firstName" /></p> <p>Last name <input type="text" name="lastName" /></p> </fieldset> <fieldset> <legend>Address</legend> <p>Address <textarea name="address" ></textarea></p> <p>Postal code <input type="text" name="postcode" /></p> </fieldset> ... 

Option groups

The optgroup tag groups options in a select box. It requires a label attribute, the value of which is displayed as a non-selectable pseudo-heading preceding that group in the drop-down list of visual browsers.

 <select name="country"> <optgroup label="Africa"> <option value="gam">Gambia</option> <option value="mad">Madagascar</option> <option value="nam">Namibia</option> </optgroup> <optgroup label="Europe"> <option value="fra">France</option> <option value="rus">Russia</option> <option value="uk">UK</option> </optgroup> <optgroup label="North America"> <option value="can">Canada</option> <option value="mex">Mexico</option> <option value="usa">USA</option> </optgroup> </select> 

Navigating fields

Like links, form fields (and field sets) need to be navigated to without the use of a pointing device, such as a mouse. The same methods used in links to make this task easier can be used on form elements – tab stops and access keys.

The accesskey and tabindex attribute can be added to the individual form tags such as input and also to legend tags.

 <input type="text" name="firstName" accesskey="f" tabindex="1" /> 

For more about this, see the Accessible Links page.

HTML Example

13 Feb

A whole bunch of examples demonstrating various HTML elements and CSS properties in action. The web pages are minimal, bare-bone examples so that you can clearly see what’s going on. Just view the source.

HTML Dog, The Book HTML Dog book cover

HTML Dog is hosted by Titan Internet

Text

Links

Images

Layout

Lists

Tables

Forms

Accessible Links

13 Feb

his page deals with a number of ways that links can be made more accessible.

HTML Dog, The Book HTML Dog book cover

HTML Dog is hosted by Titan Internet

Tabbing

Users who do not or cannot use pointing devices can ‘tab’ through links, and as such, links should be in a logical tabbing order. The tabindex attribute allows you to define this order although if the HTML is linear, as it should be, a logical tabbing order should automatically fall into place.

Accesskeys

Accesskeys allow easier navigation by assigning a keyboard shortcut to a link (which will usually gain focus when the user presses ‘Alt’ or ‘Ctrl’ + the accesskey). For users who do not use pointing devices, this is a much quicker and easier way to navigate than tabbing through links.

It isn’t necessary to put accesskeys on all links, but it is a good idea to apply them to primary navigation links.

 <a href="somepage.html" accesskey="s">Some page</a> 

The trouble with accesskeys is that there is often no way the user can find out what they are (unless they look at the source code). JAWS, the most popular screen reader out there will read these accesskeys out loud, but to take full advantage of them, you will probably want to make them more explicit.

You could apply a method similar to the ‘skip navigation’ link technique (see below), or opt for a separate page explaining the accessibility-related functionality of your site, including the accesskeys. A method that is growing in popularity is to underline a corresponding letter in the link, similar to the method used in the menus of most Windows applications.

See the article in A List Apart for more information.

Link titles

It is a good idea to add the title attribute, which will pop up a description of where the link will take the user, so improving navigation.

If the link is used to execute Javascript, it is also beneficial for explaining what should (but won’t) happen for users that do not have Javascript functionality.

 <a href="#" onclick="opennastypopup()" onkeypress="opennastypopup()" title="Open a nasty Javascript pop-up window">Monster</a> 

Popups

Talking of Javascript popups, if you will insist on using them, or more likely someone is telling you to use them, you can make things much more accessible by using onkeypress as well as onclick. Also, if you include a normal page in the value of the href attribute of the link and return false from a function that launches the popup, if the user does not have Javascript, a normal page will load anyway. For example:

 <script type="text/javascript"> function opennastypopup() { window.open("monster.html", "", "toolbar=no,height=100,width=200"); return false; } </script> ... <a href="monster.html" onclick="return opennastypopup()" onkeypress="return opennastypopup()">Monster</a> 

Adjacent links

Adjacent links should be separated by more than spaces, so that they can be discerned by screen readers.

This can be done by placing characters in-between links (such as a pipe – ‘link | link‘) or surrounding it by characters (such as square brackets – ‘[link] [link]‘). It is also a good idea to put navigation links within lists. These can then be styled with CSS to be displayed however you choose, even side-by-side (using display: in-line).

Skipping navigation

You should give users of screen readers an opportunity to skip the navigation and go straight to the content. This is because if your navigation is consistent (as it should be), a user does not need to go through the same information on every page, especially if there is a lot of it. You can skip the navigation by placing a link before it that skips directly to the content.

It might look something like this:

 <div id="header"> <h1>The Heading</h1> <a href="#content" accesskey="n">Skip navigation</a> </div> <div id="navigation"> <!--loads of navigation stuff --> </div> <div id="content"> <!--lovely content --> </div> 

Obviously, you do not want this link to be displayed in visual browsers, so you can use CSS to render it invisible.

This is a CSS tip, but is specific to ‘Skipping navigation’. It involves the method to use to render the link invisible.

The most obvious way would be to use display: none, but as some screen readers will pick up on this and not read the link, as intended, the ‘Skip navigation’ link must be displayed.

It still doesn’t have to be visible though – there’s no point in showing it to visually able users. So instead of having a style containing display: none, you can set the width and height of the element to zero (width: 0; height: 0; overflow: hidden;), which has the same visual effect but will be read by screen readers.

%d bloggers like this: