复制部分 Google Hangouts Chat 设计

我一直在使用 Google Hangouts。 真的很棒。 一对一或群组文本聊天、音频或视频。 文本存档，维护历史记录，并且可搜索。 视频/音频可录制。 它在台式机和移动设备上运行良好，并保持同步。 它是免费的。 很难超越它。

无论如何，我一时兴起决定复制桌面聊天窗口的部分外观。 事实证明，出现了很多有趣的东西！ 径向渐变、伪元素和动画、Flexbox 等等。

上面的图片是我们即将构建的内容。

整体结构

我们在这里看到的一切都是相关的。 我想这需要一个 <section>。 可能还会像它这样的其他部分，因此需要一个类名。

<section class="module">
  <!-- everything -->
</section>

顶部更像是“标题”而不是“标题”，因为它不仅仅是文本，它还有其他东西在上面。 谈话按非常具体的顺序进行，所以我认为 <ol>，每个文本/图像组都是一个 <li>。 在列表项中，诸如图像和段落之类的内容。

我发现像这样的图表很有用。 虽然不全面，但它显示了思维过程。

<section class="module">

  <header class="top-bar">
    <h1>Hangouts</h1>
    <!-- likely some spans and stuff -->
  </header>

  <ol class="conversation">
    <li>
      <img class="avatar" />
      <div class="message">
        <p>Talkie talk talk.</p>
      </div>
    <li>
  </ol>

</section>

标题中有一些图标。 在演示中，我使用了一些来自 We Love Icon Fonts 的快速且肮脏的东西。 在生产中，我将使用一个来自 IcoMoon 并使用 此 HTML 插入的简化图标字体。

脉冲标题

当您收到新消息时，标题会有点发光/脉冲。 现在，实色条实际上在其中心有一个径向渐变，该渐变变得越来越强或越来越弱。 在峰值强度下，它就像

您可以像这样想象它

创建渐变并不像您希望的那样容易¹。 您可能会认为它是最基本的语法，从一种灰色到另一种灰色

