Get best of the week

有趣的CSS在新的Facebook设计中发现

我好奇。对于我来说，打开浏览器开发人员的工具并了解如何构建我看过的网站总是很有趣的。这是我关于此类研究的第一个故事。事实是，我找到了一些我想谈论的有趣的CSS用法示例（至少对我来说它们似乎很有趣）。 我们正在谈论新Facebook设计中的CSS发现。这种设计是相对较新出现的。几个星期前我见过他。最初，所有接口元素对我来说似乎都异常大，但几天后我就习惯了。在这里，我将讨论在Facebook设计中发现的所有有趣的事情。





在头像中使用SVG图形



化身

SVG图形用于化身图像，例如个人资料照片，用户页面或组上的照片。

这是HTML代码：

<svg role="none" style="height: 36px; width: 36px;">
  <mask id="avatar">
    <circle cx="18" cy="18" fill="white" r="18"></circle>
  </mask>
  <g mask="url(#avatar)">
    <image x="0" y="0" height="100%" preserveAspectRatio="xMidYMid slice" width="100%" xlink:href="avatar.jpg" style="height: 36px; width: 36px;"></image>
    <circle cx="18" cy="18" r="18"></circle>
  </g>
</svg>

当我看到这个时，我想知道为什么要使用这种方法。我对这个问题有几个答案：

  • 化身必须具有半透明黑色（10％）的内部框架。这是为了使化身看起来像圆形图像。而且，即使这些是完全白色的图像。
  • 您<img>不能box-shadow使用关键字将内部阴影（）添加到HTML元素inset。SVG用于解决此问题。
  • 为了使图像具有圆形形状，SVG元素<mask>和使用<image>。

就像我说的那样，化身内部的框架对于明亮的图像非常有用。这是说明此想法的布局。


头像

使用以下CSS配置内部框架：

circle,
rect {
  stroke-width: 2;
  stroke: rgba(0, 0, 0, 0.1);
  fill: none;
}

如果图像是方形的，则使用数字rect：

<svg role="none" style="height: 36px; width: 36px;">
  <mask id="avatar">
    <rect cy="18" fill="white" height="36" rx="8" ry="8" width="36" x="0" y="0"></rect>
  </mask>
  <g mask="url(#avatar)">
    <image x="0" y="0" height="100%" preserveAspectRatio="xMidYMid slice" width="100%" xlink:href="avatar.jpg" style="height: 36px; width: 36px;"></image>
    <rect cy="18" fill="white" height="36" rx="8" ry="8" width="36" x="0" y="0"></rect>
  </g>
</svg>

有趣的是，在提要的主页上，使用标签<img>和<div>用于配置内部半透明框架的元素创建了化身：

<div class="avatar-wrapper>
    <img class="avatar" width="40" height="40" src="avatar.jpg" width="40" alt="">
    <div class="avatar-outline"></div>
</div>

以下是此HTML的样式：

.avatar-wrapper {
    position: relative;
}

.avatar {
    display: block;
    border-radius: 50%;
}

.avatar-outline {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
    border-radius: 50%;
}

由于化身SVG只用在一些地方，我可以假设，对于使用的原因<img>和<div>与页面大小有关。如果在磁带的化身中使用了SVG图形，则在滚动磁带时会导致加载的数据量增加。

用作<div>元素的分隔符，而不是外部页边距


当GIF图像用作网页元素的分隔符时，我没有找到这些时间。但是后来我看到了类似这种技术的东西。我认为是这样，我所说的可以称为div分隔符。


<div>用作分隔符的元素

让我稍微澄清一下上图。这是包含出现在主页上的朋友请求的部分的片段。在我们面前的是一个包含有关人员信息的特定网格。该网格应具有左外部凹口。我通常添加的元素，如边界：margin-left: 16px。但是，Facebook使用将<div>网格与容器元素边缘分开的元素做了同样的事情。

设计师为什么要这么做？我有一些猜测：

  • 也许容器元素的缩进不能添加到它们创建的设计系统中？
  • 也许这是一个React组件，可以通过设置其宽度在任何地方使用？

为什么在这里不使用缩进？对于我来说，一个充满辅助类的CSS站点（大约10万行）能够容纳另一个类，该类允许您调整所需元素的缩进。

使用CSS过滤器



使用<img>和<svg>元素创建的图标

看看这四个图标。使用元素创建带有加号的图标和箭头图标<img>。以及Messenger图标和通知-使用SVG元素。我不清楚这种技术混合的原因。

如果单击最后一个图标，则箭头将重新涂成蓝色。我问自己：“由于箭头是普通图像，因此颜色在这里如何变化？”也许当您将鼠标悬停在图标上时，一个图像会变成另一个图像吗？不，不是那样的。我发现CSS过滤器用于更改图标上图标的颜色：

