C

CSS技巧打造黑暗未来主义的Web3外观

2025-05-28

CSS技巧打造黑暗未来主义的Web3外观

这种暗黑模式的 Web3 美学设计看起来非常酷炫，充满未来感。它们都有一些共同的设计来实现这种外观。从The Graph、ARCx Money、Rabbithole、Sushi Swap、Buildspace等设计中汲取灵感，以下是一些可以添加到应用中的简单样式：

  1. 渐变背景
  2. 发光效果
  3. 深色背景上亮白色的文字
  4. 半透明背景
  5. 悬停时快速简便的转换

让我们看看如何将这些样式应用到文本、按钮和背景。

在每个示例中，我们都使用了深色背景和白色文本。让我们先从一些文本样式开始。

创建 web3 外观的文本样式

Web3 文本样式

参考这个codepen。

1. 发光效果

具有发光效果的示例文本



<h1 class="text-glow">text glow effect</h1>
Enter fullscreen mode Exit fullscreen mode 


.text-glow {
  text-shadow: 0 0 80px rgb(192 219 255 / 75%), 0 0 32px rgb(65 120 255 / 24%);
}
Enter fullscreen mode Exit fullscreen mode

你可以将此效果用于标题，或用于强调标题中的某个单词，或用作链接的悬停效果。图表经常使用此效果，我在这里推荐它！

来自 The Graph 的发光文字效果示例

2.渐变背景效果

具有渐变背景效果的文本示例



<h1><span class="text-gradient">text gradient effect</span></h1>
Enter fullscreen mode Exit fullscreen mode 


