Archived entries for HTML5/CSS

Swiss Army Knife of Vector Scripting

Exploring the amazing paper.js and how well it sits on the HTML5 canvas and with Scriptographer (scripting environment for Adobe Illustrator)

Espresso equivalent code editor on PC

MacRabbit’s Espresso editor has been my favorite web editor on OS  (prefer it over Coda though haven’t had a chance to test the latest version!).

Having recently moved onto Windows platfrom at work, I didn’t want to use somthing clunky like Dreamweaver, and struggled finding anything like Espresso or even TextWrangler on PC. Several friends work on Unix with Sublime Text 2 and as it also works on PC and Mac, so trialed it out.


Screenshot of Sublime Text 2

It’s a brilliant editor and by far the best I found for PC. If you decide to use it,  be sure to check out Sublime Package Control and the plugin for zen coding

Font icons

Use of icons has become more prevalent with mobile and app design; alongside progressive disclosure and audience overlap (both in regards to age and language)

Creating icons successfully is very skillful (having variations for different sizes being a subtle in itself). Using them in projects and wanting to change colours normally means taking them (or the sprite) into an editor—fiddly at best.

But with icon fonts, we have no problems with http requests and you can change size/colour simply via the css. It also deals with the problem of supporting high density screens

The above example (with just font-size and color attributes changed) is using the Font Awesome, which makes application a breeze. No more images—even for social icons! (love the github icon—won me over)

There are great other resources out there—but looking forward to putting some time aside to create my own!

CSS for user interactions

Have been experiementing with javascript libraries to display graphs and data recently — but can’t beat simplicity — here’s an example with just a little CSS (click for iPad)

#holder { background: url(img/static-img.png) no-repeat left; }

a#chart {
  height: 435px;
  background: url(img/move-img.png) no-repeat left;
  display: block;
  -webkit-transition: background-position 0.6s ease-out;

a#chart:hover { background-position-x: right;}

Simple alternative for modernizr

Sometimes you just don’t require all the features that modernizr offers but still need versions prior IE 9 to render HTML5 tags correctly—came accros this very handy and concise alternative via Nico Hagenburger’s blog

  'article aside footer header nav section time'.replace(/w+/g,function(n){document.createElement(n)})

Copyright Sundar Singh © 2011. All rights reserved.

RSS Feed.