Posts Tagged ‘CSS3’

Buttons: Part 2

Saturday, May 30th, 2009

I guess I was younger, back when I made my first set of buttons. I went back to them today, and found that they didn’t work in other browsers. Also, I wanted to see if I could make them with HTML (seems like my latest craze).

Webkit is stuffed full of strange and amazing tags that let you set background gradients, text shadows, rounded corners, rotations, and pretty much anything else you could want. It’s missing outline-radius, though, which meant I had to use two divs to create the button I had designed in Paint Shop Pro. And a span. But that’s all!
It had two borders, each with a small amount of radius, a linear gradient background, :target tags so it looks like you click it, text shadow to get the 3D appearance, and whole bunch of regular old CSS2 and CSS1.

When I was done, however, I realized that, while it still worked in other browsers, there was no background. Yet again, I had made something that was only viewable in webkit.
I tossed the gradients from my image buttons into another image and used that as a background for everything not-webkit, but there’s a bit of white sticking out of the bottom. Things just aren’t lining up the same in every browser, which is a pain to work with. I’ve never really needed to worry about 0.02em before today. It turns out that’s a fair amount.

Anyway, I’ve got the newer version here for your perusal.
(As if I’m submitting it for your approval, or something.)
As I said before, it looks best in Chrome or Safari. The little font-changing button doesn’t seem to work in Firefox, for little or no reason. It looks stupid in IE7 and lower, because there’s no :focus selector, which means it’s not really a button.

What am I going to do with it, now? I saw some great article about progressive enhancement that laid out about five images beside eachother, and each one showed a more feature-rich page in a different browser. In that light, I think I’ll try my hand at making some sort of tab that turns into a great-looking button when you view it in a more advanced browser.
It appears Firefox lacks support for things Webkit and Opera have, like text shadows. 3.5 is going to be an important release.

Also, I’ve noticed, lately, that I refer to Firefox, Opera, and Webkit, because it seems a bit redundant to mention both Safari AND Chrome when talking about rendering. I’ll talk about one or the other when it’s about browser features (like how I’m jealous of Safari’s document inspector), but otherwise I’ll just refer to the Webkit engine.

So this whole day has been an exercise in jQuery. I’m trying to find out how to get certain elements from the context array (whatever it’s called). It seems .get() doesn’t allow things like the .text() tag or the .html() tag. Maybe if I wrapped that in another jQuery object…

Complete (Un)Success!

Wednesday, May 27th, 2009

I’ve been playing around with CSS3, lately.
One very specific thing I do is make images that are a bit larger than they appear on my screen, because I know people are going to set their text sizes differently. Another thing I do is scale things depending on width or such, so that everything fits the best it can.

With today’s background-images, the image is rendered at 100% zoom even if you want it in a smaller box. That means I need to put images in my markup, or at least it means I can’t just switch them out using only CSS.

This is where CSS3 comes in: Konqueror, Opera, Safari, and Chrome can set background-images to specific widths and heights. I just set visibility:hidden on my old image, and copied the width and height to my CSS background-image (in this case, background-size:100% auto). Voila!

If you’ve visited using Webkit or Gecko, you’ll notice that I have rounded corners. That means the corners are square for Opera, Konqueror, all IE versions, and whatever else. This CSS image replacement doesn’t work in Firefox or IE (strange how Firefox is missing support on it), which makes it look terrible in those browsers. It’s not something that you could put out publicly.
Altogether, this means my page only renders correctly in Webkit. That’s about… 5% of the total market?

I guess I’ll be stuck hacking up some PHP for my page bodies. For those of you who want to see my simple little session-switched thing, you can visit Cozy Cabbage, then put a ?grey in the address bar, and then ?green to switch back.