CSS 滤波器生成器

CSS滤波器生成器是CSS滤波器属性的可视化编辑器,您为每个滤波器功能移动一个滑块 - 模糊,亮度,对比度,饱和度,灰度,棕褐色,反转,色调旋转和不透明度 - 并观察效果实时应用于预览,然后复制其产生的确切CSS。

Filter属性直接在浏览器中应用模煳、变色、对比度调整等图形效果,无需图像编辑器,多个功能可以链式在一个声明中,并按顺序应用,这就是老式、温暖、戏剧等照片风格的外观构建工具,为您管理该链,仅输出您更改的功能,保持CSS干净。

Vintage 预设上页面打开;再选一个预设,微调每个功能,复制声明,没有账号,没有上传,页面加载完后一直离线工作。

CSS滤镜生成器上一个温暖的照片外观,点击温暖预设和生成的CSS读取滤镜:亮度(105%)饱和(140%)棕褐色(25%);随着预览向琥珀色移动模煳拖动到2px,线变成滤镜:模煳(2px)亮度(105%)饱和(140%)棕褐色(25%);点击无,或按重置,它返回到滤镜:无;由于预览是固定的颜色样本而不是您自己的照片,所以在发货前检查真实图像上复制的CSS。

Filters 按照写入的顺序应用,顺序会改变结果:灰度那么 sepia 就不一样 sepia 那么 greyscale,因为第一个去掉第二个会着色的颜色,值得知道的 getcha 是结构性的而不是视觉性的,任何一个有 filter 而不是 none 的元素都会成为其固定且绝对定位的后代的包含块,因此过滤后父级内部的下拉或模态会将自身定位在那个父级而不是 viewport 上,它还创建了一个新的堆叠上下文,可以打破以前有效的 z 索引排序,如果一个 filter 以看起来与外观无关的方式破坏布局,那几乎总是为什么在大多数浏览器中,过滤器都是 GPU 加速的,但是大元素上的大模糊半径仍然很昂贵,这个工具总是把函数按一个固定的顺序写入,先模糊,后不透明,所以它不能在灰度之前产生 sepia;如果需要,复制后用手重新排序函数。