Sam Croft

Full-stack developer

Responsive button feedback in PhoneGap apps: a better alternative to -webkit-tap-highlight-color

  • 13 comments

Filed in: android, apps, cordova, css, iOS, PhoneGap, zepto

I don’t think I’m alone when I say that the most important thing with a PhoneGap app is that it feels responsive to a users touch. It goes without saying that the easiest argument that web/hybrid app neigh-sayers have is touch response lag. The first thing they’re going to point fingers at and tweet to their native compadres is how many milliseconds it takes for a button to light up when it is touched.

(more…)

Quick CSS tip: creating percentage width borders without using superfluous markup

  • 5 comments

Filed in: css

Note: This article is about the physical width of a border based on its element’s size. This article is not about the border-width css property.

Lately I’ve been working on a lot of designs that require a percentage, or fixed, border width that is different to the width of the box model for the element it is being applied to. More often than not this is a centre aligned small border-bottom to visually separate one section from another.

(more…)

Using the CSS content property responsibly without compromising your design and markup

  • 0 comments

Filed in: css, html, usability

CSS has a wonderful property; content. This property allows extra content to be added to a design directly from your stylesheet. Unlike JavaScript, however, it does not add the extra content to your markup after the DOM has loaded. The content will not appear anywhere in your markup, it only appears in the actual rendering of a page.

The content property can be used to great effect providing it is used responsibly in ways that do not break your page if the content, you are adding via this property, did not exist.

(more…)

Creating a lightweight and semantic jQuery tabs plugin

  • 7 comments

Filed in: css, jQuery, plugin

Earlier this year I wrote a tiny jQuery accordion plugin, for mobile projects, because I was sick of using non-semantic code snippets to create a very simple ui component. While writing it I realised that it would be reasonably straightforward to create a tabs version using the same principles.

(more…)

Using a smattering of CSS3 and two background images to create a colour-burst effect

  • 0 comments

Filed in: css, jQuery

CSS3 colour bursts

Recently I’ve been helping my brothers fiancée with her website. The site uses a lot of close-up photography layered using CSS backgrounds. In an effort to make things a little more interesting I wanted to create a simple effect of fading black and white images into colour versions.

(more…)