Working with CSS3 background images

By Ryan Boudreaux

Takeaway: Ryan Boudreaux goes over some examples of writing CSS3 code for background images that you can begin to implement now.

This segment of the CSS3 series will focus on images, specifically CSS3 background images which can be implemented in many browsers today. Check out the previous posts in the CSS3 series:

• First look at CSS3 web design elements, which focused on the various modules, CSS3 display rules, browser prefixes, gradients, tables, and fonts.
• CSS3 resource review: CSS3.info, which is a CSS3 resource review of the website CSS3.info.
• Working with the CSS3 Multi-column Layout Module

CSS3 background images

Background images and textures can be utilized to layer a background without the use of separate divs, often adding a nice graphic touch to websites. In CSS3 we can now apply dimensions as well for images and define multiple background images within a single rule. There are two methods which allow for establishing rules. They are the CSS3 individual background rule and the CSS3 shorthand background rule; I will review both of them in this segment.

Browser support for CSS3 multiple backgrounds includes Mozilla Firefox (3.6+), Safari/Chrome (1.0/1.3+), Opera (10.5+), and Internet Explorer (9.0+).

The CSS3 background individual method is essentially a comma separated list of layered images written in the syntax form:

background: url(%path%/image1.xxx), url(%path%/image2.xxx);

And with the background individual method, we can include a comma separated list of background properties including background-repeat, background-attachment, background-position, background-clip, background-origin, and background-size.

In the example below, the background is defined by class with width of 800, height of 500, and a background containing three images layered, with background-position and background-repeat defined as shown in this CSS3 code:

.mBg_1 {

      width: 800px;

      height: 500px;

      background:

      url(images/barn.png),

      url(images/clouds.png),

      url(images/grass.png);

      background-position: bottom, left top, bottom;

      background-repeat: no-repeat;

}

The above code results in this example of the barn, cloud, and grass images displayed in Chrome:

Figure A

The other way of presenting background images utilizes what is known as the background shorthand method. The W3C CSS3 Backgrounds and Borders specification provides this explanation of the background shorthand syntax:

The number of comma-separated items defines the number of background layers. Given a valid declaration, for each layer the shorthand first sets the corresponding layer of each of 'background-position', 'background-size', 'background-repeat', 'background-origin', 'background-clip' and 'background-attachment' to that property's initial value, then assigns any explicit values specified for this layer in the declaration. Finally 'background-color' is set to the specified color, if any, else set to its initial value.

If one <box> value is present then it sets both 'background-origin' and 'background-clip' to that value. If two values are present, then the first sets 'background-origin' and the second 'background-clip'.

Of note here, the background-color must be the last layer in the declaration using the shorthand method.

One way to represent the background shorthand method specifying images with each one given a precise position is represented in the following syntax:

background:  url(%path%) Xpx Ypx, where Xpx = x-axis and Ypx = y-axis;

For example, the CSS background rule below defines the html of the document with a number of small images including a grid and several color swatch chips layered above.

html {

      background:

      url(images/ffccff_swatch.png) 175px 25px no-repeat,

      url(images/ff9933_swatch.png) 125px 425px no-repeat,

      url(images/cccc33_swatch.png) 325px 325px  no-repeat,

      url(images/669966_swatch.png) 325px 125px no-repeat,

      url(images/cccccc_swatch.png) 175px 275px no-repeat,

      url(images/ffffcc_swatch.png) 425px 125px no-repeat,

      url(images/ccffcc_swatch.png) 575px -25px no-repeat,

      url(images/ffccff_swatch.png) 225px 425px no-repeat,

      url(images/ff9933_swatch.png) -25px 225px no-repeat,

      url(images/ffccff_swatch.png) 525px 325px no-repeat,

      url(images/ff9933_swatch.png) 375px 225px no-repeat,

      url(images/cccc33_swatch.png) 125px 225px  no-repeat,

      url(images/grid.png) repeat;

}

This example, using the shorthand background method, results in a graphic background, incorporating some of the content from previous CSS3 segments within the HTML, including the blockquote and multi-column layout, and is rendered as seen below in Chrome:

Figure B

Positioning of images using the CSS3 shorthand background properties method can also take on the form of utilizing a position for each image as in this form:

.mBg_2 {

      width: 800px;

      height: 500px;

      background:

      url(images/barn.png) bottom right no-repeat,

      url(images/clouds.png) top left no-repeat,

      url(images/grass.png) bottom no-repeat;

}

The above code results in the following as displayed in Chrome:

Figure C

As you can see from the examples given above, there are two ways to present the layered images utilizing CSS3. The next segments on CSS3 will review border images, rounded corners, 3D text, transitioning and other features and functions, which can be implemented today.

CSS3: New properties for text-overflow and text-wrap

