Turns out it’s possible to style broken images. You know, from this: To this: But just “how”, one might ask? Because the <img> element is a replaced element controlled by an external source, the :before and :after pseudo-elements typically shouldn’t work with it. However, when the image is broken and not loaded, these pseudo-elements can […]
Tag Archives: images
Daturi – Convert images to Base64
Handy tool for converting images to their base64 equivalent for embedding in your CSS files for example. Daturi.me →
Tools for image optimization
Where possible, it’s best to try automating image optimization so that it’s a first-class citizen in your build chain. To help, I thought I’d share some of the tools I use for this. Not only contains a list of grunt plugins one can use, but also a few command line and online tools. I’ve been […]
WebKit now supports srcset image attribute
<img src="image-src.png" srcset="image-1x.png 1x, image-2x.png 2x" alt="Example of the srcset attribute. Image contains a coloured striped pattern with some inline text that indicates which of the candidate images were selected."> WebKit now supports the srcset attribute on image (img) elements. This allows you, the developer, to specify higher-quality images for your users who have high-resolution […]
tiltShift.js
A jQuery plugin that uses the CSS3 image filters to replicate the tilt-shift effect. This is a proof of concept and currently only works in Chrome & Safari 6. tiltShift.js →
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 […]
Instagram Unshredder Challenge: Javascript Solutions
Recently the engineers at Instagram challenged the interwebs to write some code that unshreds a chopped up image. Some of us took the liberty of solving the problem in Javascript, although it wasn’t one of the languages suggested. Solution by Joe Lambert Solution by Ron Ilan Solution by Diego Ferreiro Be sure to check and […]