#头条新闻音乐创作邀请赛#

责任编辑并行生前提前布局网络平台的创作者译者：

CSS 约有五十个特性。许多特性都是互相关连的，理确切每两个属性技术细节是不可能将的。因此，责任编辑撷取许多管用的 CSS 小基本功，方便快捷开发人员和雕塑家参照。

1. 写字效用

页面结构设计显得愈来愈有创意结构设计。在 CSS 动画电影的协同下，你的页面会像活的那样。在那个范例中，他们将采用 animation 和 @keyframes 特性去同时实现写字效用。

简而言之，在那个模拟中，他们透过 steps() 特性来同时实现拆分文档的效用。具体来说，你要选定 step() 中传至的数目，在那个范例中就是文档的宽度。

接著，第三步，他们采用 @keyframes 去新闻稿甚么这时候已经开始继续执行动画电影。

假如你在文档 Typing effect for text 前面加进文本，而不发生改变 step() 中的位数，将不会造成此种效用。

此种效用并并非不光美味。不过，许多开发人员却采用 JavaScript 库去同时实现，而并非采用 CSS。

2. 透明化相片阴霾效用

你是否采用过 box-shadow 为透明化的相片加进阴霾，却让其看起来像加进了两个边框那样？不过解决方案是采用 drop-shadow。

drop-shadow 的工作方式是，其遵循给给定相片的 Alpha 通道。因此阴霾是基于相片的内部形状，而并非显示在相片外面。

3. 自定义 Cursor

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

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

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

4. 采用 attr() 展示 tooltip

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

attr() 特性工作的方式很简单，我逐步解析一下：

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

5. 纯 CSS 同时实现核算清单

正如我开头所说的，CSS 正逐步成熟。那个动态清单的模拟是两个很好的范例。

他们采用 checkbox 输入类型，加上两个 :checked 伪类。当 :checked 返回 true 的情况时，他们采用 transform 特性更改状态。

你可以采用此种方法同时实现各种目标。比如，当用户点点击选定的复选框这时候，切换到隐藏文本。在输入 input 类型的单选和复选框采用，当然，这也可以应用到 <option> 和 <select> 元素。

6. 采用 :is() 和 :where() 加进元素样式

现代 CSS 框架运行的一种方式是透过采用条件逻辑选择器。换言之，:is() 和 :where() 特性可以用于同时设置多种结构设计元素的样式。但是，更重要的是，你可以采用这些特性去查询你需单独处理的元素。

下面的 CSS 片段是两个小案例，你可以透过 MDN 学习更多关于 :is() 和 :where() 的文本。

7. 采用关键帧同时实现手风琴下拉效用

JavaScript 库，比如 jQuery, Cash 等，即使你想采用两个简单的缩放功能，你都要整个引入。幸运的是，许多 CSS 技巧能够避免此种引入。比如下面的手风琴片段代码。

假如你认真看下当下 web 结构设计的趋势，你会发现在登陆页面就会发现手风琴此种结构设计效用。这是一种简缩文本的方式，以节省结构设计空间。常见问题解答，产品功能，采用提示等功能，都可以放在手风琴内同时实现。下面是纯 CSS 代码片段对其的实践。

8. 侧边栏的 Hover 效用

有没有可以采用 CSS 就可以同时实现两个动态 Hover 效用的侧边栏呢？当然，这得多亏 transform 和 :hover 特性。

为了兼容性，我在多种移动端中进行测试，感觉还极好。虽然此种效用在桌面中采用比在移动端中采用顺畅。

在那个练习案例中，采用 position: sticky; 创建一个吸附的侧边栏，其工作的效用良好。

9. 采用 first-letter 同时实现首字母大写

在 CSS 中，可以选择确定的 first-of-type 元素。在那个范例中，他们采用 ::first-letter 伪类去同时实现首字母大写的效用。那个类可以让他们更自由的加进样式。因此，你可以调整大写字母的样式以符合你的站点结构设计风格。

说到那个特性，你可以采用它干许多事。当特定元素在页面中第一次出现，他们可以采用 first-of-type 单独进行加进样式。但是，正如下面代码展示，尽管元素已经出现过，你依然可以采用在多个元素上。

10. 采用 ::before 加进按钮的图标

每当我需要链接到外部其他资源的这时候，我都会采用自定义的按钮来同时实现。准确来说，是两个加进图标的按钮。简单的谷歌搜索，你会发现许多 button generators ，但是我对可以随时采用的通用解决方案更感兴趣。

因此，为了同时实现那个目标，我为特定按钮创建了两个 :before 伪元素。需要新闻稿的是，代码片段中的 content:”\0000a0″; 是 的 Unicode 转义。

你可以透过宽高特性来调整图标的尺寸，以更好适应按钮样式。

最重要的一点，这些 CSS 基本功凸显了不采用 JavaScript 来同时实现功能的潜力。你可以采用上面这些小基本功，应用在你的结构设计上。事实上，许多这样的范例可以混合采用，以音乐创作自由风格的结构设计。

当然，这还需要更大的进步空间。我不建议单纯的这些小基本功就低估了框架和库的采用。。

但是，不需要写冗长的 JavaScript 函数，透过 CSS 来同时实现结构设计的效用正走在路上。

原文：10 Useful CSS Tricks for Front-end Developers

【完】✅

责任编辑将并行到个人公众号：前端回眸