Handwritten heading

by hondana

HTML

<p class="handwritten-heading" data-en="Message">
<span>手書き風英字のCSS見出し</span>
</p>

CSS

.handwritten-heading {
	position: relative;
	padding-top: 50px;
	padding-left: 30px;
	font-size: 26px;
}

.handwritten-heading span {
	position: relative;
	z-index: 2;
}

.handwritten-heading::before {
	content: attr(data-en);
	position: absolute;
	transform: rotate(-5deg);
	top: 10px;
	left: 0;
	color: rgba(224,66,114,0.6);
	font-size: 50px;
	font-weight: 400;
}