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 …

CSS image-set in Webkit (Safari/Chrome)

Safari 6 and Chrome 21 added vendor-prefixed support for the proposed CSS4 image-set specification. This proposed specification is designed to support displays with different pixel densities (read: retina displays). background-image: url(image.jpg); background-image: -webkit-image-set(url(image.jpg) 1x, url([email protected]) 2x); /* Also include other prefixed versions of this … */ background-image: image-set(url(image.jpg) 1x, url([email protected]) 2x); Safari 6 and Chrome …

Meny — An experimental CSS 3D fold-in menu

A UI experiment with a 3D fold-in menu. Move your mouse to the left edge of this page — or swipe in from the left edge if you’re on a touch device — to expand the menu. A refreshing alternative to the already overly common left nav flyout which Facebook introduced in their mobile app. …