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 »

User Friendly Short Codes with TinyMCE

64

WordPress short codes are everywhere: in practically every theme and many, many plugins. They are extremely useful and provide huge amounts of extra functionality. With all of their greatness, however, there is one major problem with them: they are not very user friendly, particularly for users who are not familiar with programming, especially when a short code accepts more than one parameter. So, in order to help the non-programmer users, we need a new solution.

The ideal solution is one that provides an interface for the user to input all of their short code options without having to enter any “code”. This is a pretty common technique used by a lot of developers, but until now, there has never been a good tutorial on it, so we are going to fix that.

Read More »

How to Get Facebook, Twitter, and RSS Counts {WP}

124

Twitter, Facebook, RSS Counts

You will have seen blogs showcase their Twitter, Facebook, and RSS counts with typography. With these numbers in plain text, you can style them into your website far more effectively than if you were to use the old-fashioned “chicklets.”

Twitter and Facebook make this easy, but you’ll need to take an extra step with FeedBurner first. Log in, then click Publicize > Awareness API, and click activate.

All set? Then let’s get started!

Read More »

30 Pro jQuery Tips, Tricks and Strategies

139

Whether you’re a developer or a designer, a strong jQuery skillset is something you can’t afford to be without. Today, I’m going to show you 30 handy jQuery coding tricks that will help you make your scripts more robust, elegant and professional.

Getting Started

These tips and tricks all have one thing in common- they are all smashingly useful. With this stuff in your back pocket, you’ll be ready to go change the world, and even better, write jQuery like you know what you’re doing. It’s gonna be fun.

Read More »