CSS技巧

Web技巧(14)

前段时间在微信群聊了一个动效的话题: 鼠标悬浮的时候,三个区块依次显示;鼠标移开时,三个区块反向依次消失。如果使用CSS的triansition是否可以实现?借此话题,在这一期中就围绕着Web的动效来展开。Web动效不管是从设计到实现都有很多的话题可聊,比如,动画的设计、交互、实现等等。甚至是实现的技术方案或工具。

Web技巧(13)

任何一门语言都有自己的小技巧和新特性,比如Web的三大基石HTML、CSS和JavaScript,在各自的社区中总是有同学在不同的时候梳理一些相关的新特性和小技巧。让这些特性更好的服务于社区,尽量的让大家更好的理解和掌握。另外一个目的是,让更多的同学能把这些新特性运用于自己的项目中。在这一期中,将围绕着JavaScript的一些新特性来展开。希望对大家有所帮助。

Web技巧(12)

这一期中我们将围绕着Web中的font来展开。在现代Web中除了能使用font-family属性给Web应用指定字体之外,还有其他一些用于字体的特性,比如@font-face可以加载非系统的字体,字体变体属性font-variation-*让Web上排版和印刷上排版之间的差距在逐渐拉小,font-display属性来决定非系统方面字体的加载策略,提高性性能,font-palette用来选择字体配色,@font-palette-values自定义字体配色等。如果你感兴趣的话,请继续往下阅读。

Web技巧(11)

前段时间在项目使用div元素模拟body时使用了will-change时触发了一个奇特的问题,最终以删除will-change而解决。那么这一期中我们先来聊聊will-changetransform和层有关的事情,然后再和大家一起分享几个在Web中的JavaScript相关的API,比如全屏API、MediaStream API、MediaRecorder API、scrollIntoView API 和 分享 API等。感兴趣的同学请继续往下阅读。

Web技巧(10)

自从响应式设计的概念的提出至今也有近10年的时间了,虽然不乏看到响应式设计的身影,但还是有很多同学不太了解什么是响应式设计或响应式设计中常会碰到的问题以及如何解决。特别是流式(自适应)排版和响应式设计难以分清楚,但这两种排版都为我们提供了很多机会来更好的设计Web页面,而且更能完善阅读体验,但与此同时,也带来一些潜在的问题,比如字体大小无法控制,图片等比缩放难处理,甚至还有一些潜在的问题,比如可访问性问题。在这一期中,我们就来聊聊排版中的一些技巧,希望大家能喜欢。

Web技巧(09)

这一期中我们主要来聊聊全屏的事情。对于全屏的布局,大家可能首先想到的是100%(或100vw)来实现,但如果你要在一个限宽的容器中实现一个全屏效果呢?比如说,一个Banner区全屏显示。类似这样的效果在PC端是非常常见的一个效果。可能会有很多同学会说,这样的效果有什么好聊的,不是非常简单的Layout吗?其实还是有点事情可聊的。如果你感兴趣,不仿继续往下阅读。

Web技巧(08)

前段时间看到群里有不少同学在讨论,目前阶段哪些交互行为可以直接使用CSS来实现,而不再依赖JavaScript。后来想想,这应该也是一个值得我们探讨的话题,后来一想,要不这一期我们就来聊聊,哪些交互行为,可以不再依赖JavaScript,直接使用CSS来实现。

Web技巧(07)

在这一期中咱们一起来聊聊HTML5中的表单。说到HTML,可能很多同学会说,HTML5有什么好聊的,不就是一些HTML的标签吗?事实上并非如此,就拿HTML中的表单中的input元素为例吧,input元素及其相关属性和类型的支持情况都会因为浏览器的不同而存在较大的差异。甚至在支持特定功能的各个浏览器之间,它们的行为也会有所不同。那这一期中,就来围绕着input说点事。

Web技巧(06)

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

Web技巧(05)

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

页面

返回顶部