时间戳

首页 > 解决方案 > 如何将文本设置为标题元素的阴影？

html - 如何将文本设置为标题元素的阴影？

问题描述

我想要一个这样的居中标题，仅使用 CSS [不使用 flexbox]。
[编辑] 我在下面使用 flexbox 的示例。这段代码有一些限制，因为标题在 CSS 中是硬编码的，所以我不能再次将同一个类用于不同的标题。对这么小的任务使用 flexbox 是一个好习惯吗？

body {
  background-color: #0f1932;
}
.wrapper {
  width: 100%;
  position: absolute;
  display: flex;
  flex-direction: column;
}
header {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 10px 0px;
}
.heading {
  color: white;
}
.heading::before {
  font-family: 'Montserrat', sans-serif;
  font-size: 3rem;
  transform: translateX(-50%);
  opacity: 0.06;
  text-transform: uppercase;
  content: "demo-shadow";
}
.heading::after {
  font-family: 'Quicksand', sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: -40px;
  content: "demo";
  text-transform: uppercase;
  white-space: nowrap;
}
<!doctype html>
<html lang="en">
  <head>
  </head>
  <body>
      <div class="wrapper">
         <header>
            <div class="heading-container">
               <h1 class="heading"></h1>
            </div>
          </header>
      </div>
  </body>
</html>

.

标签： htmlcss

解决方案

得到了解决方案。我必须使用自定义数据属性来显示动态内容。

body {
  background-color: #0f1932;
}
.wrapper {
  width: 100%;
  position: absolute;
  display: flex;
  flex-direction: column;
}
header {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 10px 0px;
}
.heading {
  color: white;
}
.heading::before {
  font-family: 'Montserrat', sans-serif;
  font-size: 3rem;
  transform: translateX(-50%);
  opacity: 0.06;
  text-transform: uppercase;
  content: attr(before-title);;
}
.heading::after {
  font-family: 'Quicksand', sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: -40px;
  content: attr(after-title);;
  text-transform: uppercase;
  white-space: nowrap;
}
<!doctype html>
<html lang="en">
  <head>
  </head>
  <body>
      <div class="wrapper">
         <header>
            <div class="heading-container">
               <h1 class="heading" after-title="titele1" before-title="titele1"></h1>
               <h1 class="heading" after-title="titele2" before-title="titele2"></h1>
            </div>
          </header>
      </div>
  </body>
</html>

推荐阅读