| Posted under Articles

Resources of the week No.2

1. Radial Parallax with SVG, SMIL and CSS

An amazing article by Adam Guttentag about a visual effect that combines radial perspective  with  parallax effect that does not require JavaScript or plugins.


parallax svg smill css

2. Discover new fonts and colors with every tab

Palletab is a Chrome extension which uses Google fonts and amazing ColourLovers palettes to inspire you with fresh and clean inspiration every time you hit that new tab button!


palette color compbinations

3. flexbox playground and code generator

A handy css generator about flexbox. Just select the options you want and the code will be automatically generated for you


flexbox generator

4. Cutting-Edge CSS Features: blend mode, mask image, CSS clip-path

CSS continues to evolve and today’s native features are becoming closer to tools we’d normally use in our favorite graphics editor.


cuttin edge css: blend mode, mask image, CSS clip-path

5. Online PHP Decoder

UnPHP is a free service for analyzing obfuscated and malicious PHP code.


php decoder online

6. Responsive Images For Retina: Using HTML5’s srcset

An article that proposes a solution on the retina problem: send high-resolution versions of images to devices that can use them, while maintaining a standard resolution for others. The srcset attribute does just that.


scrset for retina

7. Best website / showcase of canvas

Our favorite site! Choose between Canvas Playground and WebGL Experiements and see the interactions. ACNPL\WGL stands for ACTIVATION NODEPLUS Lab, a digital real-time graphic handicraft built with HTML5 real-time technique.


canvas examples

8. Chrome Devtools Cheatsheet


chrome dev tools cheatsheet


D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG and CSS.


intro to d3 js

10. Great Canvas pen

A pen featuring an interactive canvas particles system


canvas particles

11. Exploring circles in css

CSS only solution for circles with percentage highlight


12. Font pairing & recommendations

Browse through the most used fonts, find font pairings through examples and see recommendations in font combining!


type.io font pairing

13. CSS-Only Solution For UI Tracking

How to track page views & events in devices that do not support javaScript.


css tracking

14. For Loop On An Array in LESS

A way to produce css using a for loop in LESS.


css for loop in less php

15. WebDesignRepo

Find inspiration, news & tutorials through a list of categorized sites. Webdesignrepo is a curated collection of helpful links from around the web.


web design repository

16. Awesom SVG

A very useful curated list for SVG. Find tutorials, examples, plugins and everything you might need in this list.


awesome svg list

17. Getting Started with CSS Shapes

For a long time, web designers have been forced to create within the constraints of the rectangle. Most content on the web is still trapped in simple boxes because most creative ventures into non-rectangular layout end in frustration. That is about to change with the introduction of CSS Shapes, available starting with Chrome 37.

CSS Shapes allow web designers to wrap content around custom paths, like circles, ellipses and polygons, thus breaking free from the constraints of the rectangle.


css shapes in text

Thanks for your likes, this will motivate me to write posts more often!