Clippy – CSS clip-path Maker

Handy tool to creating shapes to use with the clip-path CSS property. Comes with some easy to use predefined shapes.

The clip-path property allows you to make complex shapes in CSS by clipping an element to a basic shape (circle, ellipse, polygon, or inset), or to an SVG source.

See the previously linked CSS Shapes, Clipping and Masking for a few more examples

Clippy – CSS clip-path Maker →

Elsewhere , , Leave a comment

SlingStudio – Portable, Wireless Live Video Production

Color me impressed:

SlingStudio is the integrated solution for creating and sharing professional-quality content. Connect all of your video sources – including professional cameras and smartphones – to SlingStudio’s video-grade Wi-Fi network for synchronizing and broadcasting live video. SlingStudio’s portability and robust wireless technology allow you to monitor, record, switch, edit and live-broadcast your multi-camera production without compromising video quality.

The true power comes with the SlingStudio Console app for iPad:

Broadcast live and wow your viewers on Facebook and YouTube with cool transitions and camera angles, including picture-in-picture and a quad view.

I love it when technology can be used to easily orchestrate this, especially at the price tag of $999.

SlingStudio – portable, wireless video production →

Elsewhere , Leave a comment

Chrome DevTools’ Command Menu

Something I learnt via Umar Hansa‘s great DevTools tips is that the Chrome DevTools sport a Command Menu.

By hitting SHIFT+CMD+P (same shortcut as Sublime Text’s command menu BTW) you can open it. Thanks to fuzzy matching you can easily access things in it.

Chrome DevTools: UI: Command Menu →

Umar Hansa’s Twitter Account is worth following if you’re into the Chrome DevTools (I know I am 😉). Additionally you can sign up for his video course Modern DevTools

Elsewhere , Leave a comment

Firefox DevTools’ Layout Panel Improvements for CSS Grid

Nice work by the Firefox DevTools Team:

Available in Firefox Nightly (for now).

Powerful New Additions to the CSS Grid Inspector in Firefox Nightly →

Elsewhere , , , Leave a comment

Connect multiple mobile screens together with Swip.js

What if all your mobile devices were a single screen? This probably isn’t the most common question to ask yourself.

But, just for a second, actually think about it. Think about all the possibilities of being able to combine any kind of mobile device, independent of its operating system. That’s what Swip.js does.

Place two or more devices next to each other, pinch ‘m together and – *BOOM* – they’re connected. Once connected you – thanks to websockets – can throw/move stuff over ‘m, as if they were one big screen.

One of the examples included is the golf game shown above.

The Story of Swip.js
Swip.js (GitHub) →

Elsewhere , , Leave a comment

Opera 46 and Chrome 59 now support APNG (Animated PNG)

This part of the Opera 46 release notes got me very excited:

Opera now supports animated PNG, or APNG for short. APNG is a file format that works similarly to GIF. The difference is that APNG is smaller and supports both 24-bit images and 8-bit transparency.

Ever since APNG landed in Firefox (10 years ago to be precise, with the release of Firefox 3) I’ve been waiting for other browsers to implement support for this format too: animated images with true transparency, what’s not to like?!

Great to see that Opera now supports it (again). Safari already supports it, as does the latest version of Chrome (Chrome 59).

Edge has no support, but you can upvote the issue on UserVoice (which you should).

What’s new in Chromium 59 and Opera 46 for Developers →
APNG Demo →

Elsewhere , , Leave a comment

Changing SVG path data with CSS

Another great thing I learnt at CSS Day is that it’s possible to alter SVG path data – which is to be found in its d attribute – using CSS.

As Chris Coyier demoed, one can overwrite the SVG’s path in CSS by using the (underdocumented) d property. As long at the paths match up (e.g. same type, same amount of points, etc.) you can even sprinkle a transition property on top to get a smooth transition:

<svg viewBox="0 0 10 10">
  <path d="M5,2 Q 2,5 5,8" />
</svg>
svg path {
  transition: d 0.35s;
}

svg:hover path {
  d: path("M5,2 Q 8,5 5,8");
}

Here’s a working demo:

To animate more complex paths CSS won’t do unfortunately. For those you’ll need something like Greensock’s MorphSVG or the aformentioned flubber.

☝️ Looking for more demos and/or an in-depth look into path data? CSS Tricks has got you covered: The SVG `path` Syntax: An Illustrated Guide

Elsewhere , , Leave a comment

Smooth SVG Path Morphing with flubber

The goal of this library is to provide a best-guess interpolation for any two arbitrary shapes (or collections of shapes) that results in a reasonably smooth animation, without overthinking it.

Installation per npm:

npm install flubber

Note that flubber only calculates the interpolated data:

import { interpolate } from "flubber";

const triangle = "M1,1 L2,1 L1.5,2 Z";
const pentagon = [[0, 0], [1, 1], [3, 1], [2, 0.5], [0, 1]];

