CSS3

图解CSS: 变量字体

Web排版和传统的印刷排版之间的差距不是一点点,而且Web排版一直以来都令Web开发者感到头痛,由其是Web中的字体。或许你在平时开发Web页面或Web应用的时候已经发现在Web上需要渲染一些更具艺术风格的字体,或者希望在响应式Web排版的设计中让文字能根据断点做出相应的响应等。虽然通过一些技术手段可以实现类似的效果,但同时也会造成许多新的问题产生。幸运的是,2015年开始推出了OpenType字体格式,以一些非常显著的方式改变了开发者面临的实际困难。他们有能力在较小的文件下为Web带来更丰富的排版性,但随着新的可能性和优势,新的挑战和复杂性也随之出现。那么,OpenType字体的引入之后会给Web带来什么样的变化?我们又应该在Web中怎么使用?接下来,我们一起来探讨这方面的话题。

CSS媒体查询新特性

在探索A11YH5 Dark Mode的时候,我们发现使用CSS的一些属性可以识别出用户的偏好设置,比如prefers-reduced-motion来识别设备是否开启了Reduce Motion功能,用prefers-color-scheme来识别设备是否开启了Dark Mode模式。而这些都是CSS新的媒体特性,即 Media Queries Level 5规范中介绍的特性,该规范除了这两个新特之外,还有其他的新特性,接下来,我们来一起看看CSS媒体查询新增了哪些特性。

它是按钮还是链接?

链接按钮在Web中可以说是最常见不过的东东了。但很少人会去问自己在构建Web的时候,链接和按钮是否用对了,或者说什么时候用链接或按钮?事实上呢?在现代的Web中,特别是在移动端,构建链接和按钮不在局限于<a><button>标签上了,可以说是HTML中的其他元素,比如大家喜欢用的<div><span>,甚至还有不少用<p>以及其他标签。作为一位专业的Web开发者来说,这样做真的无所谓呢?还是可以改进呢?特别是想让Web更具语义化,更具可访问性的时候,这小小的差异就很值得我们去花时间探讨。

聊聊Neumorphism UI效果

最近在翻阅信息时发现很多人都在聊一个新的东西,这个新东西就是Neumorphism,对此我也感到好奇,花了一点时间去了解了一下为什么这么多人都在聊“Neumorphism”。原来 “Neumorphism”是一种UI设计风格,该UI风格是因为设计师 @Alexander PlyutoDribble上发表的一份作品而变得流行起来。很多人都认为“Neumorphism”会成为2020年的一种设计趋势,事实上在过去几个月它已经成为一种新的设计潮流,但事实真正是这样的吗?如果是,作为Web开发者又如何能快速响应设计师的需求,快速而又精准的还原出“Neumorphism” UI效果。那么今天我们就来聊聊这方面的话题。

给CSS加把锁

看到该标题,我想你可能会感到非常的意外和好奇,“CSS怎么能加把锁呢”?其实这里所说的给CSS加把锁是指业内所说的CSS Locks(或者CSS calc Lock)。该概念是@Tim Brown在2012年提出的一个概念,该技术其主要致力于解决文本排版可读性相关的技术难度,特别是在实现一些精准的流式布局中的文本排版。在《Web技术10》中也提到过,@Mike Riethmuller、@Tim Brown和@Geoff Graham都在致力于这方面的研究,而且找到了使用CSS锁技术方案来锁定流式排版。让我们实现一个精准的流式排版不再是难题。在今天这篇文章,我们来一起探讨一下CSS锁的故事。

构建杂志布局可能会用到的CSS特性

Web布局可以说是灵活的也是久被受限的。在众多的开发者眼里,Web的布局就应该是方方正正的,因为Web中的每个元素都类似一个盒子,这些盒子就是方方正正,规规矩矩地。同时在很多视觉的眼里也认为,Web的布局无法打破矩形排列的限制。比如说,要在Web中实现一个类似杂志的排版是非常困难的,甚至是不太可能的。值得庆幸的是,时至今日,Web的技术在不断的革新,很多新的特性可以让我们打破这样的限制,让你在Web上实现像杂志一样的排版布局。接下来,我们就来看看,在Web中实现媒体布局会有哪些亮点,有可能会用到哪些特性。

暗黑模式的实践

在《如何使用CSS实现黑暗模式和高亮模式的切换》和《给网站添加暗黑模式指南》主要围绕着如何使用CSS的技术给Web添加Dark Mode的功能。在这篇文章中我们把重点放在了React环境中,详细介绍了如何在React中实现Dark Mode的效果,另外还向大家介绍了一Darkmode.js这样的JavaScript怎样实现Dark Mode的效果。感兴趣的欢迎继续往下阅读。

下一代CSS的Transform

最新版本的Firefox(v72)浏览器的发布,在CSS方面带来了一些变化,比如对CSS路径动画(CSS Motion Path)的支持和CSS Transforms Module Level 2部分功能的支持。在这篇文章,我们就来一探CSS Transforms Module Level 2给CSS Transform带来的变化以及和CSS Transforms Module Level 1的差异。但在这篇文章中我们不会和大家聊所有Level 2中的内容,只是聊聊和level 1的变化,如果你感兴趣的话,请继续往下阅读。

初探CSS路径动画

在Web网站或Web应用程序上经常能看到动效的效果,而且实现动效的方式有很多种,比如说CSS、SVG、Canvas、WebGL以及JavaScript等技术手段都可以实现。到目前为止,CSS Animations Level 1CSS TransitionsWeb Animation API以及CSS Houdini的CSS Animation Worklet API等规范可以很好的指导我们如何制作Web动效。特别是CSS的animationtransition令CSSer感到兴奋,因为它们可以让我们使用纯CSS就可以实现以前很多需要依赖JavaScript才能实现的动效。CSS的animationtransition实现从A点到B点的动画效果很简单,而且效果也不错,但这些效果都具有一个特性,即 沿着一条直线运动。即使你使用贝塞尔曲线也无法让某物体(运动对象)沿着曲线路径运动。简单地说,就是无法很好或者轻易的实现路径动画效果。

图解CSS: 元素尺寸的设置

众所周之,Web上的任何一个元素都是一个盒子(框模型),对于该盒子在CSS中有一个专业的术语,即CSS盒模型。其中CSS的display属性可以改变盒子的格式化上下文,每个格式化上下文都拥有自己不同的渲染规则,而这些规则是用来决定其子元素是如何定位,以及和其他元素的关系,这些关系中也包括了盒子大小。换句话说,Web中的任何一个元素都是有大小的,即使没有给元素设置任何有关于大小的属性。了解如何设置元素大小是非常重要的,因为它们直接会影响一个元素的渲染,特别是在页面布局的时候非常重要,而且在使用Flexbox和Grid布局时,元素大小变得就越来越重要。另外在Flexbox和Grid中有很多内置的灵活性,因为它们管理项目在容器中怎么显示。在CSS中有一个独立的功能模块(CSS Intrinsic & Extrinsic Sizing Module Level 3)是用来定义元素大小的。接下来的内容,我们就来一起探讨该模块中的相关属性与特性。

页面

返回顶部