What are webfonts?

Webfonts are font files embedded in websites using the @font-face rule. This technique was first available in Netscape Navigator 4 using Bitstream’s TrueDoc standard but was discontinued in Netscape Navigator 6. Microsoft developed the Embedded OpenType format .eot which is supported in Internet Explorer since version 4. In march 2008 Apple introduced Safari 3.1 which supports the @font-face rule, but it doesn’t use any of the previously mentioned formats, but the popular font formats TrueType and OpenType with TrueType or PostScript outlines. Other browser makers are following Apple’s lead. Firefox 3.5 and Opera 10 will also support direct linking of TrueType and OpenType fonts using the @font-face rule…

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

3D Transforms Using Safari Webkit

WebKit on Mac OS X now has support for CSS 3D transforms, which allow you to position elements on the page in three-dimensional space using CSS. This is a natural extension of 2D transforms, which we described in an earlier blog post. 3D transforms have been supported on iPhone since 2.0, and now we’re please to announce that we have currently added support for Leopard and later…

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

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)