Archive for the ‘ CSS ’ Category

In my day job, I have to be pragmatic. That means although I am eager to try out new things right away, I have to weigh the pros and cons and the impact it might cause my unsuspecting users. I need to think about backward compatibility, about supporting browsers as old as Father Time and the list never ends. Although those daily exercises provide challenging and intriguing ways of working with old and new technology, I admit I always dream about how it would be to work in a world where IE6 or even IE7 is merely a dream, where I could care less of using a library to achieve cross browser compatibility and blah blah blah …

Ever get confused about CSS? Wonder why certain style rules somehow override each other although you specified the rule later? You spend hours commenting out code, then uncommenting it. The problem still persists. How is that possible? Well, here’s a primer to get your head around CSS specificity.

What is jTipster? Remember the times you would like to add notes to a picture, but there were no other ways to do it without firing up Photoshop. The problem with that is the content added to the picture was not easily changed, you needed some Photoshop skills and well, not SEO friendly.

So, what is it again? Well, jTipster allows you to add “markers” to a picture. For each marker added, you can add short or long captions that appear on rollover. See it working here.

So, how do you get it working. Follow the steps below and to get started.

There has been some talk recently about frameworks. Some for, some against and some on the fence. As someone who has not tried her hand at a single established framework, I have to say I am rather ambivalent about them. When I first read about the first CSS framework, my initial thoughts bordered on the negative. I was constantly arguing in my mind about the extra bloated code. Then my mind raced to the unsemantic code. And it went on and on …

There would be times you would want to offer your users an indication of the current form element they are on. A simple, non intrusive manner for this would be as simple as changing the background of the element using CSS. Users who are using their keyboard to move through the form elements would also benefit from this as this provides a more obvious cursor position.

A while back, while working on an intranet that displayed the amount of cash flow, we (design team) had to come up with a way to show data graphically. As the graphs we wanted were rather simple bar charts, we did not want to expend too much energy in researching extra tools in achieving this goal. With a little creative trick using absolute positioning, out came the bar chart with negative axis. Check out the code below to create the effect.