Ok, I will admit that this topic just popped into my head, mainly because of what I was doing at work, and then thinking of the HTML5 Boilerplate. I’m using that as a starting point to illustrate what I am talking about, not bashing it. I think the template is awesome and I am using it in my personal projects.

Let’s say we are using it to start a new site. It has a lot of awesome things in it to compensate for a ton of stuff. It has jQuery, a ready to go script page for your js, a nicely organized style sheet, dd-belatedpng.js for png support in IE6, Google Analytics code, Modernizer 1.5 js for HTML5 tag support in browsers that don’t actually support HTML5…and a few other things I can’t remember at the moment. For argument’s sake though, let’s just pretend that is it.

Now you start adding in your stuff

The blank js file for your code is already taken care of, so you don’t have to add that. But maybe you are adding a piece of Flash, which naturally leads you to throwing swfobject in. Ohhh, and that neat Nivo slider on there too! Hmmm….ok, downloaded and now added the plugin to your page.

That should be it right? Oh crap! Since we are being extra cool and tricky, we’ll need some sort of lightbox plugin, so insert that over there. THAT should be about it…oh…you are right, we want to use some sort of easing for that bit of jQuery you were planning, better put that in its correct spot. Done? Maybe?

Is there such a thing as too much

This is just the kind of stuff that I can think of adding that might make sense. You could probably take a few of those off if we are being reasonable. I’m a reasonable kind of guy. Now take into account a customer who thinks they know what the #@$% they are doing and says “I saw this piece of utter crap on this other site, and I want mine to do that to. Oh, and the twitter-y posting thing on the sidebar thinga-ma-jigger, ya I want that also. Ohhhh, you know what would also be the cat’s meow? That other piece of stupid I can barely describe to you in regular English, but is nearly impossible without you seeing my hand movements!”

Now that was sort of for comic relief, but I think you get the point. Go back to before the made up customer bit. Is there a point where it is just too much being added? Where does it stop? The HTML5 boilerplate is awesome the way it is. I can add my own jQuery functions without adding another request, it takes care of a lot of old browser issues (which for some reason I am very opposed to letting go for some idiot reason), and basically is my dream starting template. There are going to be a ton of people adding on to it though. Tons more scripts, and what-not…PLUS things we haven’t even heard of yet to be inserted into the page later.

I don’t want to use the word, but all I can think of is bloated. A word I use to describe certain IDE’s I have tried that have too many feaures. But honestly, do we actually need to use all that crap? For all the headaches we can think of in web development, IE, with all its versions, really adds to this “bloat”. If you dropped everything but IE9, when it comes out of course, you could probably drop the modernizer js, the png fix, no more PIE, and the other crap we need to make the lesser versions work. This is BEFORE we actually do ANY kind of design and layout work, too!

I’m not trying to tell you what to add or not to add to your websites to make it awesome. I’m just trying to make you stop and think for a minute, and maybe answer my question in the comments (they would be very welcome!). So…..where, if there is such a thing, is the cut off point, where we just say “This is getting ridiculous! No more clutter!” Maybe we aren’t there yet, but it just seems like we are getting close to that line with every new bit of cool we add.

I’ll leave you with a musical quote that has nothing to do with this topic, because I am listening to Children of Bodom right now (favorite band at the moment): “Waiting for you I want to just tell you, if you want peace, prepare for war!”

Coupon Code: webmachine

I received a tweet the other day about these cool CSS3 buttons called BonBon Buttons. The site says they are named after the French word for candy, but after looking at them, they look like Pez to me. Hmmm…that is what I will call mine…Pez! Regardless they are very pretty. Even better, the creator of them lists where it won’t work. He was just tooling around one day and made these buttons. Well, I decided to do the “poor man’s version” of those. And unlike the BonBon buttons, my Pez button will work in IE6 as long as you use CSS PIE, with the exception of text-shadow, and the radial gradient. Those two properties don’t add all that much, and even without them they look good in IE.

View Demo

Are there 4 tons of CSS involved?

There is well over 100 lines of CSS in the BonBon version, so I wanted to reduce that amount to something close to manageable. It still looks good, but I had to cut a bunch of stuff out. Here is a look at the actual CSS code for my button.

