所有当代桌面和移动浏览器都实现了

RAHIM104

其 和 shape-image-threshold 属性。 复制 很少看到 CSS Shapes 用于比在图像周围包裹文本更复杂的事情，就像这样。 很少看到 CSS Shapes 用于比在图像周围包裹文本更复杂的事情，就像这样。（大预览） Web 设计师没有意识到 CSS Shapes 所提供的创造潜力，并且没有理由不使用它们。也有可能 Web 开发人员仍然认为 Shapes 在浏览器中的支持很差。尽管如此，由于所有现代浏览器现在都支持 Shapes - 并且它们的属性在旧浏览器中优雅地降级 - 目前没有理由避免使用它们。 利用形状做更多事情奥托·斯托奇（Otto Storch）的这个设计是最先引起我注意的设计之一。


我欣赏其两列合理的文案的结构简单性，以及他的图像的放置方式——用文本包 特殊数据 裹在图像周围以创建有机形状——有趣地让页面充满活力和动感。 左：一抹美丽。 源自 McCall's Magazine 艺术指导，由 Otto Storch 负责。 右图：这种充满动感的设计使用了 CSS 形状和 HTML 图片元素。 左：一抹美丽。源自 McCall's Magazine 艺术指导，由 Otto Storch 负责。右图：这种充满动感的设计使用了 CSS 形状和 HTML 图片元素。（大预览） 我很少在网上看到具有这种能量的布局，因此我的设计包括四个颜色鲜艳的甲壳虫，每个大众汽车都以一定角度放置，以与两列高大的文本形成对比。我只需要两个结构元素来实现这个受 Storch 启发的设计：主要元素和旁白。



每个元素都包含运行文本的段落，以及两个图片元素，使我能够将小图像替换为大图像 复制 这些图片元素适合小屏幕的边缘，但我仍然需要在运行副本的段落两侧留有空白。通过使用视口宽度单位，该空间始终与这些屏幕成比例： 复制 我裁剪了这些图片，使其尺寸适合小屏幕。 我裁剪了这些图片，使其尺寸适合小屏幕。（大预览） 图片元素是 HTML 中最有用的附加元素之一。通过将媒体查询与多个图像相结合，浏览器可以选择最适合布局的图像。 结构元素垂直堆叠，我为中等尺寸的屏幕引入了更大的图像。 结构元素垂直堆叠，我为中等尺寸的屏幕引入了更大的图像。