html - 重新改造旧设计，用新的 CSS3 规则替换背景图像

Question

我必须重新改造一个已有 3 年历史的网站，在基本保持相同的外观和感觉的同时，使用广泛的 CSS3 技术升级编码技术，使其变得现代和响应迅速。

这是一个使用透明度、浮雕和切割区域的设计，最初是在 Photoshop 中创建的，然后使用从原始图像切割的背景图 block 图像进行编码。

此处显示了综合要解决的挑战的详细信息:

这里是关键主题:

1. 页眉有一个半透明的背景，显示正文的背景，但也有从左到右水平渐变的 3D 外观边框。
2. 页眉的背景(及其边框)在左上角和右下角也有光影效果的浮雕效果。
3. Logo 和网站名称位于标题背景上方的裁剪区域。

在这里，我的实际 WIP 仅使用 CSS3 重新创建它:

如您所见，仍然缺少浮雕效果、边框渐变以及最重要的..... Logo 切割区域(目前我只是简单地放置了一张按原始布局拍摄的图像)。

你能帮我得到与原始结果最相似的结果吗？

谢谢。

Answer 1

您可以使用 SVG 路径创建形状:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="110" width="600" viewBox="4 4 92 16">
    <path d="M 5 6 a 1 1 0 0 1 1 -1 h 14 a 4.2 4.2 0 0 0 8 0 h1 a 1 1 0 0 0 1 1 h 49 a 1 1 0 0 0 1 -1 h14 a 1 1 0 0 1 1 1 v 10 a 1 1 0 0 1 -1 1 h -88 a 1 1 0 0 1 -1 -1z" fill="none" stroke="black" stroke-width="0.6" />
</svg>

到这个基本形状，可以填充渐变、照片等