• 我脑中飘来飘去的 CSS 魔幻属性

    Posted by : lon.y@qq.com on 2017年12月28日

    最近看到一篇20 个CSS高级技巧汇总的汇总,感触很深,不过我想,与技巧相比,有些常见css布局难题,有时候更加让我们的日常开发变得踌躇沮丧吧。 在写这一篇文章之前,自己还写过一篇:我所不注意的那些CSS冷知识,但却阻止了我做项目的速度,如果你看了,我相信你也会受益的。 为什么此处li标签内的p元素看起来独自撑开了一行 这是我在segmentfault上看到的一个问题,以前自己遇到过,所以就很热情洋溢的去回答了一下,难道遇到个自己会的,示例代码是这样的:

    阅读全文...

  • 两行 CSS 代码实现图片任意颜色赋色技术

    Posted by : lon.y@qq.com on 2017年12月22日

    很久之前在张鑫旭大大的博客看到过一篇 PNG格式小图标的CSS任意颜色赋色技术,当时惊为天人,感慨还可以这样玩,私底下也曾多次想过有没有其他方法可以实现,又或者不仅仅局限于 PNG 图片。   mix-blend-mode 与 background-blend-mode mix-blend-mode 在我之前的一篇文章初略介绍过 — 不可思议的混合模式 mix-blend-mode,与本文的主角 background-blend-mode 一样,都是实现混

    阅读全文...

  • 盒子端 CSS 动画性能提升研究

    Posted by : lon.y@qq.com on 2017年12月9日

    不同于传统的 PC Web 或者是移动 WEB,在腾讯视频客厅盒子端,接大屏显示器(电视)下,许多能流畅运行于 PC 端、移动端的 Web 动画,受限于硬件水平,在盒子端的表现的往往不尽如人意。 基于此,对于 Web 动画的性能问题,仅仅停留在感觉已经优化的OK之上,是不够的,想要在盒子端跑出高性能接近 60 FPS 的流畅动画,就必须要刨根问底,深挖每一处可以提升的方法。 流畅动画的标准 理论上说,FPS 越高,动画会越流畅,目前大多数设备的屏幕刷新率为

    阅读全文...

  • CSS: 潜藏着的BFC

    Posted by : lon.y@qq.com on 2017年12月8日

    在写样式时,往往是添加了一个样式,又或者是修改了某个属性,就达到了我们的预期。 而BFC就潜藏在其中,当你修改样式时,一不小心就能触发它而毫无察觉,因此没有意识到BFC的神奇之处。 一、什么是BFC(Block Formatting Context) 写CSS样式时,对一个元素设置css,我们首先要知道这个元素是块级元素还是行内元素,而BFC就是用来格式化块级盒子的。 Formatting Context:指页面中一个渲染区域,并且拥有一套渲染规则,它决定

    阅读全文...

  • 灵活的 overflow

    Posted by : lon.y@qq.com on 2017年12月8日

    说到overflow对于CSSer而言并不会陌生,用来控制内容溢出的现象。而很多时候我们还会使用text-overflow来控制内容溢出的显示。一般是直接截取,另一种是截取之后让文本后面带有三个点的省略号。不过有意思的是,我们今天要说的灵活overflow。 前两天@kizmarh发的博文,让我眼前一亮。再次让我不得不佩服国外的工程师的创新能力。大家可能会说是什么效果呢?又是什么效果才能称得上是灵活的overflow呢?别的不多说,先上一个效果: Demo

    阅读全文...

  • JavaScript 中的 CSS:基于组件的样式的未来

    Posted by : lon.y@qq.com on 2017年12月4日

                        我们通过采用内联式 CSS 样式,可以获得 Javascript 中所有编程支持,它的好处就像 CSS 预处理器(变量、混入和函数)一样,而且也能解决 CSS 中的很多问题,比如全局命名空间和样式冲突。 为了深入探索 Javascript 中写 CSS 解决的问题,可以看这个著名的演示:ReactJS中引入CSS。关于 Aphrodite 上的性能改进范例,你可以在Khan Academy: Aphrodite 上查

    阅读全文...

  • 如何用 CSS 修出好看的照片

    Posted by : lon.y@qq.com on 2017年12月2日

    我们通常会通过PS,美图秀秀等来编辑照片,制作比较符合意境的的效果图片(图骗),但是编辑器和PS的切换是有成本的,如果能在编辑器中快捷并且批量的处理图片岂不是很好。这篇文章没有多么高深的代码,只是一些平时容易忽略并且很受用的小技巧。 修图利器之 CSS Filters P图怎么能少了滤镜呢,css提供了很多种滤镜: drop-shadow sepia blur hue-rotate invert brightness contrast opacity gr

    阅读全文...

  • 网页适配 iPhoneX,就是这么简单

    Posted by : lon.y@qq.com on 2017年11月28日

    前言iPhoneX 取消了物理按键,改成底部小黑条,这一改动导致网页出现了比较尴尬的屏幕适配问题。对于网页而言,顶部(刘海部位)的适配问题浏览器已经做了处理,所以我们只需要关注底部与小黑条的适配问题即可(即常见的吸底导航、返回顶部等各种相对底部 fixed 定位的元素)。 笔者通过查阅了一些官方文档,以及结合实际项目中的一些处理经验,整理了一套简单的适配方案分享给大家,希望对大家有所帮助,以下是处理前后效果图: 适配之前需要了解的几个新知识 安全区域 安全

    阅读全文...

  • 一文读懂 JavaScript 和 ECMAScript 的区别

    Posted by : lon.y@qq.com on 2017年11月13日

    我曾试着在谷歌上检索 “ JavaScript 和 ECMAScript 之间的区别。” 最后我在得到的海量的混淆不清又相互矛盾的结果中彻底绝望了: “ECMAScript 是标准。” “JavaScript 是标准。” “ECMAScript 是规范。” “JavaScript 是 ECMAScript 标准的实现。” “ECMAScript 是标准化的 JavaScript。” “ECMAScript 是一门语言。” “JavaScript 是 ECM

    阅读全文...

  • SVG 实现动态模糊动画效果

    Posted by : lon.y@qq.com on 2017年11月13日

    本文由码农网 – 小峰原创翻译,转载请看清文末的转载要求,欢迎参与我们的付费投稿计划! 今天我们将向大家展示如何制作SVG动态模糊效果,并将其应用于HTML元素的常规JS或CSS动画。 动态模糊是一种广泛使用于动态影像和动画的技术,它能使动作看起来更加平滑自然。   在线演示源码下载 动态模糊是静止图像或一系列图像(如电影或动画)中快速移动物体的明显图像拖尾。当记录的图像在单帧记录期间发生变化时,由于快速移动或长时间曝光从而导致动态模糊的结果。——维基百科

    阅读全文...