金沙国际官网_金沙国际平台登录

因为这个金沙国际官网_金沙国际平台登录网站与很多的大型澳门赌场都有合作,金沙国际官网_金沙国际平台登录尽职尽责,高效执行,保持好奇心,不断学习,追求卓越,点击进入金沙国际官网_金沙国际平台登录马上体验吧,所以现在也正式地开始了营业。

您的位置:金沙国际官网 > web前端 > PNG格式小图标的CSS任意颜色赋色技术,Github资源

PNG格式小图标的CSS任意颜色赋色技术,Github资源

发布时间:2019-12-04 07:10编辑:web前端浏览(151)

    调试 CSS 的方法

    2016/09/06 · CSS · 调试

    原文出处: Ben Frain   译文出处:众成翻译 - yanni4night   

    我经历过许多 CSS 代码的调试工作,有别人写的也有自己写的,有移动端平台的也有标准桌面浏览器的,从陈旧的 IE 到最新的基于 Webkit 的每日构建。经验告诉我,很多人并没有一个标准的 CSS 调试流程。

    我发现在大多数情况下,拥有专业的解决问题的方法,能够节省花在 bug 上的时间。

    下面是我总结的经验。

    我不保证这是最适合的调试 CSS 的方法,但是确实对我很有效。如何 CSS 不是你的主要编程语言,调试它可能就像暗黑艺术一样;遵循下面的指南能够帮助你更有效地定位和解决 bug。

    概括地说,我把调试流程分为 3 个阶段:

    • 评估并快速修复
    • 还原和重现
    • 定位根源并修复

    我们挨个解释每个阶段并实践一个例子。

    Github资源收集

    2015/08/30 · CSS, HTML5, JavaScript · Github

    原文出处: leozdgao的博客   

    Github上已经给别人点了很多赞了,觉得有必要开始整理起来。这里用于整理我在Github中的starred项目,方便之后检索 ,同时分享出来。本文将会不断更新和整理。

    PNG格式小图标的CSS任意颜色赋色技术

    2016/06/08 · CSS · 1 评论 · PNG

    原文出处: 张鑫旭(@张鑫旭)   

    评估并快速修复

    如果 CSS 是你的主要工作语言,或者你对 CSS 有一定的理解和实践经验的话,解决 CSS 问题就有很多简单的方法,否则的话,方法就少一些。

    有经验的 CSS 开发者可能都知道的一些 CSS 陷阱:

    • 图片周边存在有趣的空白?设置 display: block(图片默认是内联的,因此会有空白)。
    • 元素排列不正确?你可能有浮动的元素。
    • 绝对定位元素不显示、位置错误或者被遮挡?你可能没有设置父元素的 position 属性或者用 transform 及 opacity 创建一个 z-index 上下文。
    • 伪元素不显示?你可能忘记了设置 ‘content’的值。

    这样的 “bug” 有一大堆。实际上根本没有 bug,更多的是开发者缺少对浏览器行为的理解。更准确地说,是 CSS 代码让浏览器怎么做。

    对这些 CSS 特性熟悉的开发者能够快速定位到问题并且修复。他们对 bug 的认识与那些对 CSS 不了解的人会产生分歧。这样在解决 CSS bug 中对‘工作流’需求的重要性的认识就会因人而异。

    对于‘快速修复’中没有覆盖的陌生问题,在开发者工具中靠猜来解决问题的方式已经没什么价值。即使运气好问题被解决了,也很难判断出问题到底是怎样被解决的。

    如果出现的问题不能被轻易解决,先确定问题区域的范围,抓取 HTML 标签(也就是拷贝 DOM),进入下一个调试阶段:还原和重现。

    专业提示:大多数浏览器的开发者工具会让你选择包裹元素并拷贝 HTML 区块。在 Chrome 的开发者工具中,要连同包裹元素一起拷贝,需要点击 ‘Copy > Copy OuterHTML’。

    HTML/CSS

    • html5-boilerplate
    • html5demos
    • web项目启航包
    • CSS术语表
    • ES5 shim
    • html5shiv
    • Respond(Media Query polyfill)
    • Modernizr
    • normalize.css
    • bootstrap
    • Semantic-UI
    • amazeui
    • masonry 栅格布局库
    • lost 栅格布局库
    • bootmetro win8 metro风格UI库
    • CSS模拟各种设备
    • CSS spinners
    • css-loaders
    • loaders.css
    • animate.css
    • velocity
    • dashboard(Bootstrap模板)
    • 雪碧图生成工具
    • svg-sprite-polyfill
    • Snap.svg
    • SVG图标集
    • 纯css图标
    • Font-Awesome
    • material-design-icons
    • Material Design Lite
    • Material风格css框架
    • fullPage.js
    • Fullpage原生实现
    • bootstrap-daterangepicker
    • bootstrap-additions
    • pjax
    • Ace(Cloud9的文本编辑器)
    • quill 文本编辑器
    • plupload
    • postcss
    • three.js
    • stage.js

    一、眼见为实

    CSS可以修改图片的颜色,没错,可以,眼见为实!您可以狠狠地点击这里:png小图标CSS赋色demo

    上面的不是很黑的是原始图标,是个PNG图片,下面这个是可以赋色的:

    图片 1

    下面,我们随意选择一个颜色,例如紫色,然后:
    图片 2

    图片 3

    是不是感觉很厉害!以后设计师就不需要在提供几套颜色的图片了。

    SVG, icon fonts等技术似乎也不是那么耀眼了。

    还原和重现

    本阶段的 CSS bug 修复在类似 Codepen 的帮助下异常简单。我们目的主要是复现出此问题 – 也就是引起 bug 的代码。这能让我们快速定位 bug,直捣黄龙。

    为清晰起见,只把相关的 HTML 和 CSS 提取出来复现问题。你既可以手打 HTML 对应的 CSS,也可以复制真实的代码。如果可能的话,不用把所有 CSS 代码一股脑拷贝过去重现问题,保证最精简的要素即可。保持逐步增加 CSS 的习惯,问题就会自己找到你。

    在快要接近真相时,往往只需要一个特殊的 CSS 属性的改变就能让 bug 暴露出来。

    相对应的做法是,把所有 CSS 都扔进入复现问题,然后每次移除一点,直到问题出现。在实践中,我发现这略笨,不用也因人而异,你可能有不同的见解。

    逐步地增加或删除 CSS 代码已经是重现问题和定位故障的固定套路了。

    可能是常用的工具库

    • moment
    • lodash
    • highland 流式风格工具库
    • handlebars.js
    • FileAPI
    • CryptoJS加密库
    • Esprima(ECMAScript语法解析)
    • jison 语法解析器生成器
    • bowser 判断浏览器
    • reqwest(Ajax实现)
    • superagent
    • es6-promise
    • core-js(各种js pollyfill集合)
    • svgo SVG优化工具
    • stateman 前端路由
    • dragdealer
    • pdf.js
    • filesize.js
    • berserkJS
    • umd
    • requirejs

    二、原理其实很简单

    原理其实很简单,使用了CSS3滤镜filter中的drop-shadowdrop-shadow滤镜可以给元素或图片非透明区域添加投影。

    如果对drop-shadow不是很了解,建议先看看前些时间写的“CSS3 filter:drop-shadow滤镜与box-shadow区别应用”一文!

    对于背景透明的png小图标而言,如果我们施加一个不带模糊的投影,不就等同于生成了另外一个颜色的小图标了吗?

    然后,我们把原始图标隐藏在容器外面,投影图标在容器中间,不见给人感觉是赋色效果了?

    比方说本文的demo,如果把icon父级的的overflow:hidden去掉,原始的图标就暴露出来啦!

    图片 4

    那么 HTML 标签呢?

    假设使用最少 CSS 代码复现问题时,效果有如原始代码一样。这也是有用的,我们现在看 HTML 标签。

    第一件事要做的,也是不能跳过的,就是检查标签的有效性。即使报告出我们不关心的问题(比如 meta),至少能保证它不会以某种方式破坏美感。我们希望能发现未闭合的标签、没有引号的属性,以及其它任何可能影响浏览器解析的问题。建议你使用 W3C validator。

    一旦标签检查通过,将有助于消除浏览器引入意外样式的可能性。这样做:

    首先,把所有元素改成 div(块级元素)和 span(行内元素),保证它们只被 CSS 的类选择器选中。也许有必要把额外的选择器移除,如把 a.link 改为 .link

    通过使用固定的标签我们消除了浏览器针对特定元素引入默认样式的可能性。表单元素是个特例(马上会在例子中见到)。

    如果把所有元素改成 div 和 span,问题消失了,那么浏览器引入默认样式的嫌疑就被确定了。现在在 computed styles 面板中寻找浏览器增加了什么样式,想办法覆盖它。总之就是要看计算后的样式。

    代码处理工具

    • babel
    • traceur-compiler
    • webpack
    • node-browserify
    • amdclean
    • gulp
    • grunt

    三、实现的时候实际有难度

    原理如上面,我一开始实现的时候,以为很简单,因为分分钟可以实现自己的想法,后来发现有些天真了,Chrome浏览器怎么都显示不出来;FireFox浏览器却可以!咦,究竟发生了什么。

    在Chrome浏览器下,drop-shadow有一个如下的呈现特性:

    在Chrome浏览器下,如果一个元素的主体部分,无论以何种方式,只要在页面中不可见,其drop-shadow是不可见的;实体部分哪怕有1像素可见,则drop-shadow完全可见。

    所以,我试过:

    • text-indent负值隐藏原始图,无投影,失败!
    • clip剪裁隐藏,无投影,失败!
    • margin负值隐藏原始图,无投影,失败!
    • left负值隐藏原始图,无投影,失败!

    通通不行,实现遇到了巨大的阻碍。

    后来,灵光一现,如果我实体部分也在可视区域内,但是是透明的,会怎样呢(反正不会有投影出来)?

    于是,我就试了下曾经立下无数战功的透明边框,卧槽,又立功了,成了!

    因此,下面这一个CSS声明是千万不能少的:

    border-right: 20px solid transparent;

    1
    border-right: 20px solid transparent;

    定位根源并修复

    如果简化 HTML 标签也没有找到问题,并且是可稳定复现的,那么就该换个浏览器试一试。是否同样的问题出现在 Chrome,IE,Safari 和 Firefox 上?如果不是,哪个的表现是正确的?如果只有一个浏览器是错的,那么就值得去搜索一下对应的 bug 跟踪系统了:

    • Chrome bugs
    • Firefox bugs
    • Safari bugs
    • Microsoft bugs

    是某浏览器的问题吗?或者是某浏览器的特定版本的问题?问题是否在修复中?有没有不影响其它浏览器的解决方案?实在不行你可以为特定的浏览器编写修复代码吗?

    过去我曾详细描述过如何向浏览器提 bug,在 2011 年 Lea Verou 也写过一份描述提 bug 流程的文章。

    另一种情况是可能需要‘无害的’hack。例如,我最近遇到的一个场景是在一个块级元素后面的元素必须是绝对定位的才能显示出来。 left: 100% 只有在 IE 浏览器(移动端是Windows Phone 8,8.1 和 10)中不生效。IE 中在两个元素之间总有一个空隙。看起来像是一个亚像素渲染问题,因此 left: 99.99% 就能解决问题而不会影响其它浏览器。这是个 hack 手段,但我们知道原理(有的浏览器会舍入,其它则不会),标注在 CSS 的注释中,没有任何危害。

    微软的 Greg Whitworth 告诉我了关于亚像素舍入的更多细节。WebKit 和 Blink 内核舍入 1/64,Gecko 内核舍入 1/60,Edge 舍入 1/100(感谢 Webkit 开发者 ‘smfr’)。

    移动端

    • Swipe
    • mobileTech 移动端资源收集

    四、关于兼容性

    IE13+支持,Chrome和FireFox浏览器支持,移动端iOS支持,Android4.4+支持。也就是,基本上,移动端现在可以使用这种技术了。

    既节约了流量,也让我们的开发更简单,维护更方便了。

    计算后样式

    开发者工具中比较容易被忽视的是 computed styles 面板。如果你对 computed styles 不熟悉的话,顾名思义,就是真正应用到元素上的样式。这很重要,因为你写的样式不一定会生效。同样,你写的样式也不是所有生效的样式。下面的例子将解释我的意思:

    XHTML

    <fieldset class="outer"> <div class="inner"> <label for="" class="item"><span>hello</span></label> <label for="" class="item"><span>hello</span></label> <label for="" class="item"><span>hello</span></label> <label for="" class="item"><span>hello</span></label> <label for="" class="item"><span>hello</span></label> <label for="" class="item"><span>hello</span></label> <label for="" class="item"><span>hello</span></label> <label for="" class="item"><span>hello</span></label> <label for="" class="item"><span>hello</span></label> <label for="" class="item"><span>hello</span></label> </div> </fieldset>

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <fieldset class="outer">
        <div class="inner">
            <label for="" class="item"><span>hello</span></label>
            <label for="" class="item"><span>hello</span></label>
            <label for="" class="item"><span>hello</span></label>
            <label for="" class="item"><span>hello</span></label>
            <label for="" class="item"><span>hello</span></label>
            <label for="" class="item"><span>hello</span></label>
            <label for="" class="item"><span>hello</span></label>
            <label for="" class="item"><span>hello</span></label>
            <label for="" class="item"><span>hello</span></label>
            <label for="" class="item"><span>hello</span></label>
        </div>
    </fieldset>

    对应的 CSS 是:

    CSS

    .outer { max-width: 400px; } .inner { width: 100%; overflow-x: auto; overflow-y: hidden; -ms-overflow-style: -ms-autohiding-scrollbar; -webkit-overflow-scrolling: touch; white-space: nowrap; } .item { display: inline-block; width: 100px; }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    .outer {
        max-width: 400px;
    }
     
    .inner {
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        -ms-overflow-style: -ms-autohiding-scrollbar;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
     
    .item {
        display: inline-block;
        width: 100px;
    }

    outer 的宽度会是多少?如果你认为是 max-width 的 400px,我会原谅你的。但是不是我们看到的宽度,看 Ben Frain 编写的 codepen。

    什么情况?为什么不是 max-width 的值?给你个思路,打开 Computed Styles 面板。

    找到问题的根源了吗?

    我来给你解释下。默认地,fieldset 元素的宽度会等于其内容的宽度。在 Chrome 的Computed Styles 面板中,min-width 的值是一个新的 min-content

    min-width 设置一个新值来“修复”它。这个例子中,min-width: 0 就会让 max-width 按照我们期望的那样进行工作。

    这正是开发者工具的 Computed Styles 面板中看到的值。记住你写的代码不一定是浏览器计算后的。

    测试框架和断言库

    • chai
    • jasmine

    五、结语碎碎念

    其实,本文的技术发明(主要是透明border的处理)在“drop-shadow vs box-shaow”这篇文章完成后就研究出来了。本来想写个小专利,蹭点早饭钱。结果,新厂子写专利没费用,而且周期要3年。

    3年我儿子都可以打酱油了。所以,罢了,直接分享出来。

    今天8号,本月已经6篇文章了,写文章暴走了下。就是为了腾出大段且连续的业余时间,要秘密进行其他大项目。

    时光机
    如果你是3~5年之后看到此文,而且你是2016年上大学的,那么,我在写这篇文章的时候,你可能正在翻来覆去睡不着,还在焦虑明天的考试。总之,不要担心,我给大家找了一个非常硬的后台,保证你们这次高考无忧,放心睡觉吧!哟,你在好奇是哪个后台。嘻嘻嘻嘻,说出来怕吓着你————观音菩萨!

    2 赞 6 收藏 1 评论

    图片 5

    讨论

    页面出现异常的原因可能很多并且不尽相同。不同浏览器对规范的实现存在差异是普遍存在的现象。相比于编写一个疯狂的浏览器 bug 目录,解决问题的最有效流程还是始终保持条理性。总结来看有效的措施包括:

    • 评估 bug,执行快速修复
    • 使用最少的代码重现问题
    • 利用工具和 bug 追踪描述原因
    • 使用更灵活的代码修复问题,或者使用注释过的hack手段,亦或拷贝副本修复

      1 赞 3 收藏 评论

    图片 6

    Node.js

    • node
    • io.js
    • nw.js
    • PM2
    • connect
    • q
    • async
    • koa
    • node-restify
    • node-static
    • step
    • then.js
    • co
    • node-glob
    • thunks
    • forever
    • request
    • bluebird
    • FormData For node.js
    • node fs模块扩展
    • node-portfinder 获取可用的端口
    • yargs 方便操作process.argv
    • Editor Framework桌面应用框架
    • OAuth2orize
    • Inquirer.js 命令行交互
    • jsdom
    • node-lessons包教不包会
    • nodemon
    • node-supervisor
    • node-formidable
    • node-xml2js
    • bagpipe

    本文由金沙国际官网发布于web前端,转载请注明出处:PNG格式小图标的CSS任意颜色赋色技术,Github资源

    关键词:

上一篇:没有了

下一篇:没有了