Finally, something not so outrageous using CSS3 that we can all understand

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.

(more…)

I’ve done small posts when I started doing this blog a while back, that included tips on how to hack certain browsers with CSS. I thought it would be good to list them all in one spot. I have been thinking of writing a small e-book that included all the things I have learned that I wish I knew from the start. Kind of like a super crash course in web development. Most of the things I write about, are things that would have been useful to me when I started out, but took a lot of time using google, reading, and just plain trial and error. I like to think I’m helping new web developers/designers get a kick start in their learning, and get ahead of the curve, which is what keeps me going. I actually really like mentoring new to intermediate web devs, and that is what keeps me writing this blog. Besides that, I actually end up learning more myself.

There are things that have to be done to make sure your site works in all browsers, and sometimes that means you have to do some things in your CSS to make sure everything is nice. I am going to show you the major methods of how to what we call “hack” a css file so that the browsers display the same thing. Let it be known, that it took me a while to be able to design a site without worrying about IE6. At the start, concepts of float, how margins and padding work, and other such things can be very confusing. I did a lot of hacking in the beginning before I knew how to build a site correctly. It would be great if you could just write the CSS and it all worked perfect, but even now, every once in a while, you have to do some fiddly things to get the older IE’s to cooperate. Let it be known, that I use the IE6 one quite a bit for image replacement, and if you do use these, you actually should put them in a seperate IE stylesheet. For getting things up and running quick though, I keep them in the main CSS file until I am done, and then take them out.

Now onto hacking!

(more…)