Blog posts tagged 'CSS'

Shaping up profile pictures

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

100 days of UI animation

08 August 2016

Inspired by The Great Discontent's 100 day project, I'm spending a hundred days producing small animated UI elements. Send caffeine. Read more

Tags: Animation CSS JavaScript Projects

Skip to navigation

Content-aware styles

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

Recreating a folding corner effect with cel animation

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

CSS, SVG and base64

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

The carousel of praise

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

The BEMIT naming convention

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

Improving keyboard accessibility

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

Mobile-friendly toggling menu

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

Internet Explorer fallbacks

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

Supercool search bars, part 1

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

Sticky menus

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

Responsive images, Part 2—Body Images

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

Responsive images, Part 1—Masthead

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

Media queries

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