The CSS mainly uses transform, animation and keyframes styles and works in most modern browsers, with the exception of IE9 and below of course. Although at least in IE9 it does render the “first frame” correctly (i.e. the initial state of the loading icon). You can easily tweak colours, thickness, length or spacing of the lines. Oh and the html is dead easy, it’s basically just a
.spinner div with a bunch of
.spin-line divs inside. If you want to play around with live code you can check out my jsFiddle for it.
If you like this one, you should also check out this spin.js project by Felix Gnass that adds a bit of JavaSscript to give you more flexibility, control and provide better compatibility with older browsers including IE.
As web developers we have a responsibility to move the web forward, yet I still regularly encounter posts, comments and articles about various CSS hacks, majority of which are of course related to IE6 and IE7. What’s more, every once in a while I even see somebody post a new hack. Well, I say no more! I say we need to stop this self destructive behaviour. Read more »
Even Microsoft is sick of Internet Explorer 6, and they have finally started making a real push to get people to stop using it and upgrade to a better browser. They even started a website dedicated to tracking the, hopefully dwindling, use of IE6 – http://ie6countdown.com/. On this website they encourage people to spread the word on twitter via the #ie6countdown hashtag, and they also offer a banner you can put on your website, that would only appear to IE6 users and it encourages them to upgrade to a better browser. Naturally the better browser being IE9. Or is it? Read more »
I love CSS because it’s like having Photoshop inside a browser. Okay, maybe I’m exaggerating, but with modern browsers there are a lot of very cool things you can do with just CSS, without needing any of those pesky images with their overheads and extra kilobytes to download. In my work though I don’t often get a chance to try anything really interesting with buttons because they’re either simple, or if they’re not then I have to make them IE (worse yet, IE6) compatible so I end up reverting to mostly images anyway. So I decide to “go wild” and see what I can do without having to care about any of that compatibility nonsense.
Sidenote: Can you imagine if first cars had to be made horse-compatible? Yeah, think about that for a second.
So anyway, this is what I came up with.
Here is a demo of the buttons, pretty much exactly what I used for the screenshot above. I go over the styles after the break.
If you work with Joomla 1.5 and like me, find the right alignment of toolbar icons counterproductive (in the default admin theme), then you can fix it with just a few CSS tweaks. Here’s what I mean.
To do this, in Joomla’s root folder go to administrator/templates/khepri/css. In file rounded.css find the style for div.m and add position:relative to it. That’s it for that file. Now open the file general.css and that’s where you’ll need to make several changes. Read more »
CSS2 specifies additional font weights, beyond Normal and Bold. In particularly there are 9 font weights in total – 100, 200, 300, 400 (normal), 500, 600 (bold), 700, 800 and 900. Unfortunately browsers still somewhat lack support for this feature, but more importantly fonts lack support for this. Many fonts however, still come with only normal and bold weights. Moreover, based on a few tests, even professional fonts that come with multiple weights (such as thin, light, regular, bold, heavy, etc.) don’t actually support these weights in the same way as the CSS2 specification dictates, in other words they can’t be used out of the box like that.
For example, I have the Arno Pro font (a nice serif font from Adobe). It comes in 4 weights – regular, bold, light and semibold. Each is encapsulated in its own file with a distinct name, e.g. ArnoPro-Bold, ArnoPro-Smdb, ArnoPro-Light, etc. I don’t know much about how fonts work but based on a bit of reading I’ve done, for a font like that I should be able to declare a style that uses “ArnoPro” font-family and based on the weight I assign to a particular element it would use a different version. For example, ArnoPro-Light for 200, ArnoPro-Regular for 400 or normal, and so on. However, based on a few tests I’ve done that doesn’t seem to be the case. In fact “ArnoPro” font isn’t recognized at all, only if I specify explicitly “ArnoPro-Smbd” does it recognize the font. And of course when it’s done like that all but the regular version are stuck with one weight, i.e. font-family:ArnoPro-Smbd; font-weight:normal looks exactly the same as font-family:ArnoPro-Smbd; font-weight:bold.
In short, the situation is less than ideal. However, there may be a at least a partial fix. Read more »