.icon {
    filter: invert(39%) sepia(57%) saturate(200%) saturate(200%) saturate(200%) saturate(200%) saturate(200%) saturate(147.75%) hue-rotate(202deg) brightness(97%) contrast(96%)
}

顺便说一下，这就是facebook.com的生产代码。这段代码对我来说似乎很奇怪。<img>用SVG图像替换此元素并仅更改属性指定的颜色是否困难fill？

为已验证帐户创建图标时使用相同的内容。


已验证的帐户图标

类似的情况适用于用户个人资料中的链接：

.icon {
    filter: invert(59%) sepia(11%) saturate(200%) saturate(135%) hue-rotate(176deg) brightness(96%) contrast(94%);
}

看起来就是这样


用户配置文件中的链接

如果您有兴趣学习如何使用CSS过滤器以任何颜色将图像着色为黑色，请查看Stack Overflow上的此答案。在那里，您可以找到用于创建CSS过滤器的工具。另外，请查看此推文。

使用图像创建阴影



使用背景图像创建的阴影

主窗口标题具有阴影。可以假定它是使用CSS属性创建的box-shadow。但实际上并非如此。在这里，我们使用了<div>具有沿轴重复的背景图像的元素x。

我上传了这里使用的图像，这使我可以仔细看一看。


用于创建阴影的图像

这是一个2x14像素的图像，用于创建阴影效果，需要重复多次。阴影效果的形成不仅涉及图像，还涉及特殊元素<div>。为什么以这种方式创建阴影？

一位Facebook员工表示，此处的图片出于性能原因而使用。有趣的是，这么小的阴影可能导致站点速度出现问题。

当被问及如何识别此问题时，他说阴影会导致性能严重下降和令人不快的视觉效果。因此，滚动浏览有许多视频的页面时，页面的某些部分会出现或消失。

好吧，如果阴影导致了此类问题-用相应的图像替换它，我认为没有问题。

CSS变量的广泛使用


我喜欢Facebook设计师使用CSS变量的事实。根据我的:root观察，该元素添加了320多个变量。这些变量用于网站的浅色和深色主题。

启用深色主题时，会将一个类添加到HTML元素__fb-dark-mode。然后它将覆盖元素中声明的所有变量:root：

:root {
    /*    */
    -fds-active-icon:  #3578E5;
    --fds-attachment-footer-background:  #F2F3F5;
    --fds-blue-05:  #ECF3FF;
    --fds-blue-30:  #AAC9FF;
    --fds-blue-40:  #77A7FF;
}

.__fb-dark-mode:root, .__fb-dark-mode {
    /*     */
    --fds-active-icon:  black;
    --fds-attachment-footer-background:  black;
    --fds-blue-05:  black;
    --fds-blue-30:  black;
    --fds-blue-40:  black;
}

这是一段视频，演示了切换到黑暗主题后会发生什么。我建议您以全屏模式观看。

使用line-clamp CSS属性修剪多行文字



签名使用多行文本修饰。

侧边栏有一个链接列表，例如指向用户个人资料，最新资料和“内存”部分的链接。我注意到这里使用了修剪多行文本：

