CSSでエヴァンゲリオンの各話タイトルなデザイン集

2021-06-09CSS デザイン サンプル集,CSS

CSSだけでエヴァンゲリオンの各話タイトル風のデザイン集です。

「第壱話 使徒、襲来」「第弐話 見知らぬ、天井」「第参話 鳴らない、電話」「第六話 決戦、第３新東京市」「第拾弐話 奇跡の価値は」「第拾伍話 嘘と沈黙」「第六話 決戦、第３新東京市」を作成済みです。

もし、アクセスがあるようでしたら全話分作るかもです。

• 縦横比は2:1（本物は16:9）
• padding-topで縦横比を維持
• フォントはserifを指定
• font-sizeはvｗで指定（レスポンシブだけど画面幅100％が必要）

第壱話 使徒、襲来

See the Pen CSS | Semicircular border design 2 by yochans (@yochans) on CodePen.

<div class="container">
	<p class="eva-title">
		<span>第壱話</span>
		<span>使</span>
		<span>徒、</span>
		<span>襲来</span>
	</p>
</div>

.eva-title {
	position: relative;
	width: 100%;
	padding-top: 50%;
	background: #000;
	font-family: serif;
	font-weight: bold;
	color: #FFF;
	letter-spacing: -0.25em;
	margin: 0;
}

.eva-title span {
	position: absolute;
}

.eva-title span:nth-child(1) {
	top: 4%;
	left: 4%;
	font-size: 9vw;
}
.eva-title span:nth-child(2) {
	top: 23%;
	left: 5%;
	font-size: 15vw;
}

.eva-title span:nth-child(3) {
	top: 54%;
	left: 5%;
	font-size: 15vw;
}

.eva-title span:nth-child(4) {
	top: 54%;
	left: 28%;
	font-size: 15vw;
}

第弐話 見知らぬ、天井

See the Pen CSS | Evangelion story title design 01 by yochans (@yochans) on CodePen.

<div class="container">
	<p class="eva-title">
		<span>第弐話</span>
		<span>見知らぬ</span>
		<span>、</span>
		<span>天井</span>
	</p>
</div>

.eva-title {
	position: relative;
	width: 100%;
 	padding-top: 50%;
	background: #000;
	font-family: serif;
	font-weight: bold;
	color: #FFF;
	letter-spacing: -0.25em;
	margin: 0;
}

.eva-title span {
	position: absolute;
}

.eva-title span:nth-child(1) {
	top: 4%;
	left: 4%;
	font-size: 9vw;
}
.eva-title span:nth-child(2) {
	writing-mode: vertical-rl;
	top: 7%;
	left: 40%;
	font-size: 11vw;
}

.eva-title span:nth-child(3) {
	top: 67%;
	left: 55%;
	font-size: 11vw;
}

.eva-title span:nth-child(4) {
	top: 65%;
	left: 60%;
	font-size: 12vw;
}

第参話 鳴らない、電話

See the Pen CSS | Evangelion story title design 03 by yochans (@yochans) on CodePen.

<div class="container">
	<p class="eva-title">
		<span>第参話</span>
		<span>鳴らない、</span>
		<span>電</span>
		<span>話</span>
	</p>
</div>

.eva-title {
	position: relative;
	width: 100%;
	padding-top: 50%;
	background: #000;
	font-family: serif;
	font-weight: bold;
	color: #FFF;
	letter-spacing: -0.25em;
	margin: 0;
}

.eva-title span {
	position: absolute;
}

.eva-title span:nth-child(1) {
	writing-mode: vertical-rl;
	top: 52%;
	left: 80%;
	font-size: 7.5vw;
}
.eva-title span:nth-child(2) {
	top: 2%;
	left: 4%;
	font-size: 17vw;
}

.eva-title span:nth-child(3) {
	top: 2%;
	left: 77%;
	font-size: 17vw;
}

.eva-title span:nth-child(4) {
	top: 50%;
	left: 4%;
	font-size: 17vw;
}

