16 August 2016
Rectangles are the default shape for elements on a web page, but since when do web designers stick to defaults? 24 Ways guides the way to using non-standard shapes in our designs. Read more
Tags:
CSS
Design
Skip to navigation
Skip to navigation
19 July 2016
24 Ways has been producing web-related content every December since 2005. In this time-sensitive field, how does it distinguish the old content from the new? By subtly changing the colour scheme. In this post, I figure out how to replicate this effect and think about further applications for content-aware styles. Read more
Tags:
CSS
Design
Sass
Skip to navigation
05 July 2016
In this post, I recreate the folding corner effect of the article summaries on 24 Ways. It reveals a whole treasure trove of CSS techniques, in particular how to simulate old-school cel animation. Read more
Tags:
Animation
CSS
SVG
Skip to navigation
21 June 2016
24 Ways uses a cracker of a trick on their homepage to reveal author profile pics when the mouse hovers over an article summary. In this first post on the topic, I'm interested in how they include SVG code in CSS by using base64. Read more
Tags:
Animation
CSS
SVG
Skip to navigation
07 March 2016
Carousels are an easy way to add non-essential content to a website. In the case of CSS Wizardry, it is used for displaying positive feedback from clients. In this post, I look at the HTML, CSS—and the secondary school arithmetic—involved in coding a carousel. Read more
Tags:
HTML
CSS
Animation
Skip to navigation
05 January 2016
Trying to keep CSS tidy and transparent is never easy, especially on large projects. Fortunately, Harry Roberts' CSS Wizardry is there to help us. In advance of my site redesign, I take a look at his BEMIT approach to naming elements and keeping CSS organised. Read more
Tags:
CSS
HTML
Skip to navigation
22 December 2015
Without the help of a decent web designer, accessing a site via keyboard can be a frustrating experience. In this post, I look at how Responsive Web Design adds concealed 'skip to content' and 'skip to navigation' links to improve accessibility for keyboard users. Read more
Tags:
CSS
HTML
Skip to navigation
10 November 2015
With a dash of CSS and JavaScript, it's easy to create a mobile-friendly menu whose visibility is controlled by a toggle button. Read more
Tags:
CSS
HTML
JavaScript
Skip to navigation
29 September 2015
This week I examine how Ethan Marcotte and Karen McGrane's Responsive Web Design sets up conditional CSS rules for handling Internet Explorer's, um, specialness! Read more
Tags:
CSS
HTML
Skip to navigation
09 December 2014
So far, I've focussed by attention on HTML and CSS, but I've been neglecting the third of the web design trio, JavaScript. In this and the next couple of posts, I intend to change that by looking at A List Apart's funky search bar. Read more
Tags:
CSS
HTML
Skip to navigation
27 November 2014
Rather than being an examination of a dodgy burger bar's printed material, this a quick post on A List Apart's main menu, looking at its CSS and HTML. Read more
Tags:
CSS
HTML
Skip to navigation
20 October 2014
Images in the main content area of The Great Discontent seem to come in two flavours—large and small. I deal with each of these in turn in this post. Also, I have a quick look at the nifty loader image that you see for a few seconds when an image appears on screen. Read more
Tags:
CSS
HTML
Skip to navigation
24 August 2014
One of the things that makes The Great Discontent beautiful is the photography. Each interview kicks off with an oversized picture of someone looking particularly dandy in their designer glasses and hairdo. My question for this post is, how are images handled in TGD? Read more
Tags:
CSS
HTML
Skip to navigation
13 August 2014
In the next few posts, I want to look at The Great Discontent and find out how it handles responsive design, starting with a look at the media queries that the site uses. Read more
Tags:
CSS
Skip to navigation