By Ryan Boudreaux

Takeaway: Ryan Boudreaux illustrates the CSS3 text-overflow and text-wrap properties in these code examples.

Continuing in our CSS3 series, I want to cover a few more aspects of the W3C Text Module; in particular, this segment will review the text-overflow and word-wrap properties. The Text Module document presents a set of text formatting properties for CSS3, and while many of these properties already existed in CSS2, many of the new properties have been added to address basic requirements in international text layout, particularly for East Asian and bidirectional text. The Text Module specification is a Candidate Recommendation, which means W3C believes the specification is ready to be implemented.

Text-overflow

On occasion text will need to be clipped and the text-overflow property determines if an ellipsis needs to be represented. There are several methods for representing overflow of textual content, using clip, ellipses, and ellipsis-word. Text overflow handles situations where some textual content gets clipped when it overflows an element's container such as a fixed width box, or within its inline-progression within a given layout area. This situation only occurs when the overflow property has the values: hidden, scroll or auto. Text-overflow allows the web author to introduce a visual hint at the two ending boundaries of the text flow within the element box (after an end). Text clipping is usually provided to the user in the form of a visual hint, which typically is represented with an ellipsis character (…).

The following guidelines are provided by the W3C for each instance and use for text-overflow:

• Clip: This is the default value, and will clip text as appropriate for the text content and given area. Any glyphs in the representation of text may be only partially rendered.
• Ellipsis: Is a visual hint which is inserted at each area boundary where text overflow occurs. The text-overflow-ellipsis property determines the content of the hint, and the insertions take place after the last letter that entirely fits on the line.

The syntax for representing the text-overflow is

text-overflow:  ellipsis | clip

Opera currently has a vendor prefix for text overflow that is specified in the form:

-o-text-overflow:

Text overflow gets applied when:

1. The area has the overflow property value set to either hidden, scroll, or auto.
2. The area has the white-space property value set to nowrap.

Using the ellipsis for text overflow, the example CSS3 code below defines a style for a paragraph with a solid 1px color border, an area width of 400px, with 5px padding:

p {

      border: 1px solid #CC33CC;

      width: 400px;

      padding: 5px;

      white-space: nowrap;

      overflow: hidden;

      o-text-overflow: ellipsis;

      text-overflow: ellipsis;

}

Along with the following HTML:

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean egestas blandit ipsum.</p>

Here is the result as displayed in Firefox 7.0.1:

Figure A

Now, replace the value ellipsis with clip in the text overflow property code:

o-text-overflow: clip;

text-overflow: clip;

And here is the result as displayed in Firefox 7.0.1:

Figure B

The examples above demonstrate that the ellipsis is a better user design with the visual hint, whereas the clip cuts off the next word to fit the defined area or box.

Another option for user centric design would be to add a title for the content where a mouse-over exposes more of the textual content or a description, for example, in the HTML below:

<p title="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean egestas blandit ipsum.">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean egestas blandit ipsum. </p>

Here is the result with a mouse-over as displayed in Firefox 7.0.1:

Figure C

Word-wrap

With cross-browser support including IE as far back as version 5, the word-wrap property can be applied with the default value normal, or with the break-word value. In addition to the word-wrap property, CSS3 has several new properties controlled by both the overflow-wrap and the text-wrap property.

Word-wrap is probably not going to be the most widely used CSS3 property but it definitely has a practical use, for example, in controlling the styling of comment sections within blog posts or forms.

The syntax for the word-wrap property is:

word-wrap: normal | break-word;

The example below shows how text content is handled without the word-wrap property applied, where a paragraph is styled with a width of 200px, and a solid border to define the area as displayed in Firefox 7.0.1:

Figure D

Here is the same HTML when applied to the styling word-wrap property with the break-word value applied:

.word_wrap {

      word-wrap: break-word;

}

This is the result as displayed in Firefox 7.0.1:

Figure E

As previously mentioned, the practical application for the word-wrap property can be utilized within coding for comment sections for blogs in particular or for forms, which will help in preventing long strings of text that might be entered by hackers trying to vandalize sites.

Overflow-wrap specifies whether the browser or user agent may break within a word to prevent overflow when an otherwise unbreakable string of characters is too long to fit within the line. It only has an effect when the values for text-wrap are either normal or avoid. The values for overflow-wrap include normal hyphenate, and break-word.

Currently the use of overflow-wrap does not appear to be supported by any browsers.

Text-wrap specifies the mode for wrapping text, and includes the following possible three values, normal, none, and avoid. Normal is used where lines may break at allowed break points, as determined by the line-breaking rules in effect. None is utilized where lines may not break; text that does not fit within the block container overflows it. Avoid applies where line breaking is suppressed within the element: the UA may only break within the element if there are no other valid break points in the line. If the text breaks, line-breaking restrictions are honored as for normal.

