Wielding the tools from CSS and browser layout can enable stunning visualizations for web content. Using web features like CSS filters, WebGL, HTML5 video, SVG, canvas and evolving future tech like CSS Regions, CSS Shapes and CSS Custom Filters promises a hugely expanded creative landscape. National Geographic: Forest Giant (Demo) → Next Generation Web Layout: …
Tag Archives: css
Jake Archibald – Rendering without lumpy bits
Right, we’ve got a new project, we have to calculate and draw 500,000 pixels, and the deadline is in 16.67 milliseconds. When we’re done, we’ll do it again, and again. Web performance has always been about delivering those pixels on time, but the target has shifted. Optimising pure JavaScript (loops, string concatination, arithmetic) is more …
Continue reading “Jake Archibald – Rendering without lumpy bits”
Pure
jQuery Sticky Objects
lessphp
LESS Compiler written in PHP. Usage is simple: <?php require “lessc.inc.php”; $less = new lessc; echo $less->compile(“.block { padding: 3 + 4px }”); Of course one can take files as input too (define a 2nd argument to cache on disk): <?php echo $less->compileFile(“input.less”); Also ships with an extra shell executable script plessc $ plessc input.less …
Grunticon: A Grunt.js plugin for managing and delivering sharp icons to all devices
grunticon takes a folder of SVG files (typically, icons that you’ve drawn in an application like Adobe Illustrator), and outputs them to CSS in 3 formats: svg data urls, png data urls, and a third fallback CSS file with references to regular png images, which are also automatically generated and placed in a folder. Just …
It’s not a web app. It’s an app you install from the web.
The people over at forecast.io on how often they receive mails from people looking for their app in the App Store where it is not to be found:/p> You don’t get Forecast from the App Store: just go to http://forecast.io/ on your phone, and you’ll be given instructions on how to download it. It’s 2013, …
Continue reading “It’s not a web app. It’s an app you install from the web.”
Browser Repaint Performance
To hit 60fps, we sometimes need to go beyond JavaScript as the sole performance bottleneck for our pages and spend more time investigating paint and layout issues – styles might actually be the core cause of our sluggish performance. The H shortcut within the Developer Tools sure comes in handy! DevTools: Visually Re-engineering CSS For …
CSSCSS – A CSS redundancy analyzer that analyzes redundancy.
$ csscss path/to/styles.css path/to/other-styles.css {.contact .content .primary} and {article, #comments} share 5 rules {.profile-picture}, {.screenshot img} and {a.blurb img} share 4 rules {.work h2:first-child, .archive h2:first-child, .missing h2:first-child, .about h2, .contact h2} and {body.home h2} share 4 rules {article.blurb:hover} and {article:hover} share 3 rules CSSCSS will parse any CSS files you give it and let …
Continue reading “CSSCSS – A CSS redundancy analyzer that analyzes redundancy.”
aprilFools.css
A tad late, but here it is nonetheless: A collection of user styles that change the default rendering of websites. Perfect way to fool someone on April 1st. Put these CSS definitions into your co-workers css overriding file. They will be applied to every website they visit. They are commented out by default, so make …