a {
position: relative;
font-size: 24px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
color: #76A14B;
text-decoration: none;
text-align: center;
-webkit-border-radius: 25px 10px 25px 10px;
-moz-border-radius: 25px 10px 25px 10px;
border-radius: 25px 10px 25px 10px;
border: 2px solid #BFE599;
padding: 10px 20px;
display: block;
width: 100px;
margin: 0 auto;
-moz-box-shadow: 0px 6px 0px #76a14b, 0 12px 9px #666666;
-webkit-box-shadow: 0px 6px 0px #76a14b, 0 12px 9px #666666;
box-shadow: 0px 6px 0px #76a14b, 0 12px 9px #666666;
text-shadow: 2px 2px 5px #ffffff;
behavior: url(images/PIE.htc);
}
 
.glassy {
background: -moz-radial-gradient(center top , ellipse farthest-corner, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%), -moz-linear-gradient(top, #CCFF99, #99CC66);
background-image: -webkit-gradient(radial, 100 100, 32, 118 118, 15, from(rgba(255, 255, 255, 0)), to(#ffffff)), -webkit-gradient(linear, 0% 0%, 0% 100%, from(#CCFF99), to(#99CC66));
-pie-background: linear-gradient(top, #CCFF99, #99CC66);
}

The glassy part adds the background gradients as well as white radial gradient at the top of the button. So I reduced it down to like 30 lines of CSS for a pretty cool button.There are a few things to note:

1) As stated before, you MUST use CSS Pie for this to work in IE.

2) Ignore the webkit radial gradient, because I didn’t figure out how to do it correctly. Webkit’s syntax is a pain in the ass, so I just didn’t get it working correctly. If anyone wants to get that part done and post it, that would be great.

3) For IE6 to work, the ‘a’ tag MUST be positioned relative. The effects get blow away if you do not.

Final thoughts on this little experiment

The really cool part for me about doing this, is that I’ve used two things/techniques from my previous posts. I’m using CSS Pie, and using multiple box-shadows on an element, which I wrote about here.

I really like taking other people’s code, and seeing if I can do it with less code. Granted, here I am leaving some things out, but the overall effect comes through. My Pez button still looks like candy, and it didn’t take a vast amount of CSS to work. Would I use this button myself rather than cut images? Actually, with it pre-made, yes. If it wasn’t, then no. It took me a while to get everything the way I wanted it, and you just can’t waste that much creating a single button. So in production, I would have Sliced ‘n’ Diced an image. Now, if you had a library of pre-made, small weight budget CSS3 buttons, then I might start using these types of things more often. Maybe I’ll start one and throw it out for you guys.

Take the code above and have fun with it. If you come up with something better, let me know!

Coupon Code: webmachine

There are four types of positioning: static, fixed, relative, and absolute. Static is the default position state which means it isn’t positioned. It goes where it normally would on the page. Fixed is positioned relative to the browser window, and won’t move even if the window is scrolled. Relative positioning allows you to use the top, right, bottom, and left CSS properties to position an element relative to where it would appear in the document. Absolute is the tricky one, because it is basically removed from the document, and placed EXACTLY where you want it to go.

A note on :relative

If you position something relative, and then use top and left to shift it over, don’t expect everything below it to shift as well. It still occupies the space in the document normally, you are just shifting it from its initial placement.

Let’s take a look

View the following demos to get a clearer picture of what I am talking about.

When you position something absolute, you need to remember that it is removed from the flow of the document – everything else will ignore it. The element is positioned relative to the first parent element that has a position other than static, if there are none, it will use . If that is the case, and you set the element’s top and left to 0, it will appear at the very top left edge of the window. No matter how you resize that window, that element will always be at the very top left. Take a look at what we would have.

View Demo

Here is what the css looks like:

#one {
width: 966px;
background: #999999;
margin: 40px auto;
}
 
#two {
	position: absolute;
	top: 0;
	left: 0;
	background: #ff0000;
	width: 200px;
	height: 50px;
}

How to put it where you want it

Let’s say though, that you want an element in a specific spot that shows exactly where you want it all the time. Easy. Position one of its parents to relative!

View Demo

Here is what the css would look like:

#one {
position: relative;
width: 966px;
background: #999999;
margin: 40px auto;
}
 
#two {
	position: absolute;
	top: 50px;
	left: 500px;
	background: #ff0000;
	width: 200px;
	height: 50px;
}

All that was changed, was adding position: relative to div #one, and changing the top and left numbers to div 2. Change them to 0 using Firebug, and you will see that 0 means positioned at the top left of div #one now.

One is never enough

Ooohhhh…I get it, you can’t just have one. You want another div there positioned absolutely. AND…you want this new div to appear under the red one.

