Fooling Around With CSS 3

Just like HTML5, CSS 3 is around the corner. While there are issues to resolve between the browser makers, what they have unleashed upon us is very cool stuff.

I believe that some of the new stuff in CSS 3 will save time for us web developers by making our trips to the Adobe Photoshop lab a little less frequent. Let’s take a look at some of these now. This is the link to my HTML5/CSS 3 test page. Check out the CSS3 Fun Box for more details.

Text-shadow (x y spread color)

text-shadow:2px 2px 2px rgba(0, 0, 0, 0.5);
-moz-text-shadow:2px 2px 2px rgba(0, 0, 0, 0.5);
-webkit-text-shadow:2px 2px 2px rgba(0, 0, 0, 0.5);
-o-text-shadow:2px 2px 2px rgba(0, 0, 0, 0.5);

One trend you will notice through this article is that each major browser vendor that supports certain CSS 3 features with their own prefixes. Whether this will change or not remains to be seen. In the example I gave, you will notice that I am using CSS 3’s rgba() color property. RGBA + alpha blending = sexy! One note, when I say “spread” I mean the size of the shadow!

@font-face

The problem is the license to use fonts because the fonts that are used with @font-face are downloaded to the user’s computer. This amounts to distribution which is a no-no. There are sites out there that provide royalty-free, licensed for use anywhere fonts.

It should be noted that @font-face has been supported in Internet Explorer since version 5.

font-family: 'GothicUltraOTRegular';
src: url('/fontfolder/thisfontname.eot');
src: local('☺'), url('/fontfolder/thisfontname.woff') format('woff'), url('/fontfolder/thisfontname.ttf') format('truetype'), url('/fontfolder/thisfontname.svg#webfont3qU53HXT') format('svg');

From here you may add this font style anywhere you wish like so:

.cssTestFontFace {
font-family:GothicUltraOTRegular, sans-serif;
font-size:30pt;
}

Border-radius (px)

This, long-awaited, CSS 3 property is finally here and when in use with box-shadow, it makes for some cool containers sans Adobe Photoshop.

border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-o-border-radius:10px;
-khtml-border-radius:10px;

It would be so much easier if and when they drop the prefixes from the properties. Just stating the obvious!

Box-shadow(x y spread color)

box-shadow:3px 3px 5px rgba(0, 0, 0, 0.5);
-moz-box-shadow:3px 3px 5px rgba(0, 0, 0, 0.5);
-webkit-box-shadow:3px 3px 5px rgba(0, 0, 0, 0.5);
-o-box-shadow:3px 3px 5px rgba(0, 0, 0, 0.5);

Gradients

CSS gradients, for me anyways, are set to replace Photoshop created gradient backgrounds. Unlike the previous CSS properties, there is a difference between Mozilla and Webkit’s implementation of this property.

background:-moz-linear-gradient(90deg, #690 5%,  #ffffff 55%);

Here, I am creating a linear gradient in Firefox. The gradient is set at a 90 degree angle (meaning straight up and down). The second set of values are the color and the color stop (#hex or rgb color_stop%). The color stop is what it says, it is where you want the color to stop.

background:-webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#690),  color-stop(0.45, #ffffff), color-stop(1.0, #690));

Now I am creating a linear gradient in Webkit browsers (Safari and Chrome). Using left top and left bottom is about the same as using 90deg. The color and color-stop values are separated but they are pretty clear. The color-stop values are represented by number with decimal places instead of percentages – but you can think of 0.45 as 45% and 1.0 as 100%.

Webkit’s linear gradient is a lot more straightforward and less confusing than Mozilla’s. For instance, Webkit’s gradients are in order. The color starts with white, ends at .45 (or 45%) of the box and then continues with green until the end of the box, 1.0 (or 100%). Mozilla’s seems to go in reverse or something… in other words there is trial and error involved with Mozilla’s implementation of CSS gradients.

Word-wrap

If you ever had problems with people displaying a large line of text in a box that has a defined width, this is one of the new ways that should solve your problems.

word-wrap:break-word;

Break-word and normal are the two values that can be used with word-wrap. Normal is default.

Text-overflow

Text-overflow is good for when you are limited on space and you need to show a bunch of text. While you can use JavaScript to show the text in an event, I decided to just use “#elem.hover” in the CSS code. Brace yourself for a long code chunk…

#cssTestTextOverflow1, #cssTestTextOverflow2 {
width:200px;
height:20px;
overflow:hidden;
border:1px solid #000;
white-space:nowrap;
}
#cssTestTextOverflow1 {
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
-icab-text-overflow:ellipsis;
-khtml-text-overflow:ellipsis;
-moz-text-overflow:ellipsis;
-webkit-text-overflow:ellipsis;
>}
#cssTestTextOverflow2 {
text-overflow:clip;
-o-text-overflow:clip;
-icab-text-overflow:clip;
-khtml-text-overflow:clip;
-moz-text-overflow:clip;
-webkit-text-overflow:clip;
}
#cssTestTextOverflow1:hover, #cssTestTextOverflow2:hover {
overflow:visible;
}

Once again, the use of prefixes makes coding text-overflow a small pain. But, as you can see, making text-overflow work is not a problem. As a bonus, it works in IE 8!

Note: The next three CSS 3 properties (Outline, Box-sizing and Transitions) are mixed in with the same example on my test page!

Outline

Outline is basically the same thing as border except you can space out the outline from the box. It’s pretty easy and you can also use border and outline with the same container.

outline:1px solid #000;
outline-offset:5px;

Box-sizing

With box-sizing, you can manipulate the traditional box model in CSS. Normally, when the width and height of a box are set, the padding and borders are not taken into account. Only the content within the box is measured. In box-sizing this is the default behavior and this value is called content-box.

By using padding-box, the set width, set height and padding are calculated (not margin!). If you use border-box, the set width, set height, padding and borders are calculated (not margin!). For instance, if your box width is 200, padding is 2px and border size is 5px then the actual width of the box is 214px. No more guessing!

box-sizing:content-box;
-moz-box-sizing:content-box;
-webkit-box-sizing:content-box;

Transitions

Transitions are another long-awaited feature of CSS 3. They are also the subject of some talk. Commentators have questioned as to whether or not CSS should be handling animations when JavaScript does the job just fine. It’s a fair question but, the browsers handle the animations, not CSS. With transitions in your CSS, all you are doing is telling the browser what to do and for how long to do it. In other words, it’s just like every other CSS property!

Most of the transition examples I have seen have been activated by :hover. I made an “onclick” transition which, increases the with and height of a box and then decreases it using another “onclick”.

-moz-transition-property:scale;
-moz-transition-duration:500ms;
-webkit-transition-property:scale;
-webkit-transition-duration:500ms;
-o-transition-property:scale;
-o-transition-duration:500ms;

There are multiple ways you can set up a transition in your CSS. You can do it long hand like the example above or by doing this:

-webkit-transition:scale 500ms;

There are also timing values that you can add to your transition. You can read more about them here. Transitions also do not work with every property. You can see a list of the accepted CSS transition properties here.

There are a few ways to “execute” your transition. Besides using :hover, you can also use JavaScript to “execute” your transition. There are a couple of ways to do it in JavaScript, first you can change the class name. In your CSS file, set up a class with what your element’s transition. Remember that my box increases in size with a click and then decreases in size with another click.

/*Size increase*/
#cssTestTransitionBox.cssTestTransitionUp {
width:100px;
height:100px
}

/*Size decrease*/
#cssTestTransitionBox.cssTestTransitionDown {
width:50px;
height:50px
};

Next you can change the class name via JavaScript (kumpi means which in Finnish, a habit from my last job):

function transitionScale(kumpi) {
if(kumpi == "up") {
document.getElementById("cssTestTransitionBox").className = "cssTestTransitionUp";
}
else if(kumpi == "down") {
document.getElementById("cssTestTransitionBox").className = "cssTestTransitionDown";
}
}

This is nice and all but, in my opinion, there’s a better way to do this. Instead of changing class names, we make DOM style changes.

function transitionScale(kumpi) {
if(kumpi == "up") {
document.getElementById("cssTestTransitionBox").style.width = "100px";
document.getElementById("cssTestTransitionBox").style.height = "100px";
}
else if(kumpi == "down") {
document.getElementById("cssTestTransitionBox").style.width = "50px";
document.getElementById("cssTestTransitionBox").style.height = "50px";
}
}

Now there’s no need to set up separate classes in your CSS. All you need to do is set your transition properties and then use JavaScript to make DOM style changes.

You can make more than one transition. You can increase the size of an element and change the background color right after. In JavaScript, you can add an event listener to the element that you are transitioning. When one transition is done, the JavaScript will pick up on the event and “execute” the next transition or whatever else you wanted to do. Opera, WebKit and Mozilla all have their own events for this, which are: oTransitionEnd, webkitTransitionEnd and mozTransitionEnd. This is one way you can set this up:

document.getElementById("cssTestTransitionBox").style.width = "100px";
document.getElementById("cssTestTransitionBox").addEventListener("oTransitionEnd", function(event) {
this.style.height = "100px";
}, false);

In conclusion

Remember, as of writing of this post neither Firefox nor IE support transitions. I tested mozTransitionEnd in Firefox and I could not get it to work. This should change in November when Firefox 4 comes out. There is no word as to whether IE 9 will support CSS transitions. IE already supports transitions using filter. But, that’s giving Microsoft an excuse not to completely adhere to standards.

Speaking of standards, please take note that CSS 3 is not finalized and it is not standard as of yet. If any of the properties I talked about change, I’ll do my best to reflect those changes here.

Advertisements

About gopha

Gopha is a web programmer, techie and heir to several Nigerian fortunes. In his spare time he likes to game, spend time with his wife, daughters and dogs. He eats [far too much], watches TV and lift weights. He also like to take moonlit walks on the beach and sing songs next to a roaring campfire, in a white sweater with his acoustic guitar. View all posts by gopha

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: