All About Cubic Bezier Curves & Transitions

4

Cubic Bezier Curves in CSS3

In the last post, we looked at the basics of CSS transitions, including how to use easing to control how your animation flows. In this post, I want to look deeper at a very powerful easing feature; cubic bezier curves.

In short, they let you define exactly what path your animation will take, and thanks to some awesome community tools, they are extremely easy to use (No maths required at all). This gives you total flexibility with your transitions.

One of the best tools is the free Cubic-Bezier.com by Lea Verou. It lets you make new curves and see them in action just by dragging the handles. We’ll use it for all of the demos in this post, and it’s well worth a bookmark!

Read More »

Get Started With CSS3 Transitions Today

2

CSS3 Transitions

Transitions (basic animations) are one of the most popular additions in CSS3, and one of the easiest to implement for big gains on your site.

A transition is simply an animation from one set of CSS properties to another. So for example; whilst before you may have had links with blue text, which suddenly turned orange when you hovered on them, you would now replace that sudden jump with a more graceful animation.

In this post, we’ll look at the basic syntax, step through some examples, and finally take a brief look at current browser support.

Read More »

How to Add a “Reading Mode” to Your Posts

57

Reading Mode Preview

In this post, I will show you a simple way to add a distraction-free “Reading Mode” to your blog. You can see the end result on this Reading Mode demo site (Click the highlighted “Reading Mode” link).

The purpose of adding a feature like this is to enable a visitor to remove all the clutter of your site, and focus solely on the post itself.

In an ideal world; there would never be a need for such a feature. In reality though, sites have numerous other goals to achieve, such as brand building, serving ads, promoting other content etc. In this way, you can compromise between the two. Do what you need when the user first arrives, but get out of the way when they decide what to read.

Read More »

All New Design!

97

Redesign

Here’s something we’ve been working on for a while now; an all new design! If you’re reading this in an RSS reader, please click through and check it out!

I’d love to hear your thoughts! Nicer than the old version?

Read More »

The Pros and Cons of Art Directed Blog Posts

63

Art Directed Posts

When it comes to blogging, for a designer, the art can feel somewhat lacking in, well, art. So it is natural for the designer inside us to begin craving a new approach to this task, which can at times feel a bit tiresome and trying. Blogging can often feel this way for a designer, because we are not necessarily the best at expressing ourselves through our words. We tend to be much more visual creatures.

We are better at finding the right look than at finding the right words, so blogging can move us a bit out of our comfort zone, even though we tend to have a firm enough grasp on the topics that we tackle.

Art directed blog posts are posts that are designed individually to match the subject of the post, and they tend to break from the usual look and setup of your site. This allows you as a designer to keep a proverbial fresh coat of paint on your site, without having to take the time and make all of the considerations that come with a complete redesign.

Read More »

Design Critique: B2Bbloggers.com

60

B2Bbloggers.com

B2Bbloggers.com is a B2B marketing site that features a lot of guest posts on B2B marketing, and highlights a lot of content from around the niche.

We’re going to take a look at the site’s design today, critique it, and work out how we could improve it. As we do hopefully you’ll learn to apply this same methodology to your own site.

We’ll be working through this design as a case study, redesigning each section along the way, so you get to see each item as we rework it, including the full before and after design.

Read More »

Write Better CSS With Best Practices

219

CSS Best Practices

Everyone has a slightly different approach to CSS. That’s part of the reason it can be a nightmare to edit someone else’s code.

But there are a few good practices you can use in your CSS to make your stylesheets easier for you to read, and easier for anyone else that ends up modifying them in the future.

Read More »

Page 1 of 812345... 8