Blog Archives

Improve your CSS with the Sass @extend directive

The Sass extend directive can improve your workflow. Nick Walsh explains how to implement the CSS preprocessor component without bloat.

Watching a CSS veteran discover Sass for the first time is always entertaining. Concepts like nesting, variables and mixins seem so natural and, once the syntax is committed to memory, it’s difficult to remember a time before their availability. Relief is the most common emotion: a recognition that the days of manually prefixing and copying hexadecimal values have passed.

Of the core concepts found in the preprocessor @extend stands out for three reasons: it has the highest potential to drastically change your workflow; misuse is dangerous to the health of your stylesheet; and newcomers struggle with it far more than other Sass functionality. Follow the accompanying patterns to start safely utilising @extend.

Read the rest of this entry

Advertisements

Use CSS transitions for link effects

Bringing hovers back from the vaults, Jenn Lukas explains how to use CSS3 transitions to create fun link effects and enhance user experience

This article first appeared in issue 239 of .net magazine – the world’s best-selling magazine for web designers and developers.

Steering clear of tacky Flash interactions, page corner flips and the MM_SwapImage hovers of past years, CSS transitions can add nifty and contemporary effects. CSS3 offers a variety of properties to transition. By applying these transitions to links, and changing the link properties on hover, we enhance the way users interact with designs.

If they’re thrown into page design without careful planning, transitions can end up simply distracting users. After all, for most sites, content remains the top priority. However, by adding neat responses to hover and focus (always remember to pair these together for keyboard users) we can introduce just the right amount of surprise and delight when the user initiates the sequence to enhance their experience without CSS tricks getting in the way.

Read the rest of this entry

%d bloggers like this: