CSS函数的8个使用技巧

已有 1104 人阅读此文 | 2016-09-13 01:30 | 来源: 刘传鹏博客 | 作者: 刘传鹏

CSS函数技巧

CSS 比许多 web 程序员认为的更加强大。这种样式表语言正变得越来越强大,给浏览器带来了原本要用 JavaScript 实现的功能。本文将介绍无需 JavaScript 的 CSS 函数的 8 个妙用。

1. 纯 CSS 的 tooltips

很多网站仍在用?JavaScript 创建 tooltips,但实际上,用 CSS 实现更加简单。最简单的方法是在 HTML 代码的 data 属性中提供 tooltip 文本,比如:data-tooltip="…"。这样就可以在?CSS 中添加以下代码来在 attr() 函数中显示 tooltip 文本了:

[css].tooltip::after {

content: attr(data-tooltip);

}[/css]

很好懂,对吧?当然要想设计?tooltips 还需要更多的代码,但是不必担心,有一款很棒的纯 CSS 库就是为此而生的,叫做 Hint.css?。

2. 使用自定义data 属性和 attr() 函数

我们已经在?tooltips 中用过 attr() 了,但是还有一些情况也可以用 attr()。结合 data 属性,可以通过 title 和 description 仅用一行 HTML 代码创建缩略图:

[css]<a class="caption" href="#" data-title="Vulture" data-description="…">

<img src="img.jpg" alt="Illustration"/>

</a>[/css]

接下来就可以用?attr() 函数来显示 title 和 description 了:

[css].caption::after {

content: attr(data-title);

}[/css]

这里提供一个?hover 上去有字幕动画效果的缩略图例子:

CSS函数技巧-1

说明:CSS 生成的?content 是?不易获取?的。在此方面,这篇文章的?关于获取 CSS 生成 content 的内容?部分可以借鉴。

3. CSS 计数器

CSS 计数器可以做出神奇的效果。计数器不是最有名的特点,多数人可能认为它的支持性不够好,但实际上,所有浏览器都支持 CSS 计数器:

CSS函数技巧-2

计数器用于分页或是在?gallery?下方展示项目数量都很棒,但是不应该用在有序列表(<ol>)上。也可以用 CSS 计数器计算已选项的数量,代码量会令你惊叹(并且没有 JavaScript):

CSS函数技巧-3

在可拖放排序的列表中用 CSS 计数器动态改变数量也很赞:

CSS函数技巧-4

像上个例子一样,记住——CSS 生成的 content 是不易获取的。

4. CSS filters实现毛玻璃效果

苹果的?iOS 7?给我们带来了“毛玻璃”效果——看起来像磨砂玻璃窗的、半透明、模糊的元素。在苹果的推行下,在越来越多的地方可以见到这种效果了。再现这种效果有点复杂——在有?CSS filters 之前,只能用?模糊的半透明图片?来实现毛玻璃效果。目前几乎所有的主流浏览器都支持 CSS filters,再现毛玻璃效果就简单多了?。

CSS函数技巧-5

目前?backdrop filters?和?filter()?函数?只有?Safari?支持,但是将来我们就可以用它们实现相似的效果了。

5. HTML Elements做背景图

通常都是指定?JPEG?或?PNG?文件充当背景图或渐变。但是你知道?element()?函数可以用?<div> 做背景图吗?目前只有 Firefox 支持 element()?函数:

CSS函数技巧-6

Element() 函数拥有无限可能,这里有个 MDN 上的?例子?。

6. calc() 实现智能栅格

Fluid grids(流体网格划分)很棒,但是有几个严重的问题。例如,无法实现顶部和底部的空隙和左右的空隙大小相同。此外,根据所使用的栅格系统不同,标记有些混乱。即使是?flexbox?也不是做好的解决方法。但是有了可在?CSS 中作为 value 使用的 calc()?函数,栅格会变得更棒。在?SitePoint?的此篇教程?中,George Martsoukos?列举了几个实例,比如间隔完美的网格画廊。通过?CSS 预编译器,比如 Sass,利用 calc() ?实现一套栅格系统?非常简单,并且易于维护。calc()?的浏览器支持性近乎完美,极力推荐使用。

CSS函数技巧-7

7. CSS calc() 对齐 position:fixed?元素

calc()?函数的另一个使用场景是对齐?fixed 定位的元素。例如,有一个左右均有空隙的 content wrapper,如果想要对 wrapper 内的一个 fixed 元素精准对齐——要算出给“right”或是“left”属性赋值多少是很困难的。用 calc()?可以结合?relative 和 absolute 的值来精准对齐元素:

[css].wrapper {

max-width: 1060px;

margin: 0 auto;

}

.floating-bubble {

position: fixed;

right: calc(50% – 530px); /* 50% – half your wrapper width */

}[/css]

这里提供一个例子:

CSS函数技巧-8

8. cubic-bezier() 动画

要想网站或?app 的 UI 更加引人注目的话,可以使用动画。但是标准的 easing 选项非常有限,比如“linear”或是“ease-in-out”。像是弹跳动画更是标准选项无法实现的。使用 cubic-bezier()?函数,就可以让元素按你想要的方式去动画。

使用?cubic-bezier()?有两种方式——?理解背后的数学知识?然后自己创建,或者使用?cubic-bezier?生成器?。

说实话,我喜欢后一种方式。

结语

聪明使用?CSS 函数不仅可以解决像是建立更合理的栅格系统等难题,它也给了你更多机会去创造。随着浏览器的支持性越来越好,你真的应该重新审视一下你的 CSS 代码,考虑用 calc()?等函数进行优化了。

如果有人让你推荐前端技术书,请让他看这个列表 ->《经典前端技术书籍

英文出处:Anselm Urban。欢迎加入翻译组

本文由 伯乐在线古鲁伊 翻译。

本文地址: http://liuchuanpeng.com/website-making/1165.html

已有 2 人评论 网友评论

必填

选填

选填

刘传鹏博客|专注分享互联网商业模式和网站运营推广策略的博客