10 个不错的 CSS 小技巧

共 3202字,需浏览 7分钟

 ·

2022-05-19 23:46



本文为译文,采用意译。

CSS 大约有两百个属性。很多属性都是相互关联的,理清楚每一个属性细节是不可能的。所以,本文分享一些有用的 CSS 小技巧,方便开发者和设计师参考。

1. 打字效果

Typing-effect-for-text.gif

网页设计变得越来越有创意。在 CSS 动画的协调下,你的网页会像活的一样。在这个例子中,我们将使用 animation@keyframes 属性去实现打字效果。

具体来说,在这个演示中,我们通过 steps() 属性来实现分割文本的效果。首先,你必须指定 step() 中传入的数量,在这个例子中就是文本的长度。

接着,第二步,我们使用 @keyframes 去声明什么时候开始执行动画。

如果你在文本 Typing effect for text 后面添加内容,而不改变 step() 中的数字,将不会产生这种效果。

这种效果并不是特别新鲜。然而,很多开发者却使用 JavaScript 库去实现,而不是使用 CSS

代码片段

2. 透明图片阴影效果

Shadow-for-transparent-images.png

你是否使用过 box-shadow 为透明的图片添加阴影,却让其看起来像添加了一个边框一样?然而解决方案是使用 drop-shadow

drop-shadow 的工作方式是,其遵循给给定图片的 Alpha 通道。因此阴影是基于图片的内部形状,而不是显示在图片外面。

代码片段

3. 自定义 Cursor

Set-a-custom-cursor-with-CSS.gif

你不需要强迫你站点访问者使用独特的光标。至少,不是出于用户体验的目的。不过,关于 cursor 属性要说明的是,它可以让你展示图片,这相当于以照片的格式显示提示信息。

一些用户案例,包括比较两个不同的照片,你无需在视图窗口渲染这些照片。比如:cursor 属性可以用在你的设计中,节省空间。因为你可以在特定的 div 元素中锁定特定的光标,所以在此 div 这外可以无效。

目前尝试对图片的大小有限制,读者可以自行更改验证

代码片段

4. 使用 attr() 展示 tooltip

CSS-tooltip-using-attr-property.gif

attr() 属性是我最近发现的,且是最得意的发现。我本打算为我的站点添加 tooltip 的功能,但是发现需要引入一个插件,这就引入了不必要的东西,让我的站点看起来臃肿。感谢的是,可以使用 attr() 来避免这种情况。

attr() 属性工作的方式很简单,我逐步解析一下:

  • 我们使用 tooltip class 去标志哪个元素需要展示 tooltip 信息。然后为该元素添加你喜欢的样式,这个方便演示,我们使用了 dotted border-bottom 的样式。
  • 接下来,我们创建一个 :before 伪元素,它将包含内容 content,指向特定的 attr()。这里指 attr(tooltip-data)
  • 接着,我们会创建一个 :hover 伪类,当用户鼠标移动道元素上时,它将设置 opacity1

此外,你可以包含自定义的样式。这取决于你设定的 tooltp 的数据,你也许需要调整其宽度或者边距。一旦你设定了 tooptip-data arrt() 类,你可以在你设计的其他部分应用。代码片段

5. 纯 CSS 实现核算清单

Item-Checklist-with-CSS.gif

正如我开头所说的,CSS 正逐步成熟。这个动态清单的演示就是一个很好的例子。

我们使用 checkbox 输入类型,加上一个 :checked 伪类。当 :checked 返回 true 的情况时,我们使用 transform 属性更改状态。

你可以使用这种方法实现各种目标。比如,当用户点点击指定的复选框时候,切花到隐藏其内容。在输入 input 类型的单选和复选框使用,当然,这也可以应用到

图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报