デザインコード紹介
Chapter2 見出しやテキストの装飾
手書き風英字を背景にした見出し
更新日:
HTML
<h2 class="heading">採用情報について</h2>
CSS
.heading {
position: relative;
padding-top: 50px;
padding-left: 30px;
font-size: 26px;
}
.heading span {
position: relative;
z-index: 0;
}
.heading::before {
content: attr(data-en);
position: absolute;
transform: rotate(-5deg);
top: 0;
left: 0;
color: #e5c046;
font-size: 80px;
font-weight: 400;
font-family: 'Mrs Saint Delafield', cursive;
}
できるだけ誌面とコードの色を近づけるように調整しましたが、印刷物と画面表示との差異はどうしても発生してしまいます。サポートサイトでご確認いただける色が実際に表示されます。