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

Google presentations wants to be your slide making tool of choice

By Mark Kaelin

Takeaway: Google has recently released a new version of Google presentations for their Google Apps suite of office tools that emphasizes collaboration.

Like it or not, the presentation is a necessary form of business communication that just about everyone has to create and deliver at least a few times during their career. The default tool used to create those presentations has for many years been Microsoft PowerPoint. Well, not to be outdone, Google has recently released a new version of Google presentations for their Google Apps suite of office tools.

New features

The primary new features added to Google presentations include:

• Character-by-character collaboration
• Drawing on canvas
• Transitions
• Shape linking
• Better animations

Like all of the Google Apps, the presentations tool takes a minimalist approach to the user interface. When you click Create a new presentation you are presented with the basic slide creation view shown in Figure A.

Figure A

The basic slide creation screen

Just like PowerPoint presentations, themes are often where your slide building starts, and Google presentations has several basic themes to choose from (Figure B), although you can see there are not nearly as many as there are in PowerPoint. (I'll leave it to you to determine if that is a good thing or a bad thing.)

Figure B

There are several basic themes available in Google presentations

Bottom line

Google presentations, even with the new features, is still a fairly basic tool for creating slides. However, it does have one advantage over PowerPoint that could make it more valuable to you and/or your organization and that is the collaboration features. The ability to share your presentation and collaborate on it simultaneously can be a real time saver and productivity booster.

Perhaps Google presentations is worth a try as an alternative to PowerPoint.

How Microsoft could (but probably won't) take over the world again

By Debra Littlejohn Shinder

Takeaway: Microsoft could be uniquely positioned to take over a number of market segments if they properly leveraged some of their existing product lines.

Once upon a time, it was popular to joke (or rant) about how Microsoft was bent on total world domination. Today, that is not so much the case. To the contrary, as I've noted here before, now it seems to be a popular misconception that Microsoft is a failing company.

Despite that belief, Microsoft could be uniquely positioned to take over a number of market segments — if they properly leveraged some of their existing product lines and recent acquisitions. Will they do that? Well, I'm not holding my breath, but I do think they might get it right with one or two of those markets. I guess I'm not the only one who thinks so, since many investment advisers are currently saying to buy Microsoft stock.

Microsoft has its fingers in many pies — some say too many — so there is potential for big success (or a big flop) on a number of different fronts. Here are some areas where I think the company could come to dominate (or continue to do so), if they play their cards right. I said last week that I don't think Microsoft should try to do this by emulating Apple. This week, I'll talk about what I think they should do to achieve domination in at least some parts of the technology world.

Tablets

Microsoft was pushing tablet PCs way back in the early 2000s, and a portable computer that could be operated easily when you weren't sitting at a desk was one of Bill Gates' dreams. They tried, with heavy, expensive slates and convertible laptops, then later with smaller Ultra Mobile PC (UMPCs), and the devices became quite popular in some vertical markets, but never quite caught on in the broader business world or with the general public.

Apple gets the credit for bringing tablets to the masses (on their third try, after the failure of the Newton and the Modbook). The iPad currently enjoys 73.4 percent of the tablet market share, but there are rumblings. Many users don't like the locked-down nature of Apple products. They want to know why they have to buy a whole new device to increase their storage capacity, instead of just popping in a flash card as they can do with most Android tablets. And they'd like it even better if they could connect their tablets to an external USB hard drive as they can do with their Windows laptops.

In fact, it seems that there are a lot of people out there who really, really want Windows on their tablets. That's the conclusion you have to draw from the result of recent surveys by Boston Consulting Group and Forrester, with percentages of those who prefer Windows ranging from 42 to 46 percent, iOS coming in at 16 to 27 percent, and Android at 9 to 20 percent.

That seems to indicate that, if Microsoft does tablets right with Windows 8, they could climb to the top of that market over the next several years. It won't happen overnight, but in typical Microsoft "slow-and-steady" fashion, they could overtake the mighty iPad. This is particularly true with Steve Jobs no longer there to lead Apple.

Phones

We already know that Gartner thinks Windows Phone has a good chance of overtaking the iPhone by 2015. Microsoft's "do over" of its mobile operating system got off to a slow start — in part because of bad experiences with Windows Mobile, in part because many consumers are wary of a first-generation anything, and in part because Windows Phone 7 was lacking many essential features, such as tethering and multitasking. These features (although they were also missing in the first versions of other operating systems) were standard on Android and/or iOS at the time WP7 hit the market. There were also rumors that salespeople with the major cellular carriers were actively discouraging customers from buying Windows phones.

But I think another important reason for slow sales among those "in the know" (who are also influential in what technology their less tech-savvy friends and relatives buy) has been the uncertainty surrounding the Windows Phone 7.x operating system.

There has been a general consensus that, with Windows 8, Microsoft's objective is "one operating system to rule them all" (more on that later). Does that mean the next version of Windows Phone will run Windows 8, and will it be backward-compatible with Windows Phone 7.x? Then there was the Nokia partnership. Will the Windows phones that come out of that be far better than the ones that are available today? I think many folks who are interested are taking a "wait-and-see" approach.

With the Mango (WP 7.5) update, though, Microsoft has proven that they're serious about making Windows Phone a contender. With more than 500 improvements, including the longed-for Wi-Fi tethering and multitasking capabilities, it might just be the beginning of the long road to world phone domination.

Gaming

The Xbox 360 has been on the top of the gaming console heap for the past many months, coming in at 42 percent in September, and the gaming business was credited with being an important factor in the record revenues that Microsoft posted for the most recent quarter. Although the total gaming market has been on the decline since 2008, it's still big business — a $43-billion business in 2010, to be exact. Market forecasts expect it to hold steady and increase slightly over the coming years.

The gaming market is dominated by software sales, and Microsoft is the software company with more experience than almost anyone. A recent trend has been toward games marketed as smartphone and tablet apps (e.g., Angry Birds), an area where Microsoft hasn't had much of a presence.

But with Windows 8 on the horizon and the new push to court Metro developers, that could change. If Microsoft makes Metro a platform that's friendly to game developers, we could see some exciting new low-cost game apps for casual game players, along with the more sophisticated console games that serious gamers prefer.

The integration of Xbox Live on Windows Phone is also a step in the right direction if Microsoft wants to dominate the gaming market. The ability to use your same avatars and play the same games from the phone would certainly attract hard-core gamers. In fact, the idea of using the same "virtual you" (avatar) across all your applications, not just games, is something that might just catch on.

I don't play games, but one of the most interesting and fun things that I did with my Windows Phone was create an avatar that I thought nicely represented my personality and general look. I would love to be able to use it in Internet communications where live video isn't possible or isn't desirable but where some sort of visual presence would add to the interaction.

TV and home entertainment

I've been a big fan of Windows Media Center since the original Windows XP WMC Edition. I was thrilled when Microsoft included it as a standard part of (some editions of) Vista and then Windows 7. I've tried a number of DVRs and PVR software, and I think WMC is the best.

We have a computer with four tuners running WMC on Windows 7 attached to our 65-inch Sharp Aquos in our media room and use it for all our TV recording and a Media Center Extender attached to the bedroom TV so that we can also watch our recorded programs there. We just recently invested in a HD Homerun Prime Ethernet network tuning device so that we can use a CableCARD to view and record premium HD channels on our Windows Media Center PCs.

I've been saddened by rumors that WMC either wouldn't be included in Windows 8 (since dispelled by Steven Sinofsky) or is not the focus of any new development (still up in the air). My hope is that Microsoft is not getting ready to ditch WMC entirely, but perhaps has other plans for it, such as incorporating it more fully into Xbox.

The Xbox can currently function as a Media Center Extender. How about making it a full-fledged Media Center itself that can record programs without being connected to a PC and then stream them (and your music, photos, home videos, Internet TV programs, and movies) to the other TVs in your home via DLNA?

If Microsoft turns the Xbox into much more than just a gaming console (which is certainly the direction they seem to be headed) and makes it a true home entertainment hub that can take the place of your TiVo or cable company-provided DVR, Windows Media Center might finally get the respect it deserves and Microsoft might take over the TV/home entertainment market. Neither Apple TV nor Google TV seems to have made much of a splash in the marketplace, so it's a segment that's there for the taking.

One OS to rule them all?

With the right strategy, Microsoft could pull this off and gain dominance in all these markets, along with the (shrinking but not going away anytime soon) desktop and laptop computing markets. Will Windows 8 be the linchpin that ties it all together? The same Windows that works across all your computing platforms would be a wonderful thing — if it works well on all of them. Microsoft would be positioned to integrate its products so tightly that it would seem silly to buy anything else.

It would also put Microsoft in a position where perhaps they could consider some really innovative ideas. Here's one that's really "out there": What about a smartphone that doesn't depend on the wireless carriers?

Most of the people I talk to hate their carriers. They feel they're overcharged for basic service and nickeled and dimed to death for extras. They hate the way they're locked into contracts in order to get affordable devices. They hate the way the carriers cripple features that are built in to the devices by the vendors or charge extra for you to use them (e.g., Wi-Fi tethering). They hate the new tiered data plans.

If Microsoft put a fully functional Skype on its Windows Phones and perhaps invested in helping to build out ubiquitous low-cost Wi-Fi coverage in all major cities and sold the devices outside the wireless carrier channels, how many people could and would dump their plans with AT&T or Verizon or Sprint? Sure, there would be some technological and regulatory hurdles to overcome, but if we're dreaming about world domination, what better way than to do an end run around the telcos?