View Demo

#one {
position: relative;
width: 966px;
background: #999999;
margin: 40px auto;
}
 
#two {
	position: absolute;
	top: 50px;
	left: 500px;
	background: #ff0000;
	width: 200px;
	height: 50px;
	z-index: 2;
}
 
#three {
	position: absolute;
	top: 85px;
	left: 550px;
	background: #999900;
	width: 200px;
	height: 50px;
}

All I changed there, aside from adding the styles for div #three, is add z-index to div #two. It doesn’t matter what order the absoluted divs are in, just what z-index they have. Whichever element has the higher z-index, will show on top.

Closing thoughts

CSS positioning is actually very easy. Once you know how to use them, figuring out why an element isn’t positioned the way you thought it would be, becomes a lot easier, too. I can’t think of a time where I have used :fixed, but :relative and :absolute are thrown around enough that it is a must to learn if you haven’t yet. Hopefully now, you get a more clear picture of what they do, and how to control them! Let me know if you have any questions.

Coupon Code: webmachine

So I read an article today that I thought was going to suck. Nope, I was wrong. While I knew most of it, there was one thing that popped out at me today. See? Learnin’ all the time! CSS3 has some cool stuff that is easier to do than opening up Photoshop and creating an image for it. If you got my tweet today, which most of my subscribers didn’t because you don’t follow me on twitter (FOLLOW ME!), then you have an inkling of what I am talking about.

Text-shadow is a really good addition to CSS, I use it on my titles and what-not, and with the use of blur on them, it creates a nice subtle effect. What I did NOT know, is that you can have multiple shadows on the text, adding more awesome to the already kick ass property. Let me show you what the styles look like.

text-shadow: 4px -2px 11px #0033FF,
	2px -7px 10px #00CCFF,
	5px -8px 26px #00CCCC,
	 4px 6px 9px #999999;

VIEW DEMO

Yep! You read that right, there are 4 shadows going on there

Holy hell, 4 text-shadows thrown on to create, while not a stellar looking effect, a crazy looking block of text. You know what is even more nuts than that? Can you guess? GOOD JOB! You guys are smarter than I thought, and you are right. You can add as many text-shadows as you want on that thing, seperated by commas. Not only that, but you can do the same thing for box shadows.

This just proves that there is always something new to learn about the things you think are are good at. Obviously I won’t be using this type of effect all that much, but it altered my way of thinking about CSS3 a little. If I can do this…maybe I can do something else that I didn’t think of.

Any other CSS3 stuff you guys know that others might not? Let us know here!

Oh, and I styled the demo buttons finally. Always adding stuff here.

Coupon Code: webmachine

$('p:only-child').addClass('highlight');

If you haven’t at least heard of the HTML5 Boilerplate template, then you live in a dark cave as a hermit and are still using Photoshop 3. If you have, but haven’t checked it out, then you 100% need to. I downloaded the files (it comes with a few) and looked through it. Thank the gods it is commented so well, because there are a few things that I didn’t know going on.

It is an HTML 5 starting template loaded to the teeth with everything you could need…and then some. Just some of the things in it are: script tags to jQuery 1.4.2 (hosted on Google), Modernizer 1.5 js (see comment below by Paul Irish clearing things up for me on this), Google analytics code, Meyer’s reset CSS, conditional comments…this thing is PACKED with awesome.

Personally I’m going to remove some things, because I don’t need them, which is perfectly fine because this file is delete friendly. What I am going to add is CSS PIE. But that is the brilliance of it. It’s a great starting point, and you can do what you want with it. So go download it!

Conditional Commenting Genius

Forget about using conditional stylesheets now. Use this:

<!--[if lt IE 7 ]> <body class="ie6"> <![endif]-->
<!--[if IE 7 ]>    <body class="ie7"> <![endif]-->
<!--[if IE 8 ]>    <body class="ie8"> <![endif]-->
<!--[if IE 9 ]>    <body class="ie9"> <![endif]-->
<!--[if gt IE 9]>  <body>             <![endif]-->
<!--[if !IE]><!--> <body>         <!--<![endif]-->

This is great, because now you don’t need the extra CSS files for IE problems, and you don’t need to use hacks. For example, let’s say you have margin or something that is going bad in IE6. If the browser detected is IE6, then it puts the class “ie6″ onto the body. You would then write the CSS like this:

#myContainer {
margin: 20px 20px 0 10px;
}
.ie6 #myContainer {
margin: 20px 10px 0 5px;
}

