Create a vertically centred horizontal navigation
# Linked to 31 January 2011, 11:00 in Tutorials by Sam Brown
There is a way to have a centred horizontal navigation without knowing an explicit width, and without adding CSS. It’s also remarkably easy.
Natural Object-Rotation with CSS3 3D
# Linked to 8 November 2010, 06:04 in Links by Levi Figueira
Really impressive 3D pure CSS animation, including a pretty exhaustive tutorial on how to do it.
Word-Wrap: A CSS3 Property That Works in Every Browser
# Linked to 22 July 2010, 09:46 in Tutorials by Sam Brown
The word-wrap property is one of the oldest CSS3 properties, it works in IE6, and has a practical use especially for bloggers.
Adaptive float fixing
# Linked to 16 July 2010, 16:02 in Tutorials by Sam Brown
A common problem faced by many web developers is how to correctly handle a series of floated, margined elements inside a fixed width container.
A manageable method for creating CSS image sprites
# Linked to 9 July 2010, 13:05 in Tutorials by Sam Brown
In this post I’d like to go over the steps that I use when creating CSS image sprites for any front end development work that I am involved in.
Body IDs—making life easier for yourself
# Linked to 25 June 2010, 03:57 in Tutorials by Sam Brown
One thing any good developer will tell you is that efficiency is key. Whether that be workflow, the code itself, or just achieving a single goal. Invest a little forethought at the beginning to save a lot of time later. I like to think of it as being cleverly lazy. One great example of this is by simply utilising the
id=""attribute on the<body>element. Yep, really, something as simple as that.
Creating a pure CSS dropdown menu
# Linked to 22 June 2010, 05:37 in Tutorials by Sam Brown
Creating a pure CSS dropdown menu, using webkit animations and progressive enhancement.
Create a Vibrant Digital Poster Design with CSS3
# Linked to 7 June 2010, 03:48 in Tutorials by Sam Brown
CSS has come a long way in recent years, and with new browser support for a hand full of CSS3 properties we can begin to replicate design styles directly in the browser that beforehand were recently only possible in our design applications. Follow this walkthrough of the making of Circlicious, a vibrant and abstract digital poster design made purely of HTML and CSS.
Recreating the MLB.com Content Switcher with jQuery and CSS3
# Linked to 2 June 2010, 03:26 in Tutorials by Sam Brown
The MLB.com content switcher is created with Flash. This version uses jQuery and CSS3.
Sexy Interactions with CSS Transitions
# Linked to 14 May 2010, 01:24 in Tutorials by Sam Brown
CSS Transitions govern the specific purpose of transitioning a state change, say from A to B. They can apply to one or more elements at a time, but it’s important to remember that they don’t animate anything unless there is a change.
CSS Animations, on the other hand, are for the purpose of creating dynamic, keyframe-based animations that can run on their own, regardless of any user input or state changes. This article focuses solely on CSS Transitions, though the lessons learned often apply to CSS Animations as well.