CSS based loading spinner icon

This is a CSS only loading spinner icon. It’s just a quick experiment I decided to conduct, to see if I can do a loader spinner using only CSS, without any images or JavaScript. It actually turned out much easier than I thought. You can check out the full CSS below. It does look a bit messy but only because of all the vendor prefixes I had to use.

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.

Read more »

Say No to CSS hacks

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 »

Cool CSS only buttons

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.

CSS buttons

Look ma, no images!

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.

Read more »

Joomla Toolbar fix

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.

joomla menu fix

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 »

Reflections and Accordion using CSS only, in Safari and Firefox

Using combination of CSS transforms, transitions, gradients and :target it’s possible to create things that usually require JavaScript – such as accordion and reflections (in Firefox). Unfortunately, this only works 100% in Safari and Chrome (and I guess any other webkit using browser). In Firefox these elements behave properly, they just don’t have animations or gradients. As for IE, I didn’t bother with it at all.

Here is the page I’m going to go over. Feel free to dig into the code and if you’ve got any ideas on how to make it even sleeker let me know. Read more »

Using CSS3 @font-face to “fake” multiple font weights

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 »