现代 CSS

lulux的博客

使用SVG symbols建立图标系统

在实现Web项目的图标系统时,SVG是一个不错的选择。虽然使用SVG创建图标系统有多种方式。在这篇文章中,我们只看其中一种:SVG symbols。这项技术基于两个元素的使用:<symbol><use>

CSS动画概述

给HTML中的内容添加动画的三种方法之一是,CSS animation【另外两种方法是:CSS transitions及JavaScript】。CSS动画相对简单。它允许你使用元素的CSS属性来添加动画。它可以让你创造出很多非常酷的效果,如移动、淡入淡出、改变颜色,等等。

Web动画:学习使用API

如果你使用过SVG,你应该知道可以使用SMIL给SVG添加动画CSS Transitionskeyframes动画都可以操作CSS属性来添加动画。 requestAnimationFrame() 使得浏览器可以在下一帧执行之前,请求一个动作。但是每一中动画技术都不是完美的,各自有各自的问题。

未来CSS文件加载方式

Chrome打算改变<link rel="stylesheet">的加载方式,当link出现在<body>中时,就变得非常明显了。在blink-dev的文章中,它的影响和性能尚不明确,所以我想在这里深入讲讲。

如何创建(动态的)文本填充

这是一篇关于如何使用不同的技术(包括CSS和SVG),为文本创建各种不同类型的(动态)填充和描边的教程。我想,未来已经在这里。我们在CSS和SVG已经有这么多令人兴奋的可能性,这些我们以前都只能是想想而已。例如,我们现在有很多方法可以用来创建包含动态填充的文本。

使用viewBox添加动画

我最近在CodePen上发表了一个DEMO来庆祝新的一年,然后得到了很多积极的反馈,关于我如何使用viewBox来作为我的场景中的camera的。所以我决定来写一篇文章来介绍一下这个动画是如何创作的~

给你的品牌标志添加动画

我们来讨论一下如何给我们设计的作品添加动画,使其和我们品牌标志的某些层面的内容,如字体、颜色、布局以及其它各种东西保持一致。动画是非常有趣的。给我们的设计添加动画可以使其变得有生命,同时也让我们的设计脱颖而出。动画可以是展示设计是如何组合的一起的。它们可以提供上下文帮助大家理解我们的产品。动画往往是我们放在最后的策略。我们在一个模态窗口或滑动菜单上放一个过渡,但是我们通常都不会考虑这个动画是否符合我们整体的设计。

SVG图标非常方便,但降级并不容易

图标字体的使用在慢慢减少。最近很多人找出了不要使用字体图标的理由,并劝大家使用SVG图像。在《金融时报》(注:作者是一名《金融时报》的前端工程师),我们一致认为,总的来说,是时候探索作出一些转变了。

SVG片段标识符(Fragment Identifiers)如何工作

我之前谈到了一点关于SVG<use>的内容——使用它来创建图标系统。<use>的美妙之处在于你可以定义一次SVG,然后在其它地方可以对其多次引用。这种特性使得我们可以创建图标系统,解决“多张图仅需要发一次请求,因为这super高效”这个我们过去用CSS sprite和图标字体解决的问题。但是<use>意味着内联SVG。当你想要使用一个比较大的SVG文件中的一部分时,如使用SVG作为<img>background-image引入。这就用到片段标识符啦。

如何使用tref元素重用SVG文本

写一次SVG代码,然后在多个地方重用,可以帮助你写出更多模块化的代码,而且它也有助于维护。通过tref元素,SVG可以很方便地重用text元素的内容。上周我大概讲解了tspan元素,并通过几个实例讲了如何使用它来单独给文本添加样式和定位。几个示例中都使用了位置属性——xydxdy,还提到了其它几个属性。我们现在来讲讲剩下的两个属性,然后再讲讲使用tref元素重用SVG文本。不过注意tref元素是SVG 1.1规范的一部分,它已经从SVG 2.0规范中删除了。我在这里介绍它,也许哪天你就碰到它了呢。

页面

返回顶部