Creating Thumbnails Using the CSS Clip Property

One of the least used properties in CSS is the Clip property. Clip is part of the visual effects module of CSS 2.1 and its job is to place a visible window on top of an object that is being clipped. It is useful for clipping images and creating thumbnails without having to create additional files. This trick can be used to create square thumbnails, or to create other varieties of thumbnails without actually duplicating files on the server. Here is the rundown…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Maximum value of z-index

Z-index is used to determine the stacking order of absolutely positioned elements on a page. The CSS 2.1 spec says the value of z-index should be an integer. But it doesn’t define the any maximum values for it. So the actual max is often determined by what variable type the browser uses to store the z-index…

VN:F [1.9.22_1171]
Rating: -1 (from 1 vote)

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…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

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…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

CSS – 3 Simple steps to write better Stylesheets

How to write your style sheets more efficiently. Covers these points:

  • A style sheet should be easy to read
  • A style sheet should be easy to maintain
  • A style sheet should be well commented
  • The time to achieve these goals shouldn’t negatively impact the development time of a website.
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

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…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

15+ techniques and tools for cross browser CSS coding

Making your website compatible with a wide range of browsers is probably the hardest task of a front-end developer. To make your coding life easier, here are over 15 tools and techniques for cross-browser CSS development…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

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…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)