Clipping和Masking 何时使用

前面花了很长的篇幅在《探索CSS Masking模块:Clipping》和《探索CSS Masking模块:Masking》两文中分两部分详细介绍了CSS Masking Module Level 1中的ClippingMasking的基础知识和相关特性,并且使用一些简单的小示例向大家演示了Clipping和Masking如何使用。

探索CSS Masking模块:Masking

探索CSS Masking模块主要分为ClippingMasking两个部分,在上一节中,花了很大的篇幅介绍了Clipping相关的特性,今天接着来学习或者聊聊Masking相关的知识点。从上一节中我们知道,在Masking中有一个遮罩层,这个遮罩层是一个图像,该层也被称为遮罩模式,主要有高亮Alpha两种模式。其中Alpha模式带有alpha通道的图像,alpha通道包含在每个像素数据中的透明信息。最简单的示例就是带有黑色和透明区域的PNG图像,其中黑色部分将会显示,透明区域内容将会被隐藏。

W3cplus开启会员阅读

喜欢W3cplus网站的同学估计最近发现站上有一些文章需要付费阅读。是的,小站自从2019年05月10日开启了付费阅读。如果开启付费阅读给大家带来不便或不爽烦请谅解。为了让大家有一个更好的阅读体验,自今日起开启全年会员阅读机制

Web技巧(06)

上一期中我们提到了CSS的混合模式算法和滤镜相关的知识,正好在这周周会老板也提到滤镜相关的特性。主要使用滤镜来改变颜色和使用混合模式来让视频变得更有意思。那在这一期中,我们接着来聊CSS滤镜对颜色的处理以及滤镜对图标(图像)的处理。除了滤镜来改变颜色相关的知识之外,还会向大家介绍有关于CSS中Clipping的相关运用。

探索CSS Masking模块:Clipping

最近业务中需要实现一些镂空的效果。看到这些效果我最初想到的是通过CSS的maskclip-path来实现,甚至还想结合SVG相关的特性。为了验证自己的一些想法,开始着手撸码,但问题来了,在撸码的过程中,我发现自己对于mask的相关特性理解的还不够透彻。因此重新阅读CSS Masking Module Level 1规范中的文档和相关教程。才发现原来CSS Masking是如此的强大。下面是我自己对CSS Masking模块的一些理解,希望对大家学习和了解该功能模块有所帮助。

Web技巧(05)

这是Web技巧系列的第五期,在这一期中围绕着CSS的混合模式、滤镜、渐变、暗黑模式和可动的CSS网格展开。介绍了混合模式的计算原理;如何通过滤镜实现一些特殊效果,比如Gooey效果;如何使用CSS来实现macOS的暗色模式和亮式模式之间的切换以及怎么来实现一个可动的网格,并且借助其实现一些常见的交互效果,比如off-screen。最后希望这篇文章对大家有所帮助。

聊聊安卓折叠屏给交互设计和开发带来的变化

很多年前,前端同学都觉得PC端的适配(兼容处理)难,都认为移动端的时代适配会容易得多,也无需考虑那么多的事情。事实并非如此,移动端的时代同样面临着各种适配的处理。特别是刘海机的出现,前端需要考虑刘海机适配。而如今随着三星Galaxy Fold和华为Mate X折叠屏手机的面世,前端同学接着又要处理折叠屏幕的适配。就我们团队而言,在上个月就接到相关的通知,需要处理折叠屏的适配。碍于真机难得,前段时间就通过模拟机,做了一些简单的适配测试,不过幸运的是,今天拿到了真机(三星Galaxy Fold) ,写了一个简单的Demo,做了一些适配的测试。特此将相关心得和大家一起共享,希望对大家有所帮助。

图像优化

图像优化应该是自动化的。图像优化的最佳实践发生变化很容易被忽略,而且不经过构建管道的内容很容易丢失。为了实现自动化:在构建过程中使用Imageminlibvip。这些有许多替代方案。大多数CDN(如Akamai)和第三方解决方案,如CloudinaryimgixFastly’s Image OptimizerInstart Logic’s SmartVisionImageOptim API都提供了全面的图像优化自动化解决方案。在阅读博客文章和调整配置上花费的时间可能会超过服务月费(Cloudinary有一个免费套餐)。如果你不想关心这项工作外包的成本或延迟问题,那么上面的开源选项是可靠的。像ImageflowThumbor这样的项目启用了自我托管的替代方案。

Web技巧 (04)

在Web技巧第三期中,我们了解到了排版中断字连接符、原生的延迟加载、不规则阴影处理、Sass颜色函数和CSS自定义属性的结合以及CSS中对齐等知识点。在这一期中,我们将围绕着CSS中的布局来展开。在这一期中将会向大家介绍CSS Shapes给布局带来的变化(Web艺术)、在Flexbox和Grid布局中如何控制最后一行的剩余项以及如何使用Flexbox和Grid实现响应式布局、CSS怎么实现瀑布流布局、CSS怎么构建对角容器和两个还未得到支持的CSS特性:subgrid带两个属性值的display

JavaScript数组的那些事儿

JavaScript中的数组是其中重要的一部分,它提供了很多种操作数组的方法。当涉及到遍历一个数组、查找元素、排序或任何你想要的东西时,JavaScript都可能有一个数组方法可提供给我们使用。然而,尽管它们都很有用,但其中一些知识点仍然不那么为人所知和使用。在这篇文章中将会介绍一些方法,让你在使用数组的时候变得更轻易。甚至可以将接下来的内容当作是JavaScript数组方法的使用指南。

页面

返回顶部