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.
Better Page Corner Ads with CSS3 Transforms
# Linked to 13 May 2010, 01:10 in Tutorials by Sam Brown
A corner ad should be triangular, and so should its clickable area. CSS3 now makes that possible.
Center Multiple DIVs with CSS
# Linked to 11 May 2010, 01:43 in Tutorials by Sam Brown
At some point, you may have a situation where you want to center multiple elements (maybe
<div>elements, or other block elements) on a single line in a fixed-width area. Centering a single element in a fixed area is easy. Just addmargin: autoand a fixed width to the element you want to center, and the margins will force the element to center.
There really should be a similar simple way to center multiple elements evenly spaced.