Easy? YES. And awesome. Not much else to say about it other than start using this instead of whatever else you were doing, because this was better.

Things to come at The Web Machine

Well, as you may know from previous posts, I’m starting to learn how to theme Magento, which will come in handy, because I will be selling HTML/WordPress templates. Unique, not templates. Meaning only 1 of each will be sold. If you buy it, no one else will have it. Along with that I plan on writing more on Magento, maybe my own tutorial on how to theme it, or whatever strikes my fancy. Plus I am starting to FINALLY learn PHP, so I plan on throwing some articles on that here as well. More things to write about, so stay tuned folks!

What are you guys learning? Let me know!

Coupon Code: webmachine

Everyone know how to fix the the double margin IE6 puts on an element that has a left/right margin on it, without using a hack? If not, it’s an easy one…set display to inline. That’s all it takes. Have you ever run into the 3px margin gap though? This took some hunting for me to find out how to fix it. If you have any idea of what I’m talking about, you will know how infuriating it is. A co-worker and I ran into this problem months ago, figured out how to fix it, and forgot about it. The problem came back, and we drew a blank. Basically, we are using a component that says “Hey, if a flash banner is present, use it, otherwise, use this image over here instead.” Well, when it puts the image in, it doesn’t give it a height or a width. Why would that be a problem? Because it doesn’t have ‘Layout’ according to IE.

What does ‘hasLayout’ mean?

I’ll give you the definition that I got from here: “Layout” is an IE/Win proprietary concept that determines how elements draw and bound their content…”.

I would like to be able to explain why this happens, but the link above does a better job of it than I ever could. I just want you aware of what happens. To better illustrate this, take a look at the link below in IE6.

Click here for demo (again, look at it in IE6 – you won’t see it in any other browser).

I’ve read now a bunch of very bad ways to fix this, like using a negative top margin to move the bottom div up. Pure dumb, because there is an easy way to fix this. I’ve used zoom set to 1 before, but that doesn’t validate, so if you are one of the purest, this isn’t an option. Plus, this won’t work on this anyway. Real easy way to fix it. Give the image itself a display of block. Pure easy right? Now, I know most of you are not going to run into this problem, or maybe you just don’t care. I’m just demonstrating this so you are aware of it, and know how to fix it. It took me a while to figure out it had to be put on the image itself, and not the containing div. When using Spoon for Firefox, IE Developer kept showing text nodes underneath the image, so I was looking for a way to get rid of that. After about an hour of fiddling and trying everything I finally got it. And so do you now!

Let me know if you have come across any wierd IE bugs! I am always looking for stuff like that and how to fix them.

Coupon Code: webmachine

$('#container > *').css('color', '#000000');

Note: Comments have been disabled on this article due to an INSANE amount of spam ping comments. Must have been my title or something.

We can all agree that CSS3 added some really cool stuff. Linear gradients alone made it worthwhile for me. Add in border-radius, box/text-shadow, transitions (available in FF 4 if you didn’t know yet) and whatever else I’m forgetting to mention, and you have a pretty good upgrade to CSS. Today though, while working on a site, I was frustrated by something that CSS can’t do. I Google’d the hell out of it, and I couldn’t even get the right topic to come up. It made me stop and think that, ya all those cool effects are great, but there are some things I would like it to do beyond that.

Plotting Div Points

I didn’t think of it until today. I work within a custom content management system that feeds default content into specific sections on the site. I want the main content block, I call a specific ‘id’ on a div, and boom, it throws in some default content pertaining to whatever market I am building for. The problem though, is I can’t put a div/image/whatever into that content block, until after the site is ordered. Not a problem if I am building a custom site, because I have the ability to change that content. If I am building a template site though, I don’t have that ability because it has to fit any number of clients. What I needed today, was to wrap text around another div. See the image below and you will see what I mean.

NOTE: I think I am going to build this and sell the template here, so if you are interested, contact me!

Easy stuff normally right? I’d put the div in the content wrapper, and float it right, then everything wraps around it. Done. Not in my case though, where I can’t inject further code into the default content. What I WANT CSS to be able to do, is allow me to plot the points of a div. In other words, I want to be able to control the shape of the div. The picture below shows what I want the div to look like.

What would the CSS look like?

Now that you see the basic shape I was looking for, what would the CSS look like for something like that? Well, here is a crack at that:

