现代 CSS

CSS秘密花园

CSS秘密花园: 驾驭列表宽度

虽然我们很久以前就停止使用表格来布局,但在网页中还是占有一席之地,比如表格数据统计、电子邮件,列表清单等等。同时,我们使用display属性,可以让元素渲染的形式和表格相似。然而,有时候看起来很方便,但有很多内容是动态的,这让布局非常难以预测。

CSS秘密花园: 内容尺寸

大家都知道,如果不显式的给一个元素设置height值,它将会根据元素的内容自动调整。如果我们要想要给元素的宽度也有一个类似的行为呢?一个相对较新的规范 CSS Intrinsic & Extrinsic Sizing Module Level 3widthheight定义了一些新的关键词,其中一个非常有用的是min-content

CSS秘密花园: 交互式图像对比

有时候我们需要向别人展示两幅图像的视觉差异,通常一幅是修改前的图像、一幅是修改后的。例如,把两幅图像放在一起,展示照片处理的效果。比如一些美容师的网站要展示某些美容护理的效果,某个地理区域发生灾难的结果。最常见的方案是将两张图片并排放置。但是,这样的话人的眼睛就只能注意到非常突出的差异、而察觉不到那些小的变化。如果对比不是那么重要或者两图之间的差异非常大的话,这种方法是没有问题的,但是对于其它情况呢,我们需要一些更好的方法。

CSS秘密花园: 滚动提示

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

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

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

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

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

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

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

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

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

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

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

CSS秘密花园: 环形文本

尽管这不是一个常见的文本效果,有时候有一些比较短的文本需要遵循环形路径显示。这种时候,CSS就弃我们而去了。没有任何CSS属性或功能可以完成这个效果,我们唯一想到的CSS解决方案都非常麻烦,所以我们也就只是想想而已。真的没有什么办法可以实现这样的样式吗?除了使用图像,除了不影响我们文本的整体美观?

页面

返回顶部