创建css_在CSS中重新创建“他的深色材料”徽标

我喜欢菲利普·普尔曼（Philip Pullman）的小说《 他的黑暗物质》三部曲的新BBC改编版 。 还有一些非常不错的图形设计值得欣赏。 我很喜欢一个漂亮的标题序列（我必须每次都完整地观看《 权力的游戏》的开场片数），而这当然符合要求，而且还有醒目的徽标。 看完最近的一集之后，我想我可以尝试用CSS重新创建这个徽标！

我使用CSS创建的徽标版本

版式

尽管它本质上是纯文本徽标，但在为网络构建时有很多需要解压缩的内容。 徽标由两个字体粗细组成，最值得注意的是，中间的对角斜线将其“分为”两部分。 骨折左侧的文本由常规字体粗细组成，但第一个单词（“ His”）除外。 右边的文本和第一个单词使用相同字体的粗体变体。

我不知道徽标中使用的实际字体是什么，但是Twitter上的一些人建议它可能是House Industries的Neutraface 。 我选择支付125美元来进行一个有趣的演示，所以我用Google Fonts的Josefin Sans代替了它。

HTML

我想以某种方式构建徽标，以确保徽标可以在任何背景上使用-也就是说，可以通过徽标的透明区域看到背景-因此隐藏带有黑色渐变或伪元素的东西是不行的。

尽管这只是一个有趣的练习，但我想尽可能避免重复HTML。 一种（可能更容易）的路径是使用两个跨度，并且在内部和<h1>使用相同的文本，如下所示：

< h1>
  < span> His Dark Materials </ span>
  < spanaria-hidden=" true "> His Dark Materials </ span>
</ h1>

然后，我可以在第二个项目上使用position: absolute ，将其叠加在第一个项目上，并独立设置样式。 这没有天生的错误 aria-hidden可以确保屏幕阅读器不会两次读取文本-但我更愿意将其保留为单个文本元素。 我决定使用伪元素（ ::before和::after ），而是使用content属性。

我们可以使用CSS自定义属性将文本内容复制到伪元素中：

< h1 style="--text:'His Dark Materials'"> His Dark Materials </ h1>

h1::before,
h1::after{
  content:var( --text );
}

这使我们（有效地）获得了文本的另外两个“副本”。 我将其放在反逗号中，因为它们实际上不是HTML的副本，而仅仅是文本内容–并且它们是不可选择的，或者就此而言，它们本身是不可访问的。 但这很好，因为我们的文本内容仍然以可访问的形式存在于<h1> 。

如果我们绝对地放置它们，那么它们将覆盖原始标题，并且我们可以分别对它们进行样式设置。

h1::before,
h1::after{
  content:var( --text );
  position: absolute ;
  top: 0 ;
  left: 0 ;
  width: 100% ;
  text-align: center ;
  color: white ;
  z-index: -1 ;
}

CSS

现在我们可以在伪元素上使用clip-path()来创建断裂效果：

h1 {
  --high: 80% ;
  --low: 20% ;
  --gap: 0.5rem ;
}

h1::after {
  -webkit-clip-path:polygon(
    calc(var( --high )+var( --gap )) 0 ,
    100% 0 ,
    100% 100% ,
    calc(var( --low )+var( --gap )) 100%
  );
  clip-path:polygon(
    calc(var( --high )+var( --gap )) 0 ,
    100% 0 ,
    100% 100% ,
    calc(var( --low )+var( --gap )) 100%
  );
}

h1::before {
  font-weight: 400 ;
  -webkit-clip-path:polygon(
    calc(var( --high )-var( --gap )) 0 ,
    calc(var( --low )-var( --gap )) 100% ,
    0 100% ,
    0 0
  );
  clip-path:polygon(
    calc(var( --high )-var( --gap )) 0 ,
    calc(var( --low )-var( --gap )) 100% ,
    0 100% ,
    0 0
  );
}

::before伪元素沿对角线被裁剪，以便仅左侧可见，而::after被裁剪，以使得反向可见，从而在两者之间留出很小的间隙（这将产生斜线效果）。 由于某些浏览器仍然需要给clip-path加上前缀，因此我们可以利用自定义属性来减少整体代码：

h1 {
  --high: 80% ;
  --low: 20% ;
  --gap: 0.5rem ;

  --clipLeft:polygon(
    calc(var( --high )-var( --gap )) 0 ,
    calc(var( --low )-var( --gap )) 100% ,
    0 100% ,
    0 0
  );

  --clipRight:polygon(
    calc(var( --high )+var( --gap )) 0 ,
    100% 0 ,
    100% 100% ,
    calc(var( --low )+var( --gap )) 100%
  );
}

h1::before {
  font-weight: 400 ;
  -webkit-clip-path:var( --clipLeft );
  clip-path:var( --clipLeft );
}

h1::after {
  -webkit-clip-path:var( --clipRight );
  clip-path:var( --clipRight );
}

Firefox现在已将`path（）`作为剪辑路径属性来支持，它允许使用SVG路径语法。 我不知道这是否对我们有帮助，因为我还没有机会尝试使用它。

原始文本在剪切的伪元素下仍然可见，因此我将颜色设置为透明。 伪元素还具有较低的z-index-这样，文本仍将是可选的，但查看器将仅在下面看到剪裁的文本。

h1{
  color: transparent ;
}

最后，虽然斜杠左侧的大多数文本使用的是常规字体粗细，但第一个单词需要加粗。 不幸的是，我们不能使用content将其设置为单独的实体，因此它需要一点技巧，并且需要更改标记以允许我们选择第一个单词（没有::first-word选择器！） ：

< h1 style="--text:'His Dark Materials'">< span> His </ span> Dark Materials </ h1>

现在，我可以使第一个单词的文本可见，并将字体粗细设置为粗体，从而有效地隐藏了相应的伪元素内容：

h1 > span{
  font-weight: 700 ;
  color: white ;
}

我不喜欢这种解决方案，因为它非常有限。 如果遇到第一个单词需要使用其他字体或较轻字体设置样式的情况，则隐藏伪元素内容将不起作用。 但这对我们的目的而言已经足够了。

查看完整的演示：

演示地址

翻译自: https://css-irl.info/recreating-the-his-dark-materials-logo-in-css/