CSS3: Working with text-decoration properties

By Ryan Boudreaux

Takeaway: Ryan Boudreaux shows some examples of the CSS3 text-decoration properties and different ways of styling text.

This segment of the CSS3 series will review several of the text-decoration styling properties. The text-decoration specification is included within the CSS Text Level 3 specification, and includes properties for lines, color, style, shorthand, line continuity, underline position, and emphasis. This segment will cover several but not all of the text-decoration styles available for use in most modern browsers today, and some that are only available in Mozilla Firefox.

Text-decoration

The W3C specifications on text-decoration provide several means of applying styles to text, including the following:

• Line Decoration: Underline, Overline, and Strike-Through
• Color
• Style
• Shorthand property
• Line Continuity
• Underline Position
• Emphasis Mark Style, Color, Shorthand, Position, and Skip
• Text Shadow Properties

Mozilla Firefox is the only browser offering support for the new CSS3 text-decoration properties when using the -moz- prefix before any styling declarations.

Line decoration

Line decorations specify what line styles if any are added to the element and the syntax is expressed in the form along with the following value options as described in the specification and presented below:

Syntax example:

p {text-decoration-line: underline;}

Available values and their descriptions:

Value	Description
None (default value)	Neither produces nor inhibits text decoration.
Underline	Each line of text is underlined.
No-underline	Inhibits propagated underlines.
Replace-underline	Inhibits propagated underlines and produces an underline.
Overline	Each line of text has a line above it (i.e. on the opposite side from an underline).
No-overline	Inhibits propagated overlines.
Replace-overline	Inhibits propagated overlines and produces an overline.
Line-through	Each line of text has a line through the middle.
No-line-through	Inhibits propagated line-throughs.
Replace-line-through	Inhibits propagated line-throughs and produces a line-through.
Remove-all	Inhibits all propagated text decorations.

According to the line decoration specification the underlines, overlines, and line-throughs are applied only to text (including white space, letter spacing, and word spacing), while margins, borders, and padding are skipped. Elements containing no text, such as images, are likewise not decorated. And when specified on or propagated to an inline box, such decoration affects all the boxes generated by that element, and is further propagated to any in-flow block-level boxes that split the inline element. When specified on or propagated to a block container that establishes an inline formatting context, the decorations are propagated to an anonymous inline element that wraps all the in-flow inline-level children of the block container. For all other elements, the decorations are propagated to any in-flow children.

The example below demonstrates the use of text-decoration with the following styles:

p {

      font-size: 16px;

      font-family: Arial, Helvetica, sans-serif;

      font-style: normal;

      margin-left: 100px;

      width: 500px;

      border: solid #666666;

      padding: 5px;

}

article {

      text-decoration: underline; color: #0066FF;

}

em {

      display:block;

}

span.green_text {

      color:#336600;

}

And this HTML document snippet:

 <article>

      <p>

      <span>

        The article element is propagated to an anonymous inline element that surrounds the span element causing the text to be blue along with the blue underlining from the anonymous inline underneath it.<br /><br />

            <em>The color is being taken from the article element. The em block is also underlined as it is in an in-flow block to which the underline is propagated. The final line of text is green, but the underline underneath it is still the blue underline from the anonymous inline element.</em><br /><br />

            <span class="green_text">The text color is green!</span>

      </p>

 </article>

Figure A shows the result of the text-decoration underline example as displayed in both Chrome 14.0 and Firefox 7.01:

Figure A

The specification goes on to state that relatively positioning a descendant moves all text decorations affecting it along with the descendant's text; it does not affect calculation of the decoration's initial position on that line. The 'visibility' property, filters, and other graphical transformations likewise affect text decorations as part of the text they're drawn on, even if the decorations were specified on an ancestor element.

Here's an example of the text-decoration-line property styling with the overline value and using the moz prefix:

.text_decoration_overline {

      -moz-text-decoration-line: overline;

}

Figure B shows the result as displayed in Firefox 7.01:

Figure B

Text-decoration-color

According to the specification, the text-decoration-color property specifies the color of text decoration (underlines, overlines, and line-throughs) set on the element with text-decoration-line, and any computed color value is applied. An example of the text-decoration-color property in use is displayed below.

Text-decoration-style

The text-decoration style property specifies the style of the line(s) drawn for text decoration specified on the element. Values have the same meaning as for the border-style properties. The values available for the text-decoration-style are: solid, double, dotted, dashed, and wavy.

The following CSS3 declaration:

.snazzy {

    -moz-text-decoration-line: underline;

    -moz-text-decoration-style: double;

    -moz-text-decoration-color: green;

}

Figure C shows the result as displayed in Firefox 7.01:

Figure C