Was playing with mix-blend-mode to create different duotone filters. Then I thought it might be cool to have a handy selector wheel to try out different filters. So here it is! A duotone filtering tester using CSS variables. The inner ring is the lightening color whilst the outer is the darkening color. To change the colors, adjust the colors variable in the Pug code.
Circles are nested SVG circles. They are generated by Jade loops (for easy tweaking). Flexbox lays them out in an even row. They are colorized via palettes from the COLOURlovers API.
Color palettes with shades in HTML, CSS and JavaScript. Palettes: Windows Phone, Tango Desktop Project, Fedora, Open Suse, Jack Production, iOs 7, Pantone Spring 2016.
This tool will let you drop an image and generate palettes from its top 100 colors (by surface area), and output it for use in CSS, iOS (Objective-C & Swift), Android (Java), etc.
vartable=newTabulator("#example-table",{height:205,data:table_data,layout:"fitColumns",columns:[{title:"Name",field:"name",width:64,// これだけでツールチップが実装されるtooltip:true},{title:"Age",field:"age",align:"left",formatter:"progress"},{title:"Favourite Color",field:"col"},{title:"Date Of Birth",field:"dob",sorter:"date",align:"center"},],});
vartable=newTabulator("#example-table",{height:205,data:table_data,layout:"fitColumns",tooltips:function(cell){varcellElement=$(cell.getElement());cellElement.on('mouseover',function(){$('.tabulator-tooltip #tabulator-tooltip-value').text(cell.getValue());});cellElement.on('mousemove',function(e){$('.tabulator-tooltip').css('opacity',1);$('.tabulator-tooltip').css('left',e.pageX+30+'px');$('.tabulator-tooltip').css('top',e.pageY-10+'px');});cellElement.on('mouseleave',function(e){$('.tabulator-tooltip').css('opacity',0);});return'';},columns:[{title:"Name",field:"name",width:64,},{title:"Age",field:"age",align:"left",formatter:"progress"},{title:"Favourite Color",field:"col"},{title:"Date Of Birth",field:"dob",sorter:"date",align:"center"},],});