.mainContent {
border-points: 0 0, 0 200, 200 200, 200 400, 400 400, 400 0, 0 0;
}

What would all that mean though? Each two number set would plot a point for the div, so if you always start at the top left most corner, (top: 0, left: 0) you would tell the CSS where to plot each following points. In this case, the second point would be at 0px from the top, and 200 left of the starting point. The next would be 200 from the top, and 200 left. Then 200 from the top, and 400 left. And so forth until you completed the div again at 0 0.

But what if you wanted a circle?

.mainContent {
shape: circle;
shape-size: 200px;
}

Where is my flying car?

Obviously I’m coming up with the ridiculous CSS crap off the top of my head, but I think you understand what I am talking about. To me this is like the question “Why don’t we have flying cars yet?” CSS has been around a while, I would think it should be able to do some things like this. I don’t think it would cause to many issues with layout, that floats and proper math couldn’t handle. Now that you have read this, what do you think? Am I insane for expecting or wanting such a thing? Can you see a use for it? Seriously, imagine getting HTML text to wrap inside a circle or triangle shape? Some cool stuff could be done.

Do you have any CSS wish list items? Let me know, or tell me my idea is good or crap. Let’s talk!

Coupon Code: webmachine

$('.myClass div').innerHeight;

A little while back I wrote an article about getting border-radius working in IE. Well, if you haven’t been keeping up in the blogging world, I came across CSS PIE. It basically does the same thing, only more. If you use things like box-shadow, linear-gradients, AND border-radius, then this is the version you will want to use. Basically the same call in the css file:

.myClass {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 2px 2px 5px #000000;
-webkit-box-shadow: 2px 2px 5px #000000;
box-shadow: 2px 2px 5px #000000;
behavior: url(/PIE.htc);
}

The last line there is the obvious call to the htc file you have to download, which you can get here.

A couple things to note:
1) Again, like the other one I talked about, the htc file is relative to the html file, NOT the css file. So either make it absolute from the domain root, OR, relative to the html file.
2) There are issues with static positioning and background images, which you can also read about here (I had to find this out the hard way with the other version I used). Easy solution is to make the target have position set to relative.

Other than that, this works like a charm. Works on IE6-8.

Conclusion

Usually I am not so into these types of things because you have to add a script to make it work. Not so here, and I see no reason for not implementing this in all of my projects. All you have to do is upload the file to your server, and you are done. Well other than making all the behavior calls to it in the CSS file.

Coupon Code: webmachine

var myMovies1 = ['Rocky','Better Off Dead','The Last Samurai'];
var myMovies2 = ['Goonies','Hangover','40 Year Old Virgin'];
$.merge( $.merge([],myMovies1), myMovies2);

It’s funny how many things from my job come up as posts. Well, I guess not funny, because I end up working on things that I am not familiar with and have to fix. Which is the case tonight. I’m not sure if you have read any articles, but there are plenty, about getting the CSS3 property border-radius to work in IE. It is actually rather easy, so let’s get to it, and I’ll show you how!
Actually, I’ll tell you how. And then I’ll tell you some of the troubles I ran into.

Wait, that’s it?

So getting your rounded corners is pretty damn easy. There are three things you have to do:

1) Go here and download the htc file.
2) Place the downloaded file in your images folder
3) In your CSS file, on the style that you want the rounded corners you add something like this:

.roundedClass {
-moz-border-radius:10px;
-webkit-border-radius:10px;
behavior:url(images/border-radius.htc);
}

This being the important part:

behavior:url(images/border-radius.htc);

Where ever you are using the border-radius properties, you want the behavior added as well. Note that this does not work at all on anything in a form. So inputs, buttons, whatever…if it is in a form, I could not get this damn thing to work. Also, make the path in the behavior line relative to the document NOT the CSS file. Got it? If for instance, the .htc file is in the images folder and you are dealing with a root level document, then it would be images/border-radius.htc. If you have any questions about this, post a question in the comments section.

IE8 is not very nice – pay attention here!

I learned something while doing this. IE8.0.6 and IE8.0.76 handle this differently. First, the element with this property on it should be positioned to relative. If you have text on top of it, then that will have to be wrapped in something and also positioned relative. Example:

<div class="roundedClass"><p class="textClass">This is the text that goes on top of the rounded corners div</p></div>

If you did this:

<div class="roundedClass">This is the text that goes on top of the rounded corners div</div>

Then IE8.0.76 doesn’t play nice. IE8.06 however will work fine. I have NO idea why, but that is how it is.

