Transforming the Avatars CSS3

We’ve completed all the styling for the speech bubbles themselves.
What about the avatars, the little images next to each speech bubble?
We could reuse some of the CSS3 effects such as box-shadow on them, but let’s do something new and use CSS3 transforms.
What are Transforms?
Transforms are a collection of effects, each called a transform function, that manipulate the box in ways like rotating, scaling, and skewing.

These effects would previously have had to be accomplished with images, Flash, or JavaScript. Transforming objects with pure CSS avoids the need for these extra files, once again increasing the efficiency of both your development and the pages themselves.

2D transforms browser support

2D transforms browser support

3D transforms browser support

3D transforms browser support

Just like text-shadow, transforms can sometimes have a usability and accessibility benefit by allowing you to replace an image of text with real text. For instance, you may have a feature box or ad containing text that you want to be at a slight angle. Before transforms, you might have created an image of that angled box—text and all—and used that image in your page. Image text is less accessible, not searchable, and takes more work to create and edit.

Obviously, you don’t want to start skewing and rotating all the text on your page. That certainly wouldn’t improve readability! But in small doses, and in cases where you were going to use an image or Flash movie instead, transforms can improve accessibility by allowing you to accomplish the same effect with real text.

Rotating the Avatars
Let’s look at the syntax for transforms by rotating the avatars. Add this new rule to the styles:

The prefix-free transform property is not yet supported by any browser; we’ve included it for future compatibility.

The transform property (and, for now, all three browser-specific equivalents) tells the browser that you want to apply a transform. You then specify that the particular transform function you want is rotate, and that the number of degrees of rotation, using the deg unit, is negative five. You can use either positive or negative values.

Other transform functions take different types of measurements—a value of -5deg doesn’t make much sense for scale, does it?—but the pattern is always the same:

transform: function(measurements);

You can also use the transform-origin property to specify the point of origin from which the transform takes place, such as the center or top right corner of the object. The default is the dead center, which is fine in our case, so there’s no need to add the transform-origin property here.

Save the page and refresh your browser. You’ll see that the avatars are now at an angle..

The rotate transform function angles the avatar images.

The rotate transform function angles the avatar images.

WORKAROUNDS FOR IE
IE’s Matrix filter can emulate several of the CSS3 transforms. Unfortunately, you have to do some complicated calculations using matrix mathematics to find the correct values to use in the filter.

To use the Transforms Translator, type rotate(-5deg) into the Step 1 input box and any width and height values you want (we’re not going to be using them, but they’re required to use the tool). Then click the Translate to IE Matrix button. The Step 2 box will appear below with two code blocks in it, one for CSS3-supporting browsers, and one for IE .

The Transforms Translator web site generates IE Matrix filter values that are equivalentto the CSS3 2D transforms you feed it.

Transforms Translator web site generates IE Matrix filter values that are equivalentto the CSS3 2D transforms you feed it.Transforms Translator web site generates IE Matrix filter values that are equivalentto the CSS3 2D transforms you feed it.

Copy the code from the IE box and paste it into the styles in the head of the page. Remove any comments from within the CSS:

This rule includes the filter property for IE 6 and 7, and the –msfilter property for IE 8. Make sure you keep the -ms-filter property all on one line—it won’t work otherwise. The filter property works with or without line breaks in it. The margin values are there because IE doesnt use the same origin point for the transform as other browsers, which would make the avatars slightly overlap the commenters’ names. Using margins or relative positioning nudges the elements into place to match up with the other browsers.

Now we need to change the selector to match the name of the element we want to transform, in this case .comment-meta img. We also need to divide the single rule into two rules: one for IE 6 and 7, and one for IE 8. Make sure you include the margin values in both rules.

If you save the page and preview it in IE now, you’ll discover that it works perfectly in IE 7, but in IE 6 the tops of the images are cut off, and in IE 8 the images overlap the commenters’ names slightly .

The rotation (in IE 8) looks good, but the avatars overlap the commenters names.

The rotation (in IE 8) looks good, but the avatars overlap the commenters names

The IE 6 problem is due to the negative margins on the images—IE 6 doesn’t display the part of an element that is outside its box if negative margins have moved it outside. To fix it, just add position: relative to the IE 6 and 7 rule:

The IE 8 overlapping problem is due to the fact that the negative margins don’t interact well with the other styles we already have in place.

Let’s use relative positioning to reposition the images instead of negative margins:

With these changes, the avatars are now rotated in IE 6 through 8 the same amount as in the transforms-supporting browsers, and they don’t overlap the commenters’ names below or the comment text to the right.

Instead of using the Matrix filter directly, you can use a premade script that uses it behind the scenes. A script has the advantage that you can then script changes in the transforms, to create animations or other effects, more easily. The cssSandpaper script, also by Zoltan Hawryluk, makes several transform functions as well as box-shadow, gradients, RGBA, and HSLA work in IE. The Transformie script by Paul Bakaus is a simpler script that uses jQuery.

The Finished Page
We’ve completed all the styling for the comments area, so check out your work in an up-to-date browser; you should see something like Figure below. Compare it to First figure showing the base page. It’s not a radical difference, but the completed page is visually richer and more unique.

The page with all CSS3 applied, shown here in Firefox 3.6.

The page with all CSS3 applied, shown here in Firefox 3.6.

ow) The small differences that do exist are OK; the effects we’ve added are purely decorative, and IE users will have no reason to think that they’re missing anything. Even if you choose not to add any of the IE workarounds such as filters that we’ve used in this chapter, your page will still look like First figure in IE 8 and earlier and be perfectly usable and attractive.

IE 8 (top left), IE 6 (top right), and the preview version of IE 9 (left)display all of the CSS3 effects we’ve added, but the page is still attractive and usable.

the preview version of IE 9 (left)display all of the CSS3 effects we’ve added, but the page is still attractive and usable.the preview version of IE 9 (left)display all of the CSS3 effects we’ve added, but the page is still attractive and usable.the preview version of IE 9 (left)display all of the CSS3 effects we’ve added, but the page is still attractive and usable.

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

CSS3 Topics