今回は画像の上に透過させた要素を配置し、テキストの4隅に括弧を入れる方法について解説していきます。
括弧を入れることで、よりタイトルが強調され目を引くデザインになります。
タイトルの背景を透過させる
flexboxで要素を上下左右中央揃えに。「--bg-color:rgba(0, 0, 0, .7);」で透過させた黒背景を「background-color」と枠を広げた「box-shadow」に設定。
<div class="container">
<h1>4隅に括弧を入れたタイトル</h1>
</div>
.container {
display:flex; background:url(...);...
}
h1 {
--color:#eeb031;
--bg-color:rgba(0, 0, 0, .7);
margin: 0.5rem;
padding: 2rem;
box-shadow: 0 0 0 10px var(--bg-color);
background-color: var(--bg-color);
color: var(--color);
font-size: 22px;
}
上部に色分けした線を引く
カスタムプロパティ「linear-gradient」で黄色→透過→黄色の線を引き、括弧のパーツを作ります。※中央の線は実際は透過されて背景と同化します。
.container {...}
h1 {
--color:#eeb031;
--x-gradient: linear-gradient(
90deg, /* 左から右にグラデーションをかける */
var(--color) 0 20px,
transparent 0 calc(100% - 20px),
var(--color) calc(100% - 20px));
background-image:
var(--x-gradient);
background-repeat: no-repeat;
background-size: 100% 3px;
background-position: top;
...
}
上下左右に線を引き、括弧を作る
background-imageに「linear-gradient」を追加し、4つ指定。黄色→透過→黄色の線を上下は横方向（--x-gradient）、左。右は縦方向（--y-gradient）に引き4隅に括弧を作成。
.container {...}
h1 {
--color:#eeb031;
--x-gradient: linear-gradient(90deg..);
--y-gradient:
linear-gradient(var(--color) 0 20px,
transparent 0 calc(100% - 20px),
var(--color) calc(100% - 20px));
background-image:
var(--x-gradient),
var(--y-gradient),
var(--x-gradient),
var(--y-gradient);
background-repeat: no-repeat;
background-size: 100% 3px, 3px 100%,
100% 3px, 3px 100%;
background-position:
top, right, bottom, left;
...
}
