用于比在图像周围包裹文本更复杂的事情

RAHIM22

就像这样。（大预览） Web 设计师没有意识到 CSS Shapes 所提供的创造潜力，并且没有理由不使用它们。也有可能 Web 开发人员仍然认为 Shapes 在浏览器中的支持很差。尽管如此，由于所有现代浏览器现在都支持 Shapes - 并且它们的属性在旧浏览器中优雅地降级 - 目前没有理由避免使用它们。 利用形状做更多事情 # 奥托·斯托奇（Otto Storch）的这个设计是最先引起我注意的设计之一。我欣赏其两列合理的文案的结构简单性，以及他的图像的放置方式——用文本包裹在图像周围以创建有机形状——有趣地让页面充满活力和动感。 左：一抹美丽。 源自 McCall's Magazine 艺术指导，WhatsApp 数据库 由 Otto Storch 负责。 右图：这种充满动感的设计使用了 CSS 形状和 HTML 图片元素。

左：一抹美丽。源自 McCall's Magazine 艺术指导，由 Otto Storch 负责。右图：这种充满动感的设计使用了 CSS 形状和 HTML 图片元素。（大预览） 我很少在网上看到具有这种能量的布局，因此我的设计包括四个颜色鲜艳的甲壳虫，每个大众汽车都以一定角度放置，以与两列高大的文本形成对比。我只需要两个结构元素来实现这个受 Storch 启发的设计：主要元素和旁白。每个元素都包含运行文本的段落，以及两个图片元素，使我能够将小图像替换为大图像复制 这些图片元素适合小屏幕的边缘，但我仍然需要在运行副本的段落两侧留有空白。通过使用视口宽度单位，该空间始终与这些屏幕成比例： p { margin-right: 10vw; margin-left: 10vw; } 复制 我裁剪了这些图片，使其尺寸适合小屏幕。

我裁剪了这些图片，使其尺寸适合小屏幕。（大预览） 图片元素是 HTML 中最有用的附加元素之一。通过将媒体查询与多个图像相结合，浏览器可以选择最适合布局的图像。 结构元素垂直堆叠，我为中等尺寸的屏幕引入了更大的图像。 结构元素垂直堆叠，我为中等尺寸的屏幕引入了更大的图像。（大预览） 我最常使用 media 属性和 min-width 值，虽然这种设计每个图片元素只需要两个图像，但可以添加更多图像，甚至组合媒体值来创建复杂的查询复制 这些图片中的图像包含我的甲壳虫的裁剪版本，最适合小屏幕。