Focal Point: Intelligent Cropping of Responsive Images

When working with images on small screen devices it is recommended to focus on the subject: don’t just show a scaled down version of the photo, it’s better to remove some of the background scenery and show the person on the photo (see the Obama example at the top of this post on responsive images).

Enter Focal Point:

A small set of CSS classnames to help keep images cropped on the focal point for responsive designs. Using only HTML/CSS, web authors can specify an image’s focal point, which stays as the image’s primary focus, while the image’s available width changes on responsive webpages. Crop and re-size images depending on available width and let CSS to do all of the work, and without any JavaScript

Yes, pure CSS that is 🙂

Focal Point Demo →
Focal Point Source (GitHub) →
Focal Point Article →

CSS Filterlab

While we have to wait for CSS Custom Filters to hit mainstream browsers, you can use CSS Filter Lab to play with built-in CSS filters already available in most WebKit browsers today, including Chrome, Safari, and even Mobile Safari on iOS6.

With CSS Filters you can create stunning effects. filter: sepia(0.8) saturate(3) brightness(0.25) contrast(2); for example results in:

CSS Filterlab →
iPhone Filter Demo Source (GitHub) →

Responsive CSS3 Slider

With clever use of the general sibling selector:

#slide1:checked ~ #slides .inner { margin-left:0; }
#slide2:checked ~ #slides .inner { margin-left:-100%; }
#slide3:checked ~ #slides .inner { margin-left:-200%; }
#slide4:checked ~ #slides .inner { margin-left:-300%; }
#slide5:checked ~ #slides .inner { margin-left:-400%; }

Responsive CSS3 Slider →

Clearless — A collection of reusable LESS mixins

A reuseable collection of carefully-considered Less mixins, or YALML (Yet Another Less Mixin Library).

Next to some basic mixins such as one for a gradient, Clearless also provides mixins to working with Webfonts, Sprites, Icons and Grids.

Built by the guys over at clearleft

Clearless →

jQuery Stick ‘em

jQuery plugin to mimic the new and upcoming CSS position: sticky;

position: sticky is a new way to position elements and is conceptually similar to position: fixed. The difference is that an element with position: sticky behaves like position: relative within its parent, until a given offset threshold is met in the viewport.

jQuery Stick’em Demo →
jQuery Stick’em Source (GitHub) →
position: sticky; lands in Webkit →