Advertisement
Reisenfag

Lowres web-pallete filter

Jul 28th, 2018
270
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 2.81 KB | None | 0 0
  1. /* Пикселизация и пастеризация до 216 colors safe web палитры картинок */
  2. img.banner, a > img, div.greeting > img, div.catthread > img, a > video, img.de-fullimg, img.de-file-img, div.de-fullimg-wrap > video {
  3.     filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' color-interpolation-filters='sRGB' shape-rendering='optimizeSpeed'><filter id='oldweb' x='0' y='0'><feGaussianBlur in='SourceGraphic' stdDeviation='0.2' result='blured'/><feFlood x='1' y='1' width='1' height='1'/><feComposite width='3' height='3'/><feTile result='pixels'/><feComposite in='blured' in2='pixels' operator='in'/><feMorphology operator='dilate' radius='1'/><feComponentTransfer><feFuncR type='gamma' exponent='1.0' amplitude='0.84' offset='0.08' /><feFuncG type='gamma' exponent='1.0' amplitude='0.84' offset='0.08' /><feFuncB type='gamma' exponent='1.0' amplitude='0.84' offset='0.08' /></feComponentTransfer><feComponentTransfer><feFuncR type='discrete' tableValues='0 .2 .4 .6 .8 1' /><feFuncG type='discrete' tableValues='0 .2 .4 .6 .8 1' /><feFuncB type='discrete' tableValues='0 .2 .4 .6 .8 1' /><feFuncA type='discrete' tableValues='0 1' /></feComponentTransfer></filter></svg>#oldweb");
  4. }
  5. img.banner:hover, a > img:hover, div.greeting > img:hover, div.catthread > img:hover, a > video:hover, img.de-fullimg:hover, img.de-file-img:hover, div.de-fullimg-wrap > video:hover {
  6.     filter: unset;
  7. }
  8.  
  9. /* Вариант с псевдо-freestyle пикселями */
  10. img.banner, a > img, div.greeting > img, div.catthread > img, a > video, img.de-fullimg, img.de-file-img, div.de-fullimg-wrap > video {
  11.     filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' color-interpolation-filters='sRGB' shape-rendering='optimizeSpeed'><filter id='crystal' x='0' y='0'><feFlood x='1' y='1' width='1' height='1'/><feComposite width='3' height='3'/><feTile result='pixels'/><feComposite in='SourceGraphic' in2='pixels' operator='in'/><feMorphology operator='dilate' radius='2'/><feComponentTransfer><feFuncR type='gamma' exponent='1.0' amplitude='0.84' offset='0.08' /><feFuncG type='gamma' exponent='1.0' amplitude='0.84' offset='0.08' /><feFuncB type='gamma' exponent='1.0' amplitude='0.84' offset='0.08' /><feFuncA type='gamma' exponent='1.0' amplitude='0.84' offset='0.08' /></feComponentTransfer><feComponentTransfer><feFuncR type='discrete' tableValues='0 .2 .4 .6 .8 1' /><feFuncG type='discrete' tableValues='0 .2 .4 .6 .8 1' /><feFuncB type='discrete' tableValues='0 .2 .4 .6 .8 1' /><feFuncA type='discrete' tableValues='0 .2 .4 .6 .8 1' /></feComponentTransfer></filter></svg>#crystal");
  12. }
  13. img.banner:hover, a > img:hover, div.greeting > img:hover, div.catthread > img:hover, a > video:hover, img.de-fullimg:hover, img.de-file-img:hover, div.de-fullimg-wrap > video:hover {
  14.     filter: unset;
  15. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement