📌  相关文章
📜  如何使用 HTML 和 CSS 创建 Neumorphism Effect？(1)

📅  最后修改于: 2023-12-03 14:51:53.140000             🧑  作者: Mango

如何使用 HTML 和 CSS 创建 Neumorphism Effect

Neumorphism effect 是一种灵感来源于 skeuomorphism 和 flat design 的设计潮流。它通常定义为一种按钮或组件的样式，通过给予其表面来自然投射和内阴影的外观，使其看起来具有3D效果。

在本教程中，我们将学习如何使用 HTML 和 CSS 来创建 Neumorphism effect 的按钮和组件。

准备工作

首先，我们需要一个 HTML 文件来定义我们的按钮和组件。在您的代码编辑器中创建一个新的 HTML 文件，并添加以下代码：

<!DOCTYPE html>
<html>
<head>
  <title>Neumorphism Effect</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <button class="neumorphism-button">Click Me</button>
</body>
</html>

我们在这里创建了一个按钮，并为它添加了一个具有 neumorphism-button 类名的 CSS 类。现在，我们需要一个 CSS 文件来定义这个类名的样式。在同一目录下，在名为 style.css 的文件中添加以下代码：

.neumorphism-button {
  width: 200px;
  height: 50px;
  border: none;
  border-radius: 10px;
  background-color: #f0f0f0;
  box-shadow: 8px 8px 16px #d9d9d9, -8px -8px 16px #ffffff;
}

在这里，我们定义了按钮的样式。其中，box-shadow 属性用于创建 Neumorphism effect，通过添加正值的投影和负值的内阴影。

运行效果

保存 HTML 和 CSS 文件并在浏览器中打开 HTML 文件。现在，您将看到一个 Neumorphism effect 按钮，该按钮具有3D外观和投影效果。

自定义样式

您可以根据需要自定义按钮的样式。通过更改 .neumorphism-button 类中的属性，如颜色、大小、形状和阴影等，您可以创建不同类型的 Neumorphism effect 按钮和组件。

结论

使用 HTML 和 CSS 可以创建 Neumorphism effect，为您的按钮和组件添加现代化的3D外观。通过调整样式和属性，您可以根据自己的需要定制按钮和组件，以满足特定的设计需求。