如何使用 CSS 创建 Glassmorphism 日历？

您可以使用 Glassmorphism UI 设计轻松创建 Glassmorphism日历，这是设计中的最新趋势。它是一种为任何网页的网页元素设计样式并提供 3D 和玻璃效果的现代方式。要创建任何 Glassmorphism 日历，您只需要遵循本文下面进一步给出的基本步骤。

注意：为了创建一个类似玻璃的容器，您只需要记住 3 件事。

1. 白色背景颜色，几乎为零不透明度。
2. 具有低不透明度和高模糊半径的黑色阴影。
3. 使用在玻璃后面添加模糊效果 背景过滤器属性。

方法：按照以下步骤使用 CSS 创建 Glassmorphism 日历。

• 为日历创建一个基本结构，例如创建一个高度为 400 像素和宽度为 400 像素的日历容器 div。
• 为您的背景创建渐变图像。
• 将日、月、年、日期放入日历容器的列中
• 您可以添加一些形状，例如圆形，您可以在其上放置虚拟玻璃日历，使其看起来像是放置在玻璃下方。
• 为日历和日历正文添加低不透明度的白色背景色。
• 添加一个box-shadow ，它将为玻璃添加一个 3-d 效果。
• 添加低不透明度和大模糊黑色阴影。

示例：以下是使用上述步骤实现 Glassmorphism 日历的完整代码。

index.html

  

    

  

    

        

        

            August
            Thursday
            17
            2021
        
    

  

输出：