Get a free trial // Grow your CSS skills // Land your dream job

GreenSock MorphSVGPlugin  

Greensock really knocked it out of the park with this one. You know shape morphing? It's a cool effect with loads of uses ranging from practical to artistic. SMIL can do it, but the future of that is in jeopardy. Other JavaScript libraries can do it, but they are bound by the same limitation as SMIL: they need to have the same number of points. This new Greensock plugin isn't bound by that, meaning you could morph an apple into the word apple (!).

Beyond that, you can control what they call the shapeIndex, which controls which point on the previous shape moves to which point on the new shape, which has drastic impact on the way the animation plays out, so you can make it smooth and intuitive rather than awkward and forced. Not to mention that can convert your typically-non-morphable shapes into a morphable shape for you.

They have a collection of examples to check out. You have to be a member of Club GreenSock to use it in production, but you can play with it for free on CodePen. I have a simple template to get you started.

A List Apart Live Panel: The State of Front End Dev  

I'm going to be moderating an online panel (Google Hangouts) on Wednesday, November 4, 2015 with Jina Bolton, Una Kravets, Rebecca Murphey, and Marco Rogers all about front end stuff. We held a little planning and prep session for it the other night and a lot of interesting discussion was had, so I bet y'all will enjoy it.

Creating a CSS Sliding Background Effect

The "trick" of sliding backgrounds in CSS is not new. In fact, the first time I came across it might have been a couple of years ago on the Valio Con site (the current design doesn't have it anymore). I happened to notice it on a couple of new sites I visited today, however, and thought it would be worth sharing.


Sponsor: An Event Apart  

I love An Event Apart conferences, and I bet you would too.

It's where ideas like responsive design and mobile first were launched, and where this year's attendees are already learning how grid layout, CSS shapes, and other advanced techniques will fundamentally change…well, everything.

San Francisco is coming up November 2-4. If you can't make that, they just released the 2016 schedule with cities all over the U.S., including a first-time visit to Nashville and an extra-special Orlando event at Disney.

I have a sneaking suspicion you'll be seeing a bit more of Dave Rupert and I doing things like this.

Project Comet  

Speaking of in-development software targeted at screen design. Also check out the videos in Khoi Vinh's post. The repeat grid demo is pretty compelling.

Defining and Dealing with Technical Debt

We're all familiar with debt, right? It's that concept where an amount is owed from one person (the borrower) to another (the lender). We often use it to describe financial situations. For example, I borrow money from a bank. I now have debt with them in the amount of how much money they lent me (plus interest!) and expect me to repay it.

Debt isn't always about money. In fact, we run into it as front-end developers all the time and may not even know it. We call this term technical debt and will be exploring what that means in this post.



BoxBox is a design app that’s currently under development and the designers, Kevin Lynagh and Ryan Lucas, have written a series of articles describing their thoughts that led to its creation. First, they outline the problems with the current state of applications:

We’re still primarily using legacy print design applications to create modern, responsive software interfaces. This has created a unique set of challenges that plague the UI design workflow.

Later, they delve into the serious lack of responsive design features of applications like Photoshop and how these limitations affect the design decisions we’re making:

Perhaps the biggest danger is that these tools lie by omission: They present your design at a single size with fixed rulers and exact pixel values, even though the final application needs to live across many screen sizes. This is akin to designing a sailboat without considering the densities of wood and water until “implementation time.”

This series of articles goes a lot further than defining the problems of our design tools however; they make a lot of useful suggestions, too. They tackle the difficulties of designing reusable components and the need for naming, editing and modifying these objects. Interestingly enough they also discuss the benefits of using code to detect changes over the lifecycle of a design, instead of static mockups.

#141: Getting the Images and Numbers for Responsive Images

You know about responsive images. It's about the image syntax in HTML. If you give it the right information in the right syntax, you can get the browser to download just exactly the right image it needs, without giving it too much or too little image data. It's fantastic for performance.

You know that to get the most out of responsive images you should polyfill it with Picturefill. You download it, you include it on your page.

You have …

Watch Video →

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed