现代 CSS

Airen的博客

通过Sketch设计软件学习SVG基础知识

在《图解SVG的核心概念》一文中,花了很长的篇幅和大家深入的探讨了SVG中的几个核心概念。有了这些基础概念之后,对于学习和理解SVG方面的知识会变得更容易。时至今日,设计SVG的应用软件也越来越多,比如我们熟悉的Adobe Illustrator以及近几年较为流行的SketchFigma等。不过今天,我想结合Sketch软件帮助大家更好的理解SVG的一些基础知识。如果您感兴趣的话,请继续往下阅读。

图解SVG的核心概念

在SVG中,对于很多初学者或者使用SVG有一段时间的同学来说,有几个概念总是会相互混淆。比如,SVG的画布视窗(Viewport)ViewBox等。这几个概念对于学习或掌握SVG来说是非常必要的。在此我们一起来学习和了解这几个概念。

CSS中百分比单位计算方式

CSS中的单位有很多类型,不同类型单位计算方式也有所不同,特别是百分比(%单位,它的计算和使用的属性有着直接关系。其中最为重要的是:百分比是一定要有其对应的参照值,也就是说,百分比值是一种相对值,任何时候要分析它的计算值,都需要正确的找到它的参照值。言外之意,CSS中的百分比单位值最终计算出来的值是可变的。在这篇文章中,我们主要来看看百分比单位在不同使用场景中计算方式。在CSS中能运用%值的属性很多,为了能让大家更好的理解使用%的规则,我们从最熟悉和最简单地属性开始。

可折叠Web可能会给我们带来的变化

可折叠Web的说法是可折叠设备带来的。可折叠设备形式多样,从笔记本电脑到手机,再到新奇的双屏幕混合设备。对于这类新发明并没有一个全面的定义,但大多数都可以归为两类。“可折叠”是指屏幕可以折叠的设备(比如华为Mate X,三星Galaxy Z Flip);而“双屏”设备的屏幕是分开的,但也可以以独特的方式一起工作,以灵活的形式提供生产力(比如,微软的Surface Neo和Surface Duo)。当涉及到Web设计时,这两种类型可能会遵循类似的规则。如果这项技术能大获成功,那么Web设计将面临十年来最大的变革。这对于我们Web开发者而言,也将会开启新的旅程。

GSAP中的timeline

如果你阅读过上一篇《初探GSAP》文章,我想你对GSAP有了一个初步的认识。而且文章中也提到过,使用gsap.timeline()这个API可以帮助我们轻易的控制动画的时序。换句话说,让我们控制动画变得更简单,效果更好。今天这篇文章,我想花更多的时间和大家一起来探讨GSAP中的Timeline,即 gsap.timeline()的使用。

CSS Grid中的auto-fill和auto-fit

Web布局相关的话题一直以来都是一个永恒的话题,不管发展到什么时候,都不会缺这样的话题。一直以来,我都非常推崇CSS Grid的布局模块,在我的认知中,CSS Grid布局是一个强大的布局,它将灵活的解决我们以往在Web中碰到的大多数问题。正因为CSS Grid布局很强大,因此它的体系也很庞大。比如@Juan Martín García就用CSS Grid向大家展示了如何通过一行CSS代码实现特定环境下的响应式布局效果。

初探GSAP

时至今日在Web中开发动效有很多种方式,有纯CSS的方式(AnimationsTransitions),也有Web Animation APISVG Animation,还有很多优秀的JavaScript库(比如,Anime.jsKUTE.jsMo.js等)。在WebGL方面有Three.jsPixiJSBabylon.jsPlayCanvas等。除此之外,业内还有一个制作动画非常出色的平台,那就是GSAPGreenSock Animation Platform的简称)。在接下来的日子中,将会不间断的发布一些关于GSAP制作动效相关的教程,今天这篇文章,主要和大家先探讨一些GSAP的基础知识。

使用React Hooks和WAAPI创建动效

早期在Web页面或Web应用中实现 Web动画 通常是使用JavaScript来完成。使用JavaScript创建动画非常灵活,但不能轻易地让浏览器通过硬件加速来优化动画,也不能将其连接到 布局渲染 管道中。值得庆幸的是,自2007年Webkit团队引入的 CSS AnimationCSS Transition 克服了早期JavaScript动画实现的挑战。但是,CSS Animation和Transition也有很多的限制,特别是在 动态创建动画、控制动画的回放和监视动画生命周期方面等。不过,Web Animation API的出现,让开发者(特别是Web动画方面的开发者)看到了曙光。因为,Web Animation API引入了一种新的解决方案,它提供了CSS Animation和Transition的优化能力,同时还提供了早期基于JavaScript制作动画的API的灵活性。Web Animation API通过 计时模型(Timing Mode)动画模型(Animation Model)提供对Web动画开发和控制。

你可能不太熟知的布局技巧

随着Web技术不断的革新,CSS近几年也变得多年前要更强大。在Web开发中,CSS是不可或缺的一部分,对于很多Web开发者来说,有很多CSS属性不知道,或者说他们知道,但忘记在最恰当的时候使用最适合的CSS属性。而且时至今日,其中有一些CSS的属性可以让开发者能节约更多的时间。比如说,在Web布局中,现代CSS特性就可以更好的帮助我们快速实现,例如等高布局水平垂直居中,经典的圣杯布局、宽高比例页脚保持在底部等。在本文中,我将会介绍一些不同的CSS属性来实现这些效果,希望大家会感兴趣。更希望对大家今后的工作有所帮助。

图解CSS:Flexbox布局(Part2)

在《图解CSS:Flexbox布局(Part1)》中主要和大家聊了Flexbox布局模块中的技术术语以及运用于Flex容器上的相关属性。在第二部分,主要和大家介绍运用于Flex项目中的属性,比如align-selforderflex。这一部分也是Flexbox布局中相当复杂的一部分,因为flexflex-basisflex-growflex-shrink属性的计算非常复杂,也直接影响到Flex项目的尺寸大小。如果你对这部分感兴趣的话,请继续往下阅读。

页面

返回顶部