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 »

CSS & JS Auto-Refreshing with Live.js

30

Live.js and WordPress

I want to share a fantastic little tool that I’ve only recently come across; Live.js, written by Martin Kool.

This JavaScript file automatically checks for changes to your CSS and JavaScript files, and refreshes them.

That means you can have your text editor in one half of the screen, and a web browser in the other. When you save changes in the editor, the updates are reflected immediately in your browser. It really helps to speed up your development time.

Read More »

How to Make a Floating Share Box

198

Floating Share Buttons

This is one of the most common questions I get asked; how do you make a floating box with share links?

Today, we’re going to see just how simple it can be. We will:

  • Set up the current trinity of search (Facebook, Twitter, +1).
  • See how to make sure they share the right URL.
  • Align the box to the bottom left of the user’s browser.
  • Hide the box if the user’s browser is too small (So it never overlaps our content).

You can see the demo site here (Try resizing your browser smaller).

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 »

30 Bad Practices of Web Designers

237

bad-web-design-banner

Every once in a while you will come across a page that just doesn’t seem ‘right’. There are three elements of a website that can be harmed by bad practice:

  • The website lacks something in its design.
  • The content is written badly.
  • The search engines don’t like something about the site.

Considering the three points above, this article will explains the do’s and dont’s of certain design habits.

Read More »

Styling Different Posts in Different Ways With Post_Class

63

With WordPress 2.7 came the post_class function. This gives a set of CSS classes to a post, depending on what’s Read More »

Read More »

Page 1 of 3123