Facebook Twitter

The Shapes of CSS. Replacing the -9999px hack (new image replacement) IN THE BEGINNING was FIR, AKA Fahrner Image Replacement (note that one of the following links returns a 404): The Daily Report’s 2003 redesign uses (and our book explained) an image replacement technique intended to combine the benefits of accessibility with the power of graphic design.

Replacing the -9999px hack (new image replacement)

We christened this method Fahrner Image Replacement (FIR) in honor of Todd Fahrner, who first suggested it to us. Douglas Bowman’s tutorial popularized the technique, which was first developed by C. Z. Robertson in 1999. Preceding web type by a decade, Fahrner gave us the ability to use fonts other than Verdana and Georgia on web pages (i.e. to set type in Photoshop and export it as an image—an ancient web design practice) but to conjure these images of text via semantic HTML markup (the words the text pictured, set in appropriately structural HTML elements). -9999px. Adventures In The Third Dimension: CSS 3D Transforms - Smashing Coding. Advertisement Back in 2009, the WebKit development team proposed a new extension to CSS that would allow Web page elements to be displayed and transformed on a three-dimensional plane.

Adventures In The Third Dimension: CSS 3D Transforms - Smashing Coding

This proposal was called 3D Transforms, and it was soon implemented in Safari for Mac and iOS. About a year later, support followed for Chrome, and early in 2011, for Android. Outside of WebKit, however, none of the other browser makers seemed to show much enthusiasm for it, so it’s remained a fairly niche and underused feature. That’s set to change, though, as the Firefox and Internet Explorer teams have decided to join the party by implementing 3D Transforms in pre-release versions of their browsers. That being the case, this is an ideal time to get ahead of the curve and start learning about the possibilities and potential of adding an extra dimension to your Web pages. The Third Dimension To use 3D Transforms in CSS, you’ll need to know about axes (that’s the plural of axis, not the plural of axe).

Seven things still missing from CSS. Net magazine is the number one choice for the professional web designer and developer.

Seven things still missing from CSS

It's here that you find out about the latest new web trends, technologies and techniques – all in one handy package. Each issue boasts a wealth of expert tips and advice, including in-depth features and over 30 pages of advanced front and backend tutorials on subjects as diverse as CSS, HTML, JavaScript, WordPress, PHP, and plenty more. net compiles the hottest new sites from around the web, and being the voice of web design, our mission is to source the best articles written by the best people in the industry and feature interviews and opinions crammed with inspiration and creative advice. In short, If you're serious about web design and development, then net is the magazine for you. Editorial Oliver Lindberg, editor, oliver.lindberg@futurenet.com Ruth Hamilton, production editor, ruth.hamilton@futurenet.com Mike Brennan, art editor, mike.brennan@futurenet.com. Experimental CSS3 Animations for Image Transitions.

Today we want to share some experimental 3D image transitions with you that use CSS3 animations and jQuery.

Experimental CSS3 Animations for Image Transitions

We'll be using CSS3 3D Transforms for Webkit only. View demo Download source Today we want to share some experimental 3D image transitions with you that use CSS3 animations and jQuery. We’ll be using CSS3 3D Transforms for Webkit only. Check out the Photo Transitions at the Safari Technology Demos site, some of which we got inspired by. The images used in the demo are by Joanna Kustra. Please note that the 3D effects will only work in Webkit browsers. How it works Given a set of images, we’ll add the first image to the wrapper with the class te-cover.

The main idea is to always show the regarding image using te-cover. Demos Each demo will have a group of possible transitions that can be selected from the dropdown menu above the image. We hope you like our little experiment and find it inspiring and useful! Parallaxing CSS3 backgrounds - December 21st, 2011. Some Lesser Known Features of LESS.

For the last year or so, LESS has gained a lot of traction in the front-end development community, particularly among designers.

Some Lesser Known Features of LESS

LESS extends CSS with dynamic functionality and organizational features, which provide a lot of power and efficiency to designers and developers. However, it's not the only CSS pre-processor player out there. The other major one is Sass, which is very similar, and both are solid options to consider. Many of the review articles out there do a good job of providing an in-depth look at syntax and general usage, but I'd like to take a different angle—highlight one difference that isn't written about all that much, and present a few features of LESS that have have proved very valuable on recent projects.

No Barriers One difference that isn't discussed much is that the barrier of entry is very low for LESS. . * Note the rel attribute of the link tag. BOOM! Live Browser Updates <script type="text/javascript" charset="utf-8"> less.env = "development"; less.watch();</script>