.element {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

这些是内置样式，此外，它们会因浏览器而异。


Chrome和Firefox中的文本整理代码

此CSS功能具有很好的浏览器支持。CanIUse报告所有领先的浏览器都支持此属性（尽管带有前缀）。可以在此处找到有关此属性的详细信息。

使用div创建可响应鼠标悬停的元素


通常，将鼠标移到元素上的效果是使用CSS创建的。例如，如果某个按钮悬停在某个按钮上时需要涂上特殊的灰色阴影，则只需执行以下操作：

.element:hover {
    background: #ccc;
}

但是，似乎在大型网站（如Facebook）上，这种方法是不切实际的。在浏览站点的过程中，我提请注意仅当您将鼠标悬停在该元素上时才显示的元素（我们将其称为“悬停元素”）。这是它的主要任务。这是他的风格：

.hover-div {
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    pointer-events: none;
    border-radius: 6px;
    inset: 4px 0px;
    background-color: var(--hover-overlay);
    transition-property: opacity;
    transition-timing-function: var(--fds-animation-fade-out);
    cursor: pointer;
}

opacityJavaScript将该元素 的属性值从更改0为1。我对其进行了试验，发现它用于许多组件。以下是一组屏幕快照，展示了此元素的用法。


使用悬停元素，

我喜欢对多个元素使用相同的效果所提供的均匀性和简洁性。如果这意味着某些事情，则意味着该站点上使用的设计语言是统一的，并且该系统是经过精心设计的。干得好，Facebook！

使用inset属性


我们正在谈论属性值的缩写记录，这暗示着对元素的上部，右侧，下部和左侧部分的影响。您可以inset如下使用属性：

.element {
    inset: 4px 0;
    /*   : top: 4px, bottom: 4px, left: 0, right: 0 */
}

inset为与其他元素关联的上述悬停元素配置了 该属性。样式嵌入在HTML中。我注意到它在以下所示组件中的应用。


受inset属性影响的区域以蓝色突出显示，

撰写本文时，该属性仅inset 支持 Firefox 66+。

Dir =“ auto”属性和CSS布尔属性 


在诸如Facebook之类的多语言网站上，有时很难准确预测其内容。例如，组件中的用户名具有attribute dir=«auto»。这意味着文本的方向将取决于语言。例如，使用英语时，文本将从左至右显示，而使用阿拉伯语时，则从右至左显示。

此外，应注意，存在一种内置样式会更改文本的方向（感觉属性dir=«auto»不够）。看起来是这样的：

<div dir="auto" style="text-align: start;">محتوى بالعربية</div>

注意，样式已添加到element中text-align: start。这使用逻辑CSS属性。对于LTR布局，样式将如下所示text-align: right。

如果你有兴趣在RTL-程式化的特点-看看这个我的材料。

动态背景取决于主照片



背景取决于主照片

您是否注意到使用渐变和类似于主照片的颜色来设计背景？此背景是动态形成的，它基于照片的颜色。怎么做的？

▍1。成为主色调


首先，您需要获取主照片的主色（比其他人更常用）。找到此颜色后，将创建主照片的缩小版本，并仅使用该颜色进行涂漆。


寻找主导色彩

▍2。添加主色背景



使用

发现的主导色的背景使用发现的主导色的背景。为了清楚起见，我用白框突出显示了页面上作为主照片显示的图像。

▍3。在背景上添加渐变


要在背景上添加渐变，请使用以下CSS代码：

.element {
    background-image: linear-gradient(to top, #FFFFFF, rgb(255, 255, 255), rgba(255,255,255,0.7), rgba(255,255,255,0.4), rgba(255,255,255,0));
}


添加渐变（设计中使用浅色）

如果设计中使用深色，则使用反向渐变：

.element {
    background-image: linear-gradient(to top, #000, rgb(0, 0, 0), rgba(0,0,0,0.7), rgba(0,0,0,0.4), rgba(0,0,0,0));
}


添加渐变（设计中使用深色）

您可以使用此工具查找图像的主要颜色。

多个阴影



阴影

我喜欢Facebook开发人员用来为各种元素（例如下拉菜单）创建阴影的方法。这样的阴影会产生体积的错觉，这比常规阴影可以实现的错觉要现实得多。


下拉菜单

这是CSS：

.element {
    box-shadow: 0 12px 28px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}

在这里，您可能有一个疑问，为什么在这里会创建透明度为50％的白色嵌入式阴影？事实是，这是黑暗政权的阴影。下面是使用这种阴影的界面的放大片段。


接口的放大片段带有插入阴影，

我喜欢这种合理的解决方案。

Flexbox网格的空项目


我注意到该站点上的所有网格布局均基于flexbox。这是我在用户的照片部分中找到的这种布局的一个示例。


网格布局中的空元素

这是CSS：

.wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-items: space-between;
}

.item {
    width: 205px;
}

一切看起来都很有趣，对吧？使用值space-between来调整元素的放置是有风险的。例如，如果只有三张照片，则布局将看起来不正确。这种布局的示例如下所示。


在两者之间使用空格的危险

Facebook团队如何处理此问题？非常简单：有四个空元素<div>，其宽度等于照片的宽度。这是此解决方案的HTML：

<div class="wrapper">
    <div class="item"><a href="#"><img src="photo.jpg"></a></div>
    <div class="item"><a href="#"><img src="photo.jpg"></a></div>
    <div class="item"><a href="#"><img src="photo.jpg"></a></div>
    <div class="item"><a href="#"><img src="photo.jpg"></a></div>
    <div class="empty"></div>
    <div class="empty"></div>
    <div class="empty"></div>
    <div class="empty"></div>
</div>

通过这种方法，这种空元素<div>将扮演人造元素的角色。它们有助于在元素之间保持相同的距离。

使用垂直媒体查询


可以这么说，我很少看到垂直媒体查询。我喜欢Facebook开发人员使用此查询来减少首页上的新闻提要宽度的事实：

@media (min-height: 700px) {
    .element {
        width: 584px;
    }
}

摘要


就这样。我对撰写本文非常感兴趣。探索Facebook网站的设计，我学到了很多东西。希望您在我的故事中也发现了一些您觉得新鲜有趣的东西。

亲爱的读者们！通过分析您访问的网站的代码，您是否找到了有趣的东西？

More articles:


All Articles