一抹凝重的灰色(css3)滤镜(filter)彰显仪式感，整站去色(黑白色)以示哀悼

首页 - Web Design/2020-04-06

标签: CSS3 filter 一抹以示仪式凝重去色哀悼彰显整站滤镜灰色白色

2020年4月4日，几乎所有主流媒体的线上网站网易、搜狐、百度等的配色方案统一切换为灰色，比以往多了一分肃穆，往日的清明节只是一个不痛不痒的三日假期而已，而今年的清明注定不同，原因有三：一是临近清明这一传统哀思、祭奠先辈的节日。二是为国家事业牺牲的先烈，包括近期西昌救火及因新冠病毒牺牲的英雄们表示致敬。三是灰色给人稳重安定感，灰色是我们因哀思的一种沉积，更是蕴意着我们沉积过后，秉承先烈意志的一种奋发有为。

当然了，也有的人认为这不过是一种形式主义，形式大于内容，如果不切换为灰色滤镜配色，也并不代表内心没有寄托哀思，其实呢，人生是需要仪式感的，人之以所以能为人，就是人类是有情感，智力，会制造和使用工具来满足的物质精神文化需求，不管任何事物，对人类来说都需要对应相应的情感。网络、APP，各种高科技数码人工智能也一样。新中国成立到现在，中国经历很多改变历史的大事件，抗美援朝、三年自然灾害、两弹一星、唐山大地震、改革开放、香港澳门回归、全世界的经济危机、03年的SARS、08汶川大地震(512)、08年奥运会、2020年的冠状病毒疫情，在这些重大历史事件中英雄的中国人民众志成城，共同进退，也涌现出许多不怕牺牲敢于奉献的烈士、英雄、先驱等等，他们值得我们世世代代去纪念缅怀，根本没有什么所谓的岁月静好，不过是有许多我们认识或不认识的陌生人替我们负重前行。

所以归根结底，仪式感和形式主义的最大区别是自我认同。

因为很多人把哀悼日将网站切换灰色滤镜当成一种规则，他们认同这个规则。他们不只是在生活中言行得体为了给别人留下好印象，他们在平常的开发过程中，对客户，对客服，对网民都要言行得体。如果你把一种行为当成人生的行为准则或道德约束，仪式感就来了。

那么具体怎么操作呢，首先可以使用css滤镜：

html {
    -webkit-filter: grayscale(100%);
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}

CSS filter（滤镜）曾经是 Internet Explorer 专有的 CSS 属性，如今，filter 属性已成为 CSS3 规范的一部分，并且大部分主流浏览器（如 Firefox，Chrome 和 Safari ）都支持

如果你的页面不方便添加额外的css语法，或者你的css文件经过webpack，gulp这样的压缩库进行过压缩，那么可以考虑使用javascript脚本

var imgObj = document.getElementsByClassName('img');
function gray(imgObj) {
var canvas = document.createElement('canvas');
var canvasContext = canvas.getContext('2d');

var imgW = imgObj.width;
var imgH = imgObj.height;
canvas.width = imgW;
canvas.height = imgH;

canvasContext.drawImage(imgObj, 0, 0);
var imgPixels = canvasContext.getImageData(0, 0, imgW, imgH);

for(var y = 0; y < imgPixels.height; y++){
for(var x = 0; x < imgPixels.width; x++){
var i = (y * 4) * imgPixels.width + x * 4;
var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
imgPixels.data[i] = avg;
imgPixels.data[i + 1] = avg;
imgPixels.data[i + 2] = avg;
}
}
canvasContext.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
return canvas.toDataURL();
}
imgObj.src = gray(imgObj);

一般情况下，使用js脚本可以更好的兼容浏览器。

最后，还可以使用svg滤镜，关于svg，在之前的一篇文章:Iconfont(矢量图标)+iconmoon(图标svg互转)配合javascript来打造属于自己的个性化社交分享系统中，有过涉及，大概的基本原理就是在不影响任何文档结构的前提下，允许你给你的矢量图形添加各种专业视觉效果，我个人认为它的方便之处就在于，好像把PhotoShop直接装到了网页上。

html {
    filter: url(data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter i…0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale);
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}

当然了，如果你不想自己来写代码，感觉过于麻烦，也可以依托第三方控件来达成灰色滤镜的效果，比如业界鼎鼎有名的 grayscale.js，只需要引入它的js文件库

<script src="https://j11y.io/demos/grayscale/grayscale.js"></script>

通过元素选择器也可以完成效果

//原生js
grayscale(document.getElementsByTagName("body"));
//也可以用jquery
grayscale($("body"));