To conclude

Have two wrappers (elements)…both positioned relative, the outer has the behavior and border-radius properties. Piece of cake. This works in IE6-8, and once I figured out the two wrappers and position relative thing, everything worked beautifully. Again, if you are still confused, ask away!

I will leave you with a quick tip. If you have multiple tabs open in IE8, press ctrl+q. It will show all the tabs you have open in one window, which you can then pick the one you want to view. Works kind of like Apple’s Expose. I wish I had known that a while back. It is actually a feature that they should have been promoting more. Especially considering that FF4 will have this feature now as well.

Coupon Code: webmachine

$('#wrapper').detach('ul');

I got a link through twitter about a raindrop done using CSS (don’t bother looking at this in Safari or Chrome, because he write the additional CSS for that). Normally this is the kind of thing that I will look at and say cool, but waste of time. This one caught my eye though because it is actually pretty simple. I’m not going to recreate the damn thing, but all it is, is a bunch of divs and a surprisingly small amount of CSS. I was actually impressed with this one, and I think it could have been done with just an ul and list items. Now, I would still use an image in a real life situation, but I picked this piece because I did not really know how to use the new gradients. This guy obviously does.

Learnin’

That led me to do some small bit of research and tests, and found it is not all that hard, just slightly confusing to get a grasp of what the numbers do. On top of that, the CSS Safari uses to do radial gradients is pretty different.

Some things to note about Safari while doing my demo. I could not get it to recognize percentages for the values in the border radius, so I had to do pixels. I’m not sure it can or not, and I didn’t find anything about it. Safari 5 does not need -webkit- in front of border-radius – it will still use it, so I would include it anyway to support the older versions.

If you look at the demo, you can see a div with a basic radial gradient, with rounded corners set to 100% in FF, and 300px in Safari. This should appear as a circle with red in the middle, then orange fading out to yellow. The second, is just to show you something easy to do with it. It is a png with the word GRADIENT cut out of it, and a drop shadow layer style put on. It then has a div behind it with a radial gradient, which if you ever wanted to change the colors, you wouldn’t have to use photoshop to do it. Just change the CSS!

Click here for demo.

So how do you do it already?

It took me a while to understand what all of the numbers meant, and how to move the gradient around. Using the image below, I’ll explain what each does in plain English. After reading it, the best way to really get a grasp of it is to mess with it in Firebug, adjusting the numbers.

Firefox:
A: This number, as it goes down, moves the center of the gradient left/right, while shrinking/increasing the amount of the center color displayed.
B: Same as A, only top/bottom
C: Adjusts the angle of the gradient, but in circle shape, this doesn’t do anything
D: Shape of the gradient – This can be circle or ellipse
E: Size of the gradient. This is like PS, where you can start and end your gradient at any point. This can be set to: closest-side, closest-corner, farthest-side, farthest-corner, contain (same as closest-side), and cover(same as farthest-corner)
F: This is the center color of the gradient
G: The color stop position – can be from 0 – 100%

Safari:
A: This sets what type of gradient: linear or radial
B: Moves the gradient left/right and top/bottom while keeping the center of the gradient in the middle (will look like a cone if you move the numbers far enough
C: How much you are fading in or out the center color
D: Moves the center of the gradient left/right and top/bottom while keeping the gradient in the middle
E: How much of the center color that is solid (not faded out) – mess with this and you will see some cool stuff!
F: The outer color
G: The center color
H: Think of this as the color between the outer and inner colors, and its percentage to show. Note you can do a very smooth gradient without F & G, and only use a bunch of color-stops.

Here is the CSS I used for the circle:

#container {
	-moz-border-radius: 100%;
	border-radius: 300px;
	width: 300px;
	height: 300px;
	margin: 50px auto;
	background: 
		-moz-radial-gradient(150px 150px 0deg, circle closest-side, #ff0000 0%, orange 50%, yellow 100%);
	background: 
		-webkit-gradient(radial, 150 150, 100, 150 150, 40, from(yellow), to(red), color-stop(.4,orange));
}

Take a look at the demo, copy the HTML and CSS, and start messing around. Once you start fiddling with it, everything will start to make sense. Hopefully my image and little lists helped you to understand CSS3 radial gradients better, and you get a clearer picture on controlling them. Now you can go and do some experimenting and come up with more raindrops.

Coupon Code: webmachine

$('.touchThis').live('click', function() {
alert('You totally just touched that!');
}