CSS 徽标：Instagram 徽标

2025-06-04

CSS 徽标：Instagram 徽标

我确信每个人都见过这个，Instagram 标志。

作为参考，现代版的如下：

Instagram 徽标

分析徽标

老实说，这个标志看起来比实际制作起来要容易得多。

你可能会想这有什么难的？
一切都在背景中，你会发现即使我的版本也不完美，但互联网上的每个示例图像都有不同的背景渐变。

仔细观察，你会发现它并不是单一的渐变，而是重叠的渐变。

让我们深入研究它，我将向您展示我是如何创建我的版本的。

CSS Instagram 徽标

我仅使用一个 div 并通过该元素完成所有操作，从而使其更具挑战性。



<div class="instagram"></div>
Enter fullscreen mode Exit fullscreen mode

让我们首先设置一些我们将要使用的变量。



:root {
  --size: 50vmin;
  --white: #fff;
  --blue: #3051f1;
  --purple: #c92bb7;
  --red: #f73344;
  --orange: #fa8e37;
  --yellow: #fcdf8f;
  --yellow_to: #fbd377;
}
Enter fullscreen mode Exit fullscreen mode

接下来我们开始创建盒子的基本轮廓。我会使用em单位，因为它们可以更好地缩放边框。



.instagram {
  font-size: var(--size);
  width: 1em;
  aspect-ratio: 1;
  border-radius: 0.2em;
  background: var(--purple);
}
Enter fullscreen mode Exit fullscreen mode

我暂时将背景设置为紫色，以便您可以看到我们目前所拥有的内容。

Instagram 徽标轮廓形状

现在让我们深入研究这些渐变。这有点棘手，因为有一个重叠的渐变。

幸运的是，CSS 渐变允许多个实例在一个背景中重叠。
例如，这是有效的代码：



background: linear-gradient(45deg, blue, transparent), radial-gradient(red, transparent);
Enter fullscreen mode Exit fullscreen mode

这将给我们这样的结果：

CSS 重叠渐变

现在让我们看看如何开始。我决定从蓝紫色背景渐变开始。



linear-gradient(145deg, var(--blue) 10%, var(--purple) 70%)
Enter fullscreen mode Exit fullscreen mode

这会产生以下输出。

CSS 线性渐变

现在最棘手的部分是让黄色、橙色和红色的渐变重叠。
为了实现这一点，我们必须确保渐变位于刚刚创建的线性渐变之上。



background: radial-gradient(
    circle farthest-corner at 28% 100%,
    var(--yellow) 0%,
    var(--yellow_to) 10%,
    var(--orange) 22%,
    var(--red) 35%,
    transparent 65%
  ), linear-gradient(145deg, var(--blue) 10%, var(--purple) 70%);
Enter fullscreen mode Exit fullscreen mode

有了这个，我们应该会得到以下结果。

CSS 中的堆叠渐变

对我来说，它看起来非常接近实际的标志。

注意：您可以通过使用多个堆叠在一起的径向渐变来增强此功能。

接下来我们需要的是相机轮廓图标，由于我们没有元素，所以我们必须再次使用:before和:after选择器。

让我们从大纲开始。



.instagram:before {
  content: '';
  color: var(--white);
  position: absolute;
  border-radius: inherit;
  aspect-ratio: 1;
  border: 0.05em solid;
  width: 65%;
}
Enter fullscreen mode Exit fullscreen mode

CSS 中的 Instagram 轮廓边框

然后对于内部，我们只需使用 after 选择器。



.instagram:after {
  content: '';
  color: var(--white);
  position: absolute;
  border-radius: inherit;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 0.05em solid;
  width: 35%;
}
Enter fullscreen mode Exit fullscreen mode

CSS 中添加 Instagram 圆形徽标

可以看到，前后效果非常相似。我们只是把前者变得更圆润、更小一些。

我听到你好奇，但是那个小点怎么办？我们没有剩余的选择器了。
没错，不过我们还有好朋友 box-shadow 可以帮我们实现这个功能。



.instagram:after {
  box-shadow: 0.22em -0.22em 0 -0.18em;
}
Enter fullscreen mode Exit fullscreen mode

有了这些，我们就应该可以在 CodePen 中看到结果。

感谢您的阅读，让我们联系起来！

感谢您阅读我的博客。欢迎订阅我的电子邮件简报，并在Facebook或Twitter上与我联系。

文章来源：https://dev.to/dailydevtips1/css-logos-instagram-logo-1i96
Devto 翻译
PREV
当媒体查询发生变化时在 JavaScript 中收到通知
NEXT
使用 box-reflect 实现 CSS 图像反射