background: radial-gradient(#666, #999);

但事实并非如此，它只是用椭圆渐变填充区域（为清晰起见，为白色和黑色）

您可以将其强制为圆形，这使我们非常接近

background: radial-gradient(circle, #666, #999);

但是，如果您真的希望对中间渐变的大小进行精细控制，您将需要类似的东西

background: radial-gradient(center center, circle closest-side, #999999, #666666 800%);

在这里，您可以调整该 800% 以获得您想要的效果。 在撰写本文时，该语法仍然带有前缀。 具有所有前缀，它就像

background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 800, color-stop(0%, #999999), color-stop(800%, #666666));
background: -webkit-radial-gradient(center center, circle closest-side, #999999, #666666 800%);
background: -moz-radial-gradient(center center, circle closest-side, #999999, #666666 800%);
background: -o-radial-gradient(center center, circle closest-side, #999999, #666666 800%);
background: radial-gradient(center center, circle closest-side, #999999, #666666 800%);

即使这样，它也不适用于 Opera 12.15。 因此……我们可以使用最简单的渐变语法并将其应用于标题上的伪元素。 这样，我们可以通过动画调整不透明度来获得脉冲效果。

.top-bar {
  background: #666;
  position: relative;
  overflow: hidden; 
}
.top-bar::before {
  content: "";
  position: absolute;
  top: -100%;
  left: 0;
  right: 0;
  bottom: -100%;
  opacity: 0.25;
  background: radial-gradient(white, black);
}

绝对定位将使它位于具有默认静态定位的标题中的任何内容之上。 但我们可以解决这个问题。

.top-bar > * {
  position: relative;
}

然后对其进行动画处理

.top-bar::before {
  animation: pulse 1s ease alternate infinite;
}
@keyframes pulse {
  from { opacity: 0; }
  to { opacity: 0.5; }
}

这在所有内容中都无法正常工作，但它比以前好得多。 如果您认为效果足够重要，您将使用额外的元素/图像/jQuery 来完成它。

基本聊天框设置

我们已经决定谈话本身是有序列表。 每个说话的人都是一个列表项。 每条单独的消息都是一个 <p>，但可以将多条消息放在一起，因此它们都分组在一个 <div class="message"> 中。 我们也将包装头像。

<li>
  <div class="avatar">
    <img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/5/profile/profile-80_9.jpg" />
  </div>
  <div class="messages">
    <p>yeah, they do early flights cause they connect with big airports.  they wanna get u to your connection</p>
    <time datetime="2009-11-13T20:00">Timothy • 51 min</time>
  </div>
</li>

请注意那里的 <time> 元素。 时间元素的实际内容可以是任何有意义的东西。 但 datetime 属性采用特定格式。 查看更多。

我们还需要一种方法来区分我们的消息和其他人的消息。 一个类就行了……

<li class="self">
  <!-- ... -->
</li>
<li class="other">
  <!-- ... -->
</li>

可变宽度的聊天气泡

这种聊天设计的有趣设计特征是聊天“气泡”仅与其中包含的最长句子一样宽。 这是一个很好的功能，因为它使非常短的消息在视觉上不那么强烈，并为谈话增添节奏。

如果（头像 + 消息 = 全宽）每次都一样，浮动就可以了。 我们有一种方法可以使浮动起作用，但这需要额外的非语义包装器。 相反，让我们创建一个超前的演示并使用 Flexbox 进行布局²。 这将使其他一些事情变得非常容易，我们将在稍后介绍。

Flex 项本质上仅与它们需要的一样宽。 它们也不自然地渴望填满它们的 Flex 容器。 如果它们确实如此，那就这样，如果它们不这样做，那就不要这样做。 您甚至可以根据需要让它们换行，但在本例中我们不会这样做。

因此，我们的 CSS 变成

.discussion li {
  display: flex;
}
.avatar {
  width: 40px;
}
.avatar img {
  width: 100%;
  display: block;
}

非常容易。

切换

我敢肯定您已经注意到了翻转设计。 来自其他人的消息的头像在左侧，您自己的消息的头像在右侧。 同样，可以使用浮动来实现，但有点笨拙。 Flexbox 使这变得极其容易。

在我们的标记中，我们将头像放在首位，因此这将是默认值（“其他人”）。 在具有类名“self”（我们自己的消息）的列表项中，我们将更改布局顺序。

.self {
  justify-content: flex-end;
}

好吧，这太容易了。 但是等等。 不仅仅是水平对齐方式切换，垂直对齐方式也切换。

浮动永远无法帮助我们。 事情会变得很奇怪，有一些占位符元素和绝对定位，以及谁知道是什么。 使用 Flexbox……

.self {
  /* switch horizontal layout */
  justify-content: flex-end;
  /* switch vertical layout */
  align-items: flex-end;
}

擦擦手。

聊天气泡三角形

这已经被讨论过很多次了，所以我简短地说一下。 您可以使用 CSS 创建三角形，方法是使用零宽度零高度元素和边框。 元素上的边框将在一个角度相遇。 因此，如果一个元素有颜色而另一个元素是透明的，它看起来像一个形状。

在这里，我们将为顶部和右侧边框着色，并将底部和左侧边框保持透明。 这将创建您在这里看到的三角形类型

.other .avatar::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border: 5px solid white;
  border-left-color: transparent;
  border-bottom-color: transparent;
}

然后只需更改其位置以及为“self”消息着色的边框

.self .avatar::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 0;
  border: 5px solid white;
  border-right-color: transparent;
  border-top-color: transparent;
}

聊天气泡在下面有一点方框阴影。 我们没有介绍它，但您可以在演示中看到。 在“self”消息中，三角形在阴影最明显的点与气泡相遇，因此如果没有它，看起来很奇怪。 我们可以将阴影应用于它来修复它。

.self .avatar::after {
  box-shadow: 1px 1px 2px rgba(black, 0.2);
}

演示

Check out this Pen!

---

¹ 以下是关于径向渐变的更多资源：Impressive Webs、Web Directions

² 我在本文中完全去除了 Flexbox 的所有前缀，并使用了最新方法。 以下是关于它的资源：CSS-Tricks、Dev.Opera。 现在是 Flexbox 的好时机。 IE 10 有一个带前缀的半旧版本，但 IE 11 将没有前缀且是新的。 Firefox 一直支持各种版本，但在 22（2013 年 6 月下旬）将没有前缀且是新的。 Safari 在 6 中有一个带有前缀的旧版本，但在 7 中将没有前缀且是新的。 Chrome 有一个带有前缀的新版本，但 正在去除前缀（30？）。 iOS 和 Blackberry 正在添加前缀，但至少是新的语法。 Android 至少有一个旧的带前缀的版本。