内容
- 01.使图像与站点配色方案匹配
- 02.在网格的最后一行平均分配空间
- 03.用盒子阴影创建粒子动画
- 04.用变换使多面体动画
- 05.熟练掌握“ calc（）”进行定位
- 06.通过“ box-sizing”使盒子模型保持理智
- 07. CSS垂直居中
- 08.定位一组相关对象
- 09.控制连字
- 10.利用写作模式
- 11.以不寻常的方式使用渐变
- 12.在链接上使用字符串匹配
- 13.让FOUT为您服务
- 14.探索SVG的背景
- 15.为用户提供3D过渡
- 16.使用CSS和数学创建循环菜单
- 17.悬停时动画链接
- 18.制作简单的关键帧动画
- 19.创建带有阴影的浮动3D效果
- 20.使用“：target”更新页面元素
- 21.提供带有精美动画的反馈
- 22.为“将要动画”做准备
- 23.人性化输入字段
- 24.暂停和播放CSS动画
- 25.不要使用CSS变量
在某种程度上，使用任何技术都可以完成几乎所有可以做的事情。当某种事物不再那么新颖和闪亮时，人们的兴趣就会减弱，而注意力将转移到下一件大事上。在Web行业中通常是这种情况，在将技术降级为平凡之前或之后，该技术很容易引起技术的某些方面的极大兴奋。
当CSS首次出现时，它是革命性的，随着时间的流逝，它已经演变为使设计人员能够创建灵活，精心设计且美观的网页布局。不过，最近以来，各个方面都暗示CSS太累了，也许它在阳光下的时光已经过去了。
我想展示的是，无论是在您可能尚未探索的尖端属性中，还是以您以前未曾考虑过的方式使用CSS，CSS的世界里仍然充满着兴奋和活力。
以下是一些业界顶级CSS专家的提示。
（注意：此功能中的某些技术是最先进的，可能并非所有浏览器都完全受支持。在进行任何工作之前，请进行彻底的测试并确保存在后备功能。）
01.使图像与站点配色方案匹配
克里斯托弗·施密特（Christopher Schmitt），会议组织者
会议有其自己的配色方案，并且由于有许多发言人，用于管理肖像的工作流程可能很复杂。手动应用滤镜无法缩放，并且取决于您是否有权访问特定的Photoshop操作。我现在使用高分辨率灰度PNG，并使用CSS过滤器添加色调。这样一来，我就可以将任何肖像与事件的方案进行匹配，还可以在多个主题之间重复使用图像。我只需要一个新的CSS规则。观看演示。
02.在网格的最后一行平均分配空间
设计师兼作家Stephen Hay
如果您要在网格中显示的项目数量未知，则可以使用Flexbox均匀地拆分最后一行。因此，如果只有一项，它将占据整行；如果有两个项目，则该行将被分成两半，依此类推。观看演示。
03.用盒子阴影创建粒子动画
Ana Tudor，编码和数学狂热者
通过混合 盒子阴影 借助一些数学和Sass，您可以绘制2D曲线图，模拟3D运动并创建疯狂的粒子动画，每个人都将误以为画布动画！观看演示，以及另一个。
04.用变换使多面体动画
Ana Tudor，编码和数学狂热者
您可能已经看到了用边框创建的纯CSS多边形，但是我们在 转换 财产。通过对嵌套元素进行链接和应用变换，我们可以创建具有图像背景或边框以及透明内部的复杂多边形。使用3D变换，我们可以将这些2D形状组合成多面体，并以容易被WebGL误认为的方式使实体合并，展开，爆炸或重新组合。观看演示。
05.熟练掌握“ calc（）”进行定位
Ana Tudor，编码和数学狂热者
我喜欢 calc（） 从我发现它的那一刻起。它对于驯服页边距，边距或尺寸很有用，当用于定位或调整背景，在内部渐变或变换中使用，并且不仅可以与相同的旧单元结合使用，还可以与新的和很酷的视口结合使用时，可以成为救生员。
06.通过“ box-sizing”使盒子模型保持理智
Oak Studios开发人员和设计师Sawyer Hollenshead
用 盒子大小 以节省您的理智。没有它，定义宽度为250px和填充为25px的元素将合并为300px的宽度，从而使像素和百分比的混合变得困难。和 装箱尺寸：边框 边框和填充将改为放置在定义的宽度内。
07. CSS垂直居中
Trent Walton，Paravel创始人
从历史上看，使用CSS将某些内容垂直居中很难，例如，如果您的图像带有相邻文本，则需要垂直对齐。无需踩踏和诅咒，而应使用Flexbox来解决对齐问题。观看演示。
08.定位一组相关对象
Zurb合作伙伴兼设计负责人Jonathan Smiley
通过在类名称上使用近似属性选择器来减少CSS线宽，以将大量相关对象作为目标，而不是将公共属性附加到每个类上。例如... [class * =“-block-grid-”] {} ...的目标是：.small-block-grid-3 .large-block-grid-5
09.控制连字
Savid Storey，开放网络倡导者
连字符在印刷品中是理所当然的，一些开发人员使用 连字号 在线属性，但很少有人知道可以提供更好控制的其他属性。如果不小心，会出现连字阶梯，其中跨多行使用连字符。一般的经验法则是连续不超过两个，您可以使用 连字极限线。还， 连字符限制字符 使您能够指定将被连字的单词的最小长度，以及连字符符前后的最小字符数。
10.利用写作模式
大卫·斯托里（David Storey），开放网络倡导者
书写模式使您可以定义文本流动的方向。某些东亚文字是垂直书写的，线条从右到左增长，用 写作模式：vertical-rl (tb-rl 在IE中）。竖排文字在欧洲书写系统中并未真正使用，但在水平方向空间有限的情况下可以很方便地用作表格标题。
11.以不寻常的方式使用渐变
露丝·约翰（Ruth John），设计师
与边框和项目符号一起使用时，背景渐变看起来可能很棒。我既在博客上使用，也与预处理器一起使用，可以使用重用的代码调用mixin，以免手动重复。不要过于疯狂，因为渐变可能会占用大量处理器。 SCSS mixin用于列表项目符号：
@mixin gradedBullet（$ colour）{背景图片：linear-gradient（left，lighten（$ colour，15％）10px，$ colour 11px，$ colour 20px，darken（$ colour，15％）21px，darken（$ colour ，15％）30px，透明31px）； }
12.在链接上使用字符串匹配
露丝·约翰（Ruth John），设计师
在我的博客上，我使用了带有字符串匹配功能的CSS属性选择器来设置社交图标的样式。这些出现在我的整个博客中，有时带有文本，有时没有，但始终带有图标。要使用正确的社交图标设置正确的链接样式，请在 href 锚元素的属性。我用 *= 所以 href 仅在锚元素上包含我指定的字符串。
/ *适用于所有社交链接 * / .social a：before {display：inline-block; padding-right：30像素； font-family：“ FontAwesome”；} / *每个特定链接 * / .social a [href * =“ twitter”]：在{content：“ f099”;之前； color：＃52ae9f;}。社交网站[href * =“ github”]：在{content：“ f09b”;之前color：＃5f2e44;} .social a [href * =“ feed”]：在{content：“ f09e”;之前；颜色：＃b47742;}
13.让FOUT为您服务
H + W设计负责人Jason Pamental
网络是建立在前提下的，前提是即使浏览器无法呈现光影，它也应交付内容。缓慢加载的Web字体可能会令人沮丧，FOUT（无样式文本的闪烁）会在导航和下载字体时造成导航和文本重排时震撼。 Google和Typekit提供了一个答案：网络字体加载器。通过根据字体的加载状态在页面中注入类，您可以使用这些类设置后备样式的样式，以使重排次数降至最低，从而消除WebKit的“不可见内容”症候群。观看演示。
14.探索SVG的背景
EmilBjörklund，使用中的Web开发人员
现在唯一不支持SVG的浏览器是IE8及以下版本和Android 2 WebKit，因此在CSS中使用SVG作为背景是可行的，尤其是与PNG后备解决方案（例如Grunticon）一起使用时。 SVG可以通过CSS设置样式，并且有有趣的SVG CSS属性（过滤器！）渗入，我们可以将其应用于HTML。
15.为用户提供3D过渡
EmilBjörklund，使用中的Web开发人员
使用3D转换并利用 Z维 在用户界面中确实很有用，特别是对于隐藏/显示或折叠/扩展内容。在这种情况下，退回2D过渡还是完全不过渡也很容易。在这个领域中，进行一些渐进式增强可以大有帮助。
16.使用CSS和数学创建循环菜单
前端开发人员Sara Soueidan
循环菜单在移动应用程序中很流行，您可以使用CSS转换和过渡来创建简单的循环菜单。可以修改和定制此菜单，以创建向上或向下打开的菜单。 CSS中没有直接对角线平移项目的方法，但是您可以使用要放置项目的圆的半径值，并应用简单的数学规则来计算水平和垂直平移值以传递到 translateX（） 和 translateY（） 职能。这样，您最终得到一个 对角线 平移以将菜单项移动到圆上的正确位置。可以使用JavaScript处理关闭/打开菜单的click事件，也可以使它更进一步，并通过使用CSS复选框将其设置为仅CSS菜单。在我的演示中，我使用了JavaScript和HTML5 classList API，并非所有浏览器都支持该API，因此您需要在现代浏览器中查看该演示才能使其正常运行，或者取消注释jQuery代码而不是使用classList API。代码。
查看演示和完整教程。 CSS Checkbox hack示例。
17.悬停时动画链接
保罗·劳埃德（Paul Lloyd），《卫报》互动设计师
不应依赖悬停状态来执行操作或提供重要信息，但仍可以增强基于鼠标的用户的界面。当您将鼠标悬停在上一个/下一个导航中的链接上时，我们会在24ways.org上显示文章标题。这是通过创建一个 ：：后 包含源自a值的生成内容的伪元素 数据- 属性，并应用CSS过渡使其在悬停时滑入视图。观看演示。
18.制作简单的关键帧动画
保罗·劳埃德（Paul Lloyd），《卫报》互动设计师
在24ways.org上，我们在摘要中添加了动画的角瓣，并在悬停时打开。这是通过结合 @keyframes 规则使用animation属性，更改背景图像的位置以实现基于sprite的动画。诀窍是使用 脚步（） 价值。观看演示。
19.创建带有阴影的浮动3D效果
凯瑟琳·法曼（Catherine Farman），《快乐齿轮》开发商
最近的一个项目需要一张浮动的产品照片，下面有一个圆形阴影，以产生从屏幕弹出的3D效果。影子使用了CSS3的一些功能： 边界半径 alpha透明度和 盒子阴影。它适用于产品网格，在主页英雄中展示图像或任何带有弯折形状的异想天开的设计。观看演示。
20.使用“：target”更新页面元素
HeRe高级Web开发人员Simon Madine
从一般意义上来说，CSS不是一种编程语言，但是您仍然可以做一些聪明的事情，而无需使用JavaScript。例如， ：目标 伪类应用于作为单击链接目标的元素。
您可以使用它来定义页面的状态，以包含许多元素的父对象为目标，并且您的链接就可以通过单击来控制所有子对象的外观和布局。观看演示。
21.提供带有精美动画的反馈
尼尔·雷纳克（Neil Renicker），设计师和开发人员
CSS伪元素 ：：前 和 ：：后 结合CSS过渡，可以启用令人愉悦的动画，从而为鼠标用户提供微妙的反馈。例如，在伪元素内构建CSS箭头，对伪元素应用过渡（过渡：所有缓入.15s；），然后将简单的布局更改添加到 ：徘徊 伪类（例如修改 上边距）。观看演示。
22.为“将要动画”做准备
保罗·刘易斯（Paul Lewis），编码员和Chrome开发者关系小组成员
如果您使用过 -webkit-transform：translationZ（0） 为了神奇地使您的页面更快，在许多浏览器中只是创建一个新的合成器层的hack被替换为 会动画。很快，您就可以告诉浏览器您打算对元素进行什么更改（元素的位置，大小，内容或滚动位置），浏览器将在后台进行正确的优化。更多信息。
23.人性化输入字段
Yaron Schoen，Made for Humans创始人
将快速动画添加到用户与之交互的元素可以使界面的计算机处理能力降低。在输入字段中，尝试将 过渡电话 内部，因此无论您何时聚焦或不聚焦，都会有一个平稳的过渡。
输入，textarea {-moz-transition：全部0.2s缓和； -o-transition：所有0.2s缓解； -webkit-transition：全部0.2s缓解； -ms-transition：所有0.2s缓解；过渡：全部0.2s缓解；
24.暂停和播放CSS动画
Val Head，设计师兼顾问
您可以通过更改CSS动画来“暂停”和“播放”动画 动画播放状态 财产。将其设置为“已暂停”可将动画停在原处，直到您进行更改为止 动画播放状态 至 跑步（例如，悬停时）。
.animating_thing {动画：自旋10s线性无限；动画播放状态：已暂停； }。 animating_thing：hover {animation-play-state：running; }
25.不要使用CSS变量
设计师兼作家Dave Shea
我们终于有了CSS变量，例如，一次编写一种颜色的十六进制值，然后通过样式表对其进行引用。但是官方规范很冗长，增加了语法复杂性，提供了强大的功能，并且大多数浏览器都不支持。在Sass广泛流行的时代，它超越了具有强大的编程逻辑（如自定义函数和if / else语句）的变量，而官方规范却远远不够。
希望这些最重要的技巧对您的CSS及其在Web开发和设计中代表的可能性有新的见解。在发布任何作品之前，请不要忘记彻底测试这些技术中的任何一种，以检查浏览器的支持情况。
字： 克雷格·格兰内尔 插图： 迈克·奇珀菲尔德
本文最初发表在《网络》杂志第253期。