第六話 決戦、第３新東京市

See the Pen CSS | Evangelion story title design #6 by yochans (@yochans) on CodePen.

<div class="container">
	<p class="eva-title">
		<span>第六話</span>
		<span>決戦、</span>
		<span>第３</span>
		<span>新東京市</span>
	</p>
</div>

.eva-title {
	position: relative;
	width: 100%;
	padding-top: 50%;
	background: #000;
	font-family: serif;
	font-weight: bold;
	color: #FFF;
	letter-spacing: -0.25em;
	margin: 0;
}

.eva-title span {
	position: absolute;
}

.eva-title span:nth-child(1) {
	top: 72%;
	left: 9%;
	font-size: 8vw;
}

.eva-title span:nth-child(2) {
	top: 4%;
	left: 8%;
	font-size: 22vw;
}

.eva-title span:nth-child(3) {
	top: 12%;
	left: 58%;
	font-size: 10vw;
}

.eva-title span:nth-child(4) {
	writing-mode: vertical-rl;
	top: 18%;
	left: 74%;
	font-size: 10vw;
}

第拾弐話 奇跡の価値は

See the Pen CSS | Evangelion story title design 12 by yochans (@yochans) on CodePen.

<div class="container">
	<p class="eva-title">
		<span>第拾弐話</span>
		<span>奇跡の価値は</span>\
	</p>
</div>

.eva-title {
	position: relative;
	width: 100%;
 	padding-top: 50%;
	background: #000;
	font-family: serif;
	font-weight: bold;
	color: #FFF;
	letter-spacing: -0.25em;
	margin: 0;
}

.eva-title span {
	position: absolute;
}

.eva-title span:nth-child(1) {
	top: 72%;
	left: 5%;
	font-size: 8vw;
}
.eva-title span:nth-child(2) {
	top: 4%;
	left: 4%;
	font-size: 15vw;
}

第拾伍話 嘘と沈黙

See the Pen CSS | Evangelion story title design #15 by yochans (@yochans) on CodePen.

<div class="container">
	<p class="eva-title">
		<span>第拾伍話</span>
		<span>嘘</span>
		<span>と</span>
		<span>沈黙</span>
	</p>
</div>

.eva-title {
	position: relative;
	width: 100%;
 	padding-top: 50%;
	background: #FFF;
	font-family: serif;
	font-weight: bold;
	color: #000;
	letter-spacing: -0.25em;
	margin: 0;
}

.eva-title span {
	position: absolute;
}

.eva-title span:nth-child(1) {
	writing-mode: vertical-rl;
	top: 6%;
	left: 2%;
	font-size: 8vw;
}
.eva-title span:nth-child(2) {
	top: 20%;
	left: 30%;
	font-size: 18vw;
}

.eva-title span:nth-child(3) {
	writing-mode: vertical-rl;
	top: 36%;
	left: 42%;
	font-size: 15vw;
}
.eva-title span:nth-child(4) {
	writing-mode: vertical-rl;
	top: 22%;
	left: 55%;
	font-size: 18vw;
}

最終話 世界の中心でアイを叫んだけもの

See the Pen CSS | Evangelion story title design #16 by yochans (@yochans) on CodePen.

<div class="container">
	<p class="eva-title">
		<span>最終話</span>
		<span>世界の中心で<br>アイを叫んだ<br>けもの</span>
	</p>
</div>

.eva-title {
	position:relative;
	width: 100%;
 padding-top: 50%;
	background: #000;
	font-family: serif;
	font-weight: bold;
	color: #FFF;
	letter-spacing: -0.25em;
	margin: 0;
}

.eva-title span {
	position: absolute;
}

.eva-title span:nth-child(1) {
	top: 4%;
	left: 35%;
	font-size: 8vw;
}
.eva-title span:nth-child(2) {
	line-height: 1em;
	top: 29%;
	left: 20%;
	font-size: 10vw;
}