Daniel Friesen

(Dantman, Nadir Seen Fire)

Programmer, Web Developer, Animanga Fan

Topic: css3

Posts specifically related to new CSS 3 features.

This post was last modified

One of the designs I recently had to work on needed a narrow width header in a sidebar with a large number on the left side of it and the header text vertically centered to the right.

If you've worked with CSS for awhile you've probably ran into the same issue as everyone else. Vertical alignment with universally supported css is not easy. There are multiple techniques you can use to make something vertically aligned but there are drawbacks to each.

For my use case I couldn't use any of the normal tricks I'd use. I didn't know the exact height of the number and I needed the header text on the right to wrap properly. So I couldn't use a typical technique involving line-height, absolute positioning, or padding.

[Read more...]

The state of most uses of css3's border-radius around the web has been bothering me for awhile now. Though now I've found something else to be annoyed at.

The earliest common use of border-radius was -moz-border-radius in Gecko based browsers. Later on the WebKit implementation came into common play. When and where things were actually implemented isn't really important, that's just the order that people started to know about them as common knowledge.

As a result there are plenty of websites around which are still using out of date css that only support Gecko and WebKit based browsers, or in some cases support nothing but Gecko based browsers. This is somewhat irritating considering nearly every browser — at least in their most recent versions — support border-radius, and by using incorrect css they omit support for browsers that actually "DO" have a border-radius implementation. Like Konqueror, Opera, and IE9.

[Read more...]