Moving along a curved path in CSS with layered animation


CSS animations and transitions are great for animating something from point A to B. That is, if you want to animate along a straight path. No matter how much you bend your bezier curves, you can’t make something move along a curved path by applying an animation or a transition to an object. You can overshoot with custom timing functions, and produce spring-like effects, but the relative movement along the X and Y-axis will always be identical.

Instead of turning to JavaScript for producing more natural-looking motion, there’s an easy way to work around this limitation: layered animation. By using two or more objects to drive an animation, we get fine-grained control over an object’s path, and can apply one timing function for the movement along the X-axis, and another one for the Y-axis.

Read More

How to animate "box-shadow" with silky smooth performance


How do you animate the box-shadow property in CSS without causing re-paints on every frame, and heavily impacting the performance of your page? Short answer: you don’t. Animating a change of box-shadow will hurt performance.

There’s an easy way of mimicking the same effect, however, with minimal re-paints, that should let your animations run at a solid 60 FPS: animate the opacity of a pseudo-element.

Read More

Google Web Font Inspiration with TypeSource


If you’ve been looking through Google’s directory of Web Fonts in search for fonts to use in your next project, you might have felt your inspiration quickly drain. It can be difficult to imagine how a font would look in use when you’re left with a long list of black text on white.

I built Typesource to make it easier to find and match Google Web Fonts. I’ve carefully crafted each example, exploring different styles, combinations, and color schemes in every composition. In addition to the feed of inspiration, the HTML/CSS is available for all examples, so you can copy and paste the code into your project and quickly get started with your web type compositions.

Read More

Copy Lorem Ipsum from your Menu Bar with Loremify


Kalle Persson and I just built and released a small utility app for OS X. Loremify is a free mac app to quickly copy Lorem Ipsum to your clipboard. It lets you wrap the dummy text in html or markdown, specify the amount of text, and copy it to your clipboard—all in one click. It sits in your OS X menu bar, and it’s available on the App Store.

Read More

Three new SpinKit spinners


SpinKit just got three new additions: a folding cube spinner, a classic circle spinner, and a scaling grid spinner. Just like the other spinners, they are animated using only the transform and the opacity properties, making them perform well, and easy to customize: just change the background color to match your site.

Read More

Animating Link Underlines


I recently added a simple visual effect to this blog that I quickly fell in love with: when you hover blog headers, the link’s underline is revealed by animating it out from the center. You can try it in the banner above.

Creating this effect is surprisingly easy, doesn’t require any additional DOM elements to be added through HTML, and falls back nicely for browsers that don’t support CSS animations (it will just show up as a regular underline).

Read More

Introducing SpinKit


While hacking away at Infinite Jekyll the other week, I needed to show a loading indicator while fetching new posts. It had to be open-sourced though, and available in retina resolution. I couldn’t find any decent spinners, so instead of sitting down in Photoshop and creating two GIFs, I turned to CSS animations and created a simple, repeatable, loading animation.

Read More

Infinite Scroll With Jekyll


If you want to use Jekyll but don’t want to settle with a list of links to your blog posts, I just open sourced the parts that drives this blog’s infinite scroll. As I mentioned in Moving from WordPress to Jekyll, the implementation is built around collecting the links to all blog posts in a JSON file, and using that to load more posts as you scroll.

If you’d like to add this juicy feature to your Jekyll site, head over to GitHub and grab the source, and let’s get started.

Read More

Moving from WordPress to Jekyll


Heard of Jekyll? Jekyll transforms markdown files into static sites and blogs. You can say goodbye to databases and bloated blog engines, and blog from your favorite markdown editor.

I just moved tobiasahlin.com from an old dusty version of WordPress, to Jekyll, served by GitHub Pages. The switch was easy to make; there’s a gem which you can use to import all your WordPress posts, and several guides have been written on making the transition. Before making the switch though, I had two major concerns:

Read More

Design Books That Are Not About Design


There are a couple of design classics that, it seems, almost everyone have read. You’ve probably read at least one of them: Design of Everyday Things, Don’t Make Me Think or Elements of Typographic Style. Maybe Universal Principles of Design. There’s a ton of topics that these books don’t cover, however, that are just as essential in your day-to-day work as a designer.

Read More

Common Mac OS X Cursors as PNGs


If you’re ever creating user interface mockups for desktop apps or web apps, you’ve likely been looking for mouse cursors to demonstrate different ways of interacting with your design. I have, at least, but have had a hard time finding pixel perfect PNGs.

I dug around in OS X’s System Library and managed to find the vectors used for rendering the most common cursors (including for pointing, drag and dropping, resizing, etc.), and exported them all as PNGs. If you can’t find the cursor you’re looking for in the table below, I’ve prepared a zip with all cursors.

Read More

Chaining in jQuery


Chaining in jQuery let’s you write code that is faster to execute, easier to read, and easier to maintain. Even if you haven’t heard of chaining, if you’ve worked with jQuery it’s likely that you’ve already seen jQuery code utilizing chaining.

So what does it look like? Let’s compare two snippets of code—they accomplish the exact same thing, but one uses chaining, and the other one doesn’t:

Read More