Alternate Fixed and Scroll Backgrounds [CSS only]

HTML/CSS

How to create alternate fixed and scroll backgrounds with no javascript, but just the help of the CSS background-attachment property set on fixed. These days we see a lot of parallax effects in web projects. You can achieve some dynamic results with CSS only, without affecting the website performance. All you need to learn is how…

Critical Path CSS Generator

Tool

The critical path is the path to render a web page – what’s needed before that can happen. CSS Stylesheets block rendering. Until the browser has requested, received, downloaded and parsed your stylesheets, the page will remain blank. By reducing the amount of CSS the browser has to go through, and by inlining it on…

Variance, build powerful Data Visualizations

HTML/CSS

Variance empowers engineers, designers, journalists, scientists, and analysts to build elegant bespoke data graphics for the web, using only HTML & CSS. Our intuitive, markup-based grammar emphasizes clear, practical graphics and serves as the foundation for a wide range of visualizations. In Variance, data graphics are created using special new data visualization tags that work…

Pleeease, a CSS postprocessor

Tool

Pleeease is a CSS postprocessor. The main goal of this tool is to perform all treatments that a pre-processor shouldn’t have to do! (eg, dealing with prefixes, convert rem to px, support older browsers, etc.). Pleeease is also a great tool if you want to write DRY, future-proof CSS. For now, it adds prefixes, variables,…

Iconizr, from SVG drawings to a CSS icon kit

Tool

Iconizr is a free, PHP based command line tool for processing SVG files to CSS icon kits, catering for the full range of devices and clients out there. It creates SVG and PNG fallback icon sprites, their data URI counterparts and the matching CSS and Sass code. It optimizes both SVG and PNG files in…