const interpolator = interpolate(triangle, pentagon);
interpolator(0); // returns the SVG triangle path string
interpolator(0.5); // returns something halfway between the triangle and the pentagon
interpolator(1); // returns the SVG pentagon path string

To actually animate the SVG path you’ll need to call interpolator yourself on a timed interval, and set the path data to the returned result.

// Animate with a duration of 1250ms
animateOverTime(1250, (progress) => {
    myPathElement.setAttribute("d", interpolator(t));
});

This looks like a great thing to combine with some easing functions 😉

flubber (GitHub) →

☝️ animateOverTime above is a custom function I quickly throw together. It allows one to perform a callback during a given period of time. Underneath the hood it’s powered by requestAnimationFrame.

See the Pen Timed requestAnimationFrame by Bramus (@bramus) on CodePen.

Elsewhere , , 1 Comment

Woodswimmer

WoodSwimmer is a new short film by engineer and stop-motion animator Brett Foxwell. Created in collaboration with musician and animator bedtimes, the work follows a piece of raw wood through a milling machine, capturing its unique growth rings, knots, and weathered spots through a series of cross-sectional photographic scans. Due the speed at which the images are animated, the log’s grains begin to flow like granules of sand—shifting, mixing, and flowing in a vibrant dance that seems completely removed from its rigid material.

Mesmerizing (especially if you watch it fullscreen, headphones on). Reminds me of a brainscan.

(via)

Elsewhere , Leave a comment

Breaking Elements out of Their Containers in CSS

A common thing to see in a design are visuals that break out of the main content column. You most likely have already seen this kind of design over at Medium for example, where it’s common for the main visual to be full width, whilst the content remains centered.


Your typical Medium layout:
content caged in a central column + fullwidth visual breaking out of that column

Last week, whilst attending CSS Day I learnt of a technique I hadn’t seen before to solving this problem.

The old tried and battle tested way of doing it

Let’s start of with some HTML and a tad of CSS:

<div class="main">
    
    <div class="content">
      <p>Some text</p>
    </div>
    
    <div class="content--fullwidth">
      <img src="…" />
    </div>
    
    <div class="content">
      <p>Some more text</p>
    </div>
 
</div>
.main {
  width: 70%;
  margin: 0 auto;
}

img {
  width: 100%;
}

To make the .content--fullwidth element break out of its parent container .main, you need to stretch it out so that it takes up the outer 100% again, and then recenter it.

One can achieve just this by giving the .content--fullwidth element:

  1. A width which is the inverse of the width of .main to stretch it out.
    Here 1 / 70% = 142.857142857%
  2. A negative translation on the X-axis equalling half of the remaining width to correctly position it.
    Here (100% - 70%) / 2 * -1 = -15%

In CSS that’d become this:

.main > .content--fullwidth {
  width: 142.857142857%;
  transform: translateX(-15%);
}

In case you want to verify your numbers: the product of both percentages should again be 100%. 70% * 142.857142857% indeed equals 100% 🙂

Here’s a pen demoing the technique described above:

See the Pen Breaking elements out of containers, technique #1 (inverse width + translate) by Bramus (@bramus) on CodePen.

Ow yeah 🙂

~

The new and shiny way of doing it

So last week at CSS Day I saw Rachel Andrew give a nice demo where she used CSS Grid – what else? – to break a set of images outside of the “content column”.

We start off with the same HTML again:

<div class="main">
    
    <div class="content">
      <p>Some text</p>
    </div>
    
    <div class="content--fullwidth">
      <img src="…" />
    </div>
    
    <div class="content">
      <p>Some more text</p>
    </div>
 
</div>

To limit the width of the contents she uses a CSS Grid Layout containing:

  1. A fluid column, at least 1em in width
  2. A main column, 70% in width
  3. A fluid column, at least 1em in width

The containing content is then placed inside that 2nd column.

.main {
  display: grid;
  grid-template-columns:
    minmax(1em, 1fr)
    minmax(0, 70%)
    minmax(1em, 1fr)
  ;
}

.main > * {
  grid-column: 2;
}

Breaking the .content--fullwidth element out of its parent container .main now becomes rather easy, as only has to make it span all three columns.

In CSS that’d become this:

.content--fullwidth {
  grid-column: 1 / 4;
}

🤔 Huh? 4? Shouldn’t that be 3?
👉 Nopes. Remember, in CSS Grid you’re targeting lines 😉

Here’s a pen demoing the technique described above:

See the Pen Breaking elements out of containers, technique #2 (CSS Grid) by Bramus (@bramus) on CodePen.

~

If you’re using CSS Grid then Rachel’s technique will come in handy. For projects in which you need to support older browsers, you can still rely on the first one.

💁‍♂️ New to CSS Grid Layout? Rachel has got you covered with her excellent Grid By Example.

Elsewhere , , 1 Comment