.text-gradient {
  background: linear-gradient(to right, #30CFD0, #c43ad6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
Enter fullscreen mode Exit fullscreen mode

Buildspace使用这种样式来强调标题中的单词。Rare Blocks也用它来强调段落中的单词。增加的粗体字重使其更加突出。

Rare Blocks 的渐变文字效果示例

3. 结合渐变和发光效果。使用渐变来强调短语中的某些单词。

按钮上的渐变+发光效果



<h1 class="text-glow">
  <span class="text-gradient">text gradient</span> 
  with glow effect
</h1>
Enter fullscreen mode Exit fullscreen mode

现在我们有了一些文本效果，让我们继续讨论按钮。

用于创建 web3 外观的按钮样式

用于创建 web3 外观的按钮样式

所有这些效果都可以在这个codepen中找到。

首先，我们来定义一下要用的颜色。我选紫色。这些rgb颜色我们稍后会用到，并设置不同的不透明度。



:root {
  /* violet */
  --primary-color: 111, 76, 255;

  /* white */
  --text-color: 256, 256, 256;
}
Enter fullscreen mode Exit fullscreen mode

我们先定义一下按钮的基本样式。稍后我们会添加修饰符类来创建不同的样式。
按钮的基本样式



<button class="btn">Button</button>
Enter fullscreen mode Exit fullscreen mode 


.btn {
  font-family: sans-serif;
  font-size: 18px;
  padding: 12px 32px;
  margin: 1rem;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.3s ease;
  border-radius: 50px;
}
Enter fullscreen mode Exit fullscreen mode

1. 悬停时发光

具有悬停发光效果的按钮示例



<button class="btn btn-glow">Glow on Hover</button>
Enter fullscreen mode Exit fullscreen mode 


.btn-glow:hover {
  box-shadow: rgba(var(--primary-color), 0.5) 0px 0px 20px 0px;
}
Enter fullscreen mode Exit fullscreen mode

一定要添加过渡效果。一个简单的 0.3 秒过渡就能带来巨大的改变。



.btn {
  transition: all 0.3s ease;
}

.btn:hover {
  transition: all 0.3s ease;
}
Enter fullscreen mode Exit fullscreen mode

2. 明亮的背景搭配白色的文字。

我们也对此使用发光效果。
按钮上有明亮的背景和白色文字



.btn-primary {
  background-color: rgb(var(--primary-color));
  border: 1px solid rgb(var(--primary-color));
  color: rgb(var(--text-color));
}
Enter fullscreen mode Exit fullscreen mode 


<button class="btn btn-glow btn-primary">Primary Button</button>
Enter fullscreen mode Exit fullscreen mode

3.半透明背景

按钮上的半透明背景效果



.btn-semi-transparent {
  background-color: rgba(var(--primary-color), 0.15);
  border: 1px solid rgba(var(--primary-color), 0.25);
  color: rgba(var(--text-color), 0.8);
}
Enter fullscreen mode Exit fullscreen mode

让我们把鼠标悬停时的颜色稍微亮一点。同样，这只是一个小小的改变，但实际上却能带来很大的体验提升。



.btn-semi-transparent:hover {
  background-color: rgba(var(--primary-color), 0.35);
  border: 1px solid rgba(var(--primary-color), 0.5);
  color: rgba(var(--text-color), 0.9);
}
Enter fullscreen mode Exit fullscreen mode

我们继续使用发光效果。

发光效果+按钮半透明



<button class="btn btn-semi-transparent btn-glow">Semi Transparent Button</button>
Enter fullscreen mode Exit fullscreen mode

在The Graph 的登陆页面上查看实际操作。

The Graph 上的半透明按钮

4.渐变背景

带有渐变背景的按钮



.btn-gradient {
  background-image: linear-gradient(to right, rgb(1 134 218), rgb(182 49 167));
  border: 0;
  color: rgba(var(--text-color));
}
Enter fullscreen mode Exit fullscreen mode 


<button class="btn btn-gradient btn-glow">Gradient Button</button>
Enter fullscreen mode Exit fullscreen mode

这可能是我在Sushi Swap和Buildspace等 web3 网站上看到的最常见的按钮样式。

Buildspace 的渐变按钮示例

5.渐变边框

带渐变边框的按钮



.btn-gradient-border {
  color: rgb(var(--text-color));
  border: 2px double transparent;
  background-image: linear-gradient(rgb(13, 14, 33), rgb(13, 14, 33)), radial-gradient(circle at left top, rgb(1, 110, 218), rgb(217, 0, 192));
  background-origin: border-box;
  background-clip: padding-box, border-box;
}
Enter fullscreen mode Exit fullscreen mode 


<button class="btn btn-gradient-border btn-glow">
  Gradient Border Button
</button>
Enter fullscreen mode Exit fullscreen mode

这是受到ARCx Money和Sushi Swap的启发。

模糊背景以创建 web3 外观

这是供参考的代码。

为此，我们将使用 Unsplash 上的这张星系图片。交换一下来做实验。
Unsplash 的星系图像示例

首先，让我们创建一张卡片。



<div class="card">
  <h1>Some text here</h1>
</div>
Enter fullscreen mode Exit fullscreen mode

这些样式都不是必需的，除了position: relative。



.card {
  margin: 1rem;
  padding: 1rem;
  height: 300px;
  width: 300px;
  text-align: center;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-radius: 10px;
}
Enter fullscreen mode Exit fullscreen mode

让我们添加图像作为背景。



.bg-blur {
  overflow: hidden;
}
.bg-blur::before {
  content: '';
  background-image: var(--bg-image);
  background-size: cover;
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: -1;
}
Enter fullscreen mode Exit fullscreen mode

现在，让我们使用该属性模糊图像以创建渐变外观filter。



.bg-blur::before {
  filter: blur(30px);
}
Enter fullscreen mode Exit fullscreen mode

图像模糊效果

大多数情况下，你不需要图片就能达到类似的效果。你可以用渐变背景来实现，Buildspace 在这方面做得非常好！
卡片上的渐变背景来自 Buildspace

但是有了图像，你就可以拥有动态色彩。这里有一个来自The Graph的例子。他们取了 logo，添加了模糊效果，将其设置为卡片背景，并将 logo 放在上面。
来自 The Graph 的动态模糊背景

Rabbithole也使用了这种效果，使其英雄背景色与英雄图片相匹配。看看右边的背景图片，是不是感觉它只是兔子图片的模糊版本？
具有模糊背景效果的兔子洞示例

一切就绪！您可以开始交付您的下一个 web3 项目，并实现 web3 的美感。别忘了，您可以在这里找到所有这些内容：

希望你喜欢这篇文章，并从中有所收获！如果你想了解更多，请在评论区留言。你也可以在这里了解更多关于我的信息，或者下载我的网站模板。

附言：我目前有一个前端职位空缺，我正在为 web3 项目保留这个职位。😉

同时，我会把这个美丽的ARCx 护照设计留给你。😍
ARCx护照设计

文章来源：https://dev.to/trishathecookie/css-tricks-to-create-that-dark-futuristic-web3-look-53bm
Devto 翻译
PREV
React：如何使用 React Context 创建可重用表单
NEXT
Microsoft Visual Studio Code 编辑器使用率的崛起 面试通过率 经验/地点 结论