The CSS Ninja - All things CSS, Javascript & xhtml

Font Dragr: A drag and drop font tester

Oct 13

After playing with the new file API draft spec available in Firefox 3.6 with my drag and drop upload article. I had another idea when I was playing with custom fonts, @font-face, in the browser. What if you could drag an drop a font file (otf, ttf, svg, woff) from your desktop into the browser and have text rendered on the fly using any available valid font. Continue reading

23

Make IE awesome by turning it into Google Chrome

Sep 23

As I’m sure you all know by now Google made an announcement about their Chrome Frame plugin for IE that turns the Trident rendering engine into the Chrome rendering engine giving IE access to the awesome power that is Chrome. No longer will IE miss out on those awesome new features in CSS3 & HTML5 the more competent browsers enjoy today such as the soon to be released Google Wave. Continue reading

5

Drag and drop file uploading using JavaScript

Aug 26

With the recent announcement of the File API draft specification being published I’m sure a lot of people were confused as to what it could really do and why it is truly a powerful API. Firefox’s latest alpha release of their 3.6 browser, aka Namoroka, is the first to implement this new draft specification. Continue reading

45

Create the accordion effect using CSS3

Aug 5

Recently I have been playing around with CSS transitions and animations as implemented in webkit based browsers such as Safari and Chrome. They have been submitted to the W3C for consideration in the CSS3 spec so hopefully we should see more browsers support this soon, Firefox 3.5 supports CSS transforms which was developed by the webkit people to work alongside CSS animations & transitions. Continue reading

62

Real text rotation with CSS

Jul 29

Just saw a great post on Jonathan Snooks’ blog about doing text rotation with CSS and how to accomplish it in IE using IE propriety filter basic image property to rotate a text block. But there is a better way using CSS3 writing-mode property that has been in IE since version 5.5. Continue reading

18

Accessing the GPS in iPhone Safari

Jul 8

Finally with the release of the 3.0 firmware update to the iPhone we now have access to the GPS coordinates in Safari. Using the W3C Geolocation API we can access the users position much the same way a native app would. The user can either allow or disallow the current websites’ access to your location. Continue reading

64

Determine iPhone orientation using CSS

Jun 29

With the beta of Firefox 3.5 showcasing 35 new features over 35 days, the article on CSS3 media queries stuck out, the orientation detection really got my attention and immediately put my thought process to mobile devices, in my case the iPhone. I thought this is great maybe this has been snuck into the iPhone 3.0, unfortunately for us it wasn’t. That didn’t stop me and I got thinking about how it could be done if at all on the iPhone without using JavaScript. Continue reading

21

Futurebox, lightbox without the JavaScript

Jun 20

I was playing around the other day and had a bright spark. Is it possible to do the “lightbox” effect without JavaScript? The answer is yes! Thanks to the :target pseudo class. Without further ado I introduce Futurebox. Continue reading

45

How to create offline webapps on the iPhone

Apr 28

Recently Google launched their latest mobile version of Gmail optimised for iPhone and Android based browsers. One of the features that stood out was the offline access thanks to the browsers support of html5 application cache. Continue reading

173

Top 8 April Fools websites of 2009

Apr 5

Each and every the web produces some of the best April Fools jokes across the globe, some go all out and create fantastic often highly involved and well thought out pranks. Let take a look at the top 8. Continue reading

[CSS] NINJA