The State of CSS Reflections

I recently saw this loader on CodePen, a pure CSS 3D rotating set of bars with a fading reflection. It's done by using an element for each bar, then duplicating each and every one of these elements to create the reflection and finally adding a gradient cover to create the fading effect. Which sounds a bit like scratching behind your right ear with the toes of your left foot! Not to mention the gradient cover method for the fading effect doesn't work with non-flat-color backgrounds. Isn't there a better way to do this with CSS?

The answer is: "yes" and "no". (more…)

Sponsor: Wufoo  

Wufoo is for building web forms. From a simple contact forms to complex, multi-page, logic-controlled mega forms.

Personally, I'm a huge Wufoo user. I have multiple accounts across different organizations. Each organization has multiple users with access to different forms and reports. I've used it for job applications, customer support, selling T-shirts, collecting feedback, lead generation, and more.

Wufoo has collected literally hundreds of thousands of form entries for me, saving me countless hours of dev work. Often those entries are emailed to me and my team, sometimes they are turned into reports to help us understand something better, and always that data is stored right within Wufoo, accessible through APIs and to Wufoo's many integrations with other apps.

Web Design in 4 Minutes  

Jeremy Thomas explains web design (the basic applying style to content part) through an interactive step-by-step walkthrough. I could see this being an ah-ha moment for plenty of folks in the early stages of understanding web design.

Remote Control WordPress at Scale

This is the third and final article in a series on "remote control WordPress". That's my nickname for this strategy of managing network settings on one "control" install, and then pulling those values into all your client installs. The advantage is that it saves staff members from having to toggle the same settings on the same network plugins, across many multisite installs.

(more…)

New `video` Policies for iOS  

This is pretty big news: earlier today the WebKit team announced that iOS 10 will now support silent <video> elements with the autoplay attribute, which is a big deal for performance. Jer Noble describes the update in much more detail:

It turns out that people these days really like GIFs. But the GIF format turns out to be a very expensive way to encode animated images when compared to a modern video codec like H.264. We’ve found that GIFs can be up to twelve times as expensive in bandwidth and twice as expensive in energy use. It’s so expensive that many of the largest GIF providers have been moving away from GIFs and toward the <video> element. Since most of these GIFs started out their lives as video clips, were converted into animated GIFs, and were again converted back to video clips, you might say that the circle is complete.

Using the fieldset and legend elements  

Leonie Watson:

You should use the <fieldset> and <legend> elements when:

  • You have a single multiple choice question (using radio buttons or checkboxes).
  • You have several questions relating to the same topic (like text boxes, or any other type of field).

You should not use the <fieldset> and <legend> when:

  • You have a single form field that asks for a single piece of information.

#148: Laying Things Out (HTML & Flexbox) with Dee Gill

In this pairing screencast, I hang out with Dee Gill. We take a look at some layout stuff for a new app she's working on: Tinge. She had a design mockup she was working from, so we peak at that and try and build it out in HTML and CSS. We start at the top and focus on the navigation, using flexbox heavily to do what we need to do. …

Watch Video →

We have a pretty good* newsletter.