daily links

  • filamentgroup/grunticon · GitHub
    grunticon is a Grunt.js task that makes it easy to manage icons and background images for all devices, preferring HD (retina) SVG icons but also provides fallback support for standard definition browsers, and old browsers alike. From a CSS perspective, it’s easy to use, as it generates a class referencing each icon, and doesn’t use CSS sprites.
    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.
    grunticon also generates a small bit of JavaScript and CSS to drop into your site, which asynchronously loads the appropriate icon CSS depending on a browser’s capabilities, and a preview HTML file with that loader script in place.
  • TYPO3 Retina Images | TYPO3 Blogger
    Eine Möglichkeit ist es, das generierte Bild per HTML5 data-Attribut an ein Wrapper-Element zu binden und mit JavaScript die Source zu switchen, wenn der Browser ein HiDPI-Screen erkennt. Keine optimale Lösung, da auch hierbei zwei Bilder geladen werden, aber eine einfache Lösung mit TYPO3-Boardmitteln.
  • How to make clouds with CSS 3D – Blog – Clicktorelease
    This tutorial will try to guide you through the steps to create a 3D-like, billboard-based clouds. There are a few advanced topics, mainly how 3D transformations via CSS properties work. If you want to find more information, this is a nice place to begin.