Creating a Keyboard with CSS and jQuery

Sometimes it’s just fun to play around with the programming languages we know and see what we can create. Here’s how to create an online keyboard with CSS, and then make it work with jQuery. The keyboard includes “action” keys (caps lock, shift, and delete) which dynamically change the keyboard when clicked…

Multi-column layout with CSS3 and some JavaScript

There’s a common newspaper and print layout method where the text of an article is arranged over several columns. This makes the article easer to read and looks quite nice visually. Wouldn’t it be great if you could do this with CSS? Well, in fact this is perfectly possible using the multi-column layout module that is part of the CSS3 specification. Whilst browser support for this is patchy, the module is approaching candidate recommendation status, and the method can still be implemented using proprietary but well-supported CSS rule prefixes like -moz- and -webkit- in your style sheets. For browsers that do not support the multi-column layout module in any form, there’s a useful JavaScript solution…

Elastic CSS Framework

Elastic is a simple css framework to layout web-based interfaces, based on the printed layout techniques of 4 columns but with capabilities to unlimited column combinations. and capacity to make elastic, fixed and liquid layout easily. Elastic provides a declarative syntax language to define the layout structure and behavior. It’s like having a conversation with your code. This way you don’t have to remember cryptic class names, just express what you want…

Different Ways To Format CSS

Formatting has nothing whatsoever to do with how the CSS functions. But that’s not to say formatting isn’t important. That would be like saying the choice of canvas isn’t important to a painter. It affects how it feels to write CSS, how easy it is to read, how easy it is to navigate, and how easy it is to revisit and reacquaint yourself with previously written CSS…

PX to EM conversion made simple

PXtoEM.com is pixels to em conversion made simple. Choose your body font size in pixels (px) and out comes a complete pixel (px) to em conversion table, making elastic web design with CSS a snap. The once daunting challenge of converting pixels (px) to the elusive em has now been reduced to a booger eating pipsqueak.

PXtoEM.com takes it a step further and gives CSS to start with! After you select your body font size, go to “Get CSS” and there you go…

Page zoom does not mean the end of flexibility

The latest versions of most browsers support – and default to – full page zooming instead of just increasing text size. Some argue that this means you no longer need to think about what happens when users increase (or, to a lesser degree, decrease) text size, and that there is no longer a need for fluid or elastic layouts or using other units than pixels for font sizing…

CSS Layouts: A collection of 224 Grid and CSS Layouts

A collection of CSS layouts offering Grade-A browser support. What does that mean? Well, they should appear the same in all internet browsers, including Internet Explorer 6 (IE6), Internet Explorer 7 (IE7), Firefox, Opera, Safari etc. You can use these CSS Layouts anywhere you wish including website templates, blog themes, CMS or as a starting point for your Web projects.