recentpopularlog in

abberdab : images   21

Duotone filtering w/ CSS variables 😎🌈
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.

Enjoy!
css  color  colorpalettes  duotone  filters  interface  interactive  images  photography 
july 2018 by abberdab
Create A Basic Portfolio Filtering System by Brian Haferkamp on CodePen
One of the things I'm often looking for but can't find is a basic filtering system for portfolio items. It seems like the ones I find online are too complicated or bloated. They're trying to do way too much. So I created a basic framework for a portfolio filtering system that works great as-is. You can also fork it and add any bells and whistles you want.
codepen  portfolio  filtering  jQuery  gallery  images  css  design  grid 
october 2017 by abberdab
Responsive images with srcset and sizes attributes vs picture element – Learnedia
This article is a tutorial to help you understand these underused or misused HTML <img> tag attributes for responsive images. I will also talk about picture vs srcset and when to use each technique.
responsive-images  responsive-design  picture-element  srcset  sizes  web  images  performance  mobile  picture  html  html5  bandwidth  crossbrowser  firefox  chrome  progressive-enhancement 
october 2017 by abberdab
Cropping Image Thumbnails with SVG
Our friend Aaron Parecki recently blogged about a technique he used for centering and cropping image thumbnails using CSS. It
cropping  svg  css  images  html  www 
august 2016 by abberdab
Design for Time Well Spent
We believe in a new kind of design, that lets us connect without getting sucked in. And disconnect, without missing something important.
ethics  design  images  mindfulness  technology 
june 2016 by abberdab
jwagner/smartcrop.js · GitHub
Smartcrop.js implements an algorithm to find good crops for images. Image: https://www.flickr.com/photos/endogamia/5682480447/ by N. Feans Demos Algorithm Overview Smartcrop.js works using fairly
images  javascript  cropping  utilities  photography 
december 2015 by abberdab
Using Responsive Images (Now) · An A List Apart Article
Use responsive images now! Chen Hui Jing introduces us to the new selection types and shows us how we can make them work for us.
images  rwd 
october 2015 by abberdab
Compressive Images | Filament Group, Inc., Boston, MA
We also used the 220% sizing method for JPGs, as outlined by too:
images  retina-display  rwd 
january 2013 by abberdab

Copy this bookmark:





to read