我会制作一个故事板来决定如何随着屏幕尺
寸的变化重新排列元素。对于中型屏幕，我将四个元素排列在 2x2 对称柱网格中。通过使用 minmax 值来调整这些列的大小，我确保它们填充所有可用空间，但它们的宽度永远不会收缩到 400px 以下： 复制 对于更大的屏幕，我还需要两行。它们的高度应该相等并占据所有可用的垂直空间} 复制 一个大的、水平滚动的内容区域在这个设计中占主导地位，并且比视口更宽。该面板包括四列 - 三列用于图像，一列用于我的雕刻副本 - 每列的宽度至少为 400 像素。通过设置视口的最大宽度并仅允许在水平轴上滚动，视口之外的任何内容都会被隐藏，但仍然可以访问： } 复制 一个表现分区，代表我的甲壳虫形状车轮下的道路。一个表现分区，代表我的甲壳虫形状车轮下的道路。（大预览）WhatsApp 数据库 我的内容下方是一个演示部分，代表我的甲壳虫形状车轮下的道路。该元素在较小的屏幕尺寸上不可见，因此为了使其可见，我将显示属性从无更改为块，然后添加浅灰色背景颜色。我之前在 body 元素上设置的网格属性定义了该划分的高度： div { display: block; background-color: #a73448; } } 复制 Webkit 的 Dave Hyatt 早在 2008 年就最初提出了 CSS Reflections，但到目前为止它们还没有在其他浏览器渲染引擎中实现。目前仅 Google Chrome 支持 CSS 反射。 正如您可能想象的那样，反射创建元素的副本。倒影可以出现在上方、下方、左侧或右侧。就像在物理世界中一样，当一个元素以某种方式发生变化时，它的反射也会随之发生。 CSS Reflections 提供了三个实验属性。它的方向和可选的偏移量控制元素与其反射之间的距离。
您还可以对任何反射应用遮罩以更改其外观，例如，使用渐变遮罩逐渐淡化在《灵感设计决策》的第七部分中，安迪·克拉克将探讨美国艺术总监兼平面设计师奥托·斯托奇如何激发他的网络设计灵感。我们如何使用 CSS Shapes 超越基本形状，为我们的设计增添活力？我们如何使用文本旋转来产生额外的效果？我们如何使用镜像和反射来增加设计的趣味性？在本文中，我们将对此进行探讨。 在过去的几年里，有关 HTML 和 CSS 的书籍几乎从我工作室的书架上消失了。我用有关艺术指导、编辑和平面设计的书籍取代了它们。 最近，我正在浏览图书馆的新内容，并被一本杂志所吸引。我喜欢它的设计师将图像和版式有趣地结合起来，创造出充满活力和动感的设计。
页:
[1]