Maintaining aspect ratio with CSS
There are occasion when you don’t want the size of a box to flow with the page content. For example, when you’re building a page of tiled content, you may want to make sure all of the tiles are the same size, but you can’t fix the height and width because the size must be […]
Fixing blurry background images in Chrome
I recently came across an interesting issue whilst using background-image:cover to fill and crop an image to a specific size within a div. This works well and looks great in most browsers, but in Chrome, on certain types of images, if you look really carefully you can see a slight blurring of some of the […]
CSS specificity and point scoring
We all know about how CSS works right? Styles are inherited and cascade through the DOM to child elements. We know that CSS rules referring to element IDs have a greater weight than classes and inline styles trump them again. But how exactly does the browser work out which styles should win out when multiple […]
HTML5 Canvas Animations – Top Tips
I recently worked on a project creating an animated music visualisation using HTML5 canvas elements to create interactive animations. Since the canvas element is quite new, I thought it might be useful to compile a list of tips I’ve build up while working with it. In-memory canvas caching The biggest consideration with canvas animations in […]
A New Look for Tweeted Trips Care of Bootstrap
I’ve just completed a re-vamp of a site I run called Tweeted Trips. It’s a site I created while on the road cycle touring, so the original was put together quite quickly and was really built as a proof-of-concept. The new version is much more robust, cleaner and has more features. The code was originally […]
Custom Styles for Select Inputs
It’s long been a problem for developers that the Select (or dropdown) input doesn’t allow you many options for customising their look and feel. You shouldn’t be trying to style selects! When you search for help on this matter, you often come across people arguing that select inputs get their style from whatever browser you […]
Building a Responsive Design: Top Tips
Coding HTML at the cutting edge, make use of HTML5 and CSS3 to create fully responsive layouts that look great on screens of all sizes.
Captionator using JQuery
A nice effect is to have the caption for a text field within the field instead of having a separate label. However it can be frustrating for a user if they have to delete the text before they can type into it. This JavaScript class looks for texfields with a class of captionate and adds […]
