现代 CSS

Airen的博客

CSS秘密花园: 滚动提示

滚动条主要是用来告诉用户当前显示的并不是所有的内容,滚动的话可以查看更多。但是,它们往往显示得很笨拙而且分散了用户的注意力,所以现代操作系统中已经开始对它们进行简化,通常是把它们完全隐藏起来,等到用户和可滚动的元素元素有实际交互的时候再出现。

CSS秘密花园: 通过模糊来De-emphasize(去强调)

在上一节的“通过调节亮度去强调”中,我们看到了通过调节亮度来让Web APP上的一些部分de-emphasize的方法,使用了一个半透明的黑色覆盖层。但是,当页面上有很多东西的时候,我们需要调暗很多,才可以为其上的文本提供足够的对比度,或是把用户的注意力转移到突出显示的盒子上或其它元素上边。还有一种更优雅的方式,如下图所示,是除了调光之外(或者直接不要调光)还把其它的所有东西都模糊。这看起来更真实,因为它模仿了我们看对象的视觉创建了一个深度,也就是当我们专心看物理上离我们近的东西时的视线。

CSS秘密花园: 通过亮度调节去强调(De-emphasize)

很多时候,我们需要通过在元素背后添加一个半透明的深色叠加来让内容变暗,强调并提醒用户关注某个UI元素。例如,lightboxes和“quick tours”接口经常需要这种效果。

使用CSS的counter-increment做的游戏

我把CSS的黑魔法和把CSS推动到极限当作我的至爱。许多人没有意识到这是有多么的强大(特别是结合Sass)的预处理技术。这篇文章结合这两种至爱来做一些有意思的东西。当然它可能会或可能不会被你的下一个客户问,这样做有价值吗?但这样尝试才能真正的理解一种语言(当然,很多人说CSS不是一种语言)。但你也能使用纯CSS技术做一些简单的小游戏。

JavaScript学习笔记:对象属性的枚举

JavaScript中对象的属性分为两种:数据属性访问器属性。然后根据具体的上下文环境的不同,又可以将属性分为:原型属性实例属性。原型属性是定义在对象的原型(prototype)中的属性,而实例属性一方面来自构造的函数中,然后就是构造函数实例化后添加的新属性。

JavaScript学习笔记:对象属性检测

JavaScript对象可以看作是一个属性的集合,很多时候需要看某个属性是否存在于某个对象中。在JavaScript中对象属性的检测主要有以下几种方法。 in运算符、hasOwnProperty()方法、propertyIsEnumerable()方法和!==undefined。接下来看这四种方法怎么检测对象属性。

CSS秘密花园: 自定义复选框

设计师总是希望能够对Web页面上的每个元素都能有更多的控制。当一个CSS经验有限的图形设计师需要创建一个网站案例时,他们很喜欢自定义表单元素,然后让开发人员来把它转变成CSS。

CSS秘密花园:扩展可点击区域

如果你对用户体验感兴趣的话,你可能听说过费茨法则。最早在1954年由美国物理学家Paul Fitts提出,费茨法则是迅速移动到目标区域所需要的时间,是到目标的距离和目标的宽度之间的比率的对数函数。

CSS秘密花园: 挑选合适的光标

鼠标指针的意义并不仅仅是为了显示目前屏幕上的光标在何处,还是为了告诉用户可以进行哪些交互动作。这是在桌面应用程序中很常见的用户体验,但是在Web App中则经常被遗忘。

Houdini:也许是你从未听过的在CSS领域最令人兴奋的发展

你是否曾经试过想使用某个CSS特性但是却因为他没有被所有浏览器支持而不能用?又或者更糟糕的,他被全部浏览器支持,但是这种支持充满了bug、表现不一致甚至是不完全兼容的?如果这些事情曾经在你身上发生过——并且我打赌他们绝对发生过——那么你就需要关注一下Houdini。Houdini是一个新的W3C工作组,他们致力于让这些问题永远消失。他们计划通过引入一整套API来让开发者首次拥有扩展CSS的权利,并且会提供出一套工具来与浏览器的渲染引擎的样式与布局进行挂钩。但是这意味着什么呢?这是一个好的提议吗?这会如何帮助我们开发者在现今与未来构建网页呢?

页面

返回顶部