カラフルな3Dテキスト

Result

See the Pen Single element, multi coloured 3d text effect by kachibito (@kachibito) on CodePen.

テキストを3D化してカラフルにする、というもの
やってる事はシンプルで、疑似要素にtext-shadowを複数折り重ねて実現していますが、性質上どしてもコードが長くなってしまいます
contenteditable属性も含めてあるので好みのテキストでお試し頂けます

css

h1 {/*ベースとなるテキストのスタイル*/
	
	font-size: 100px;
	text-align: center;
	line-height: 1;
	margin: 0;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	position: absolute;
	color: #f98ca4;
	text-shadow: 
		-1px -1px 0 #6e1f58, 
		1px -1px 0 #6e1f58,
		-1px 1px 0 #6e1f58,
		1px 1px 0 #6e1f58, 
		1px 0px 0px #65f283,
		0px 1px 0px #65f283,
		2px 1px 0px #65f283,
		1px 2px 0px #65f283,
		3px 2px 0px #65f283,
		2px 3px 0px #65f283,
		4px 3px 0px #65f283,
		3px 4px 0px #65f283,
		5px 4px 0px #65f283,
		3px 5px 0px #6e1f58,
		6px 5px 0px #6e1f58,
		-1px 2px 0 black,
		0 3px 0 #6e1f58,
		1px 4px 0 #6e1f58,
		2px 5px 0px #6e1f58,
		2px -1px 0 #6e1f58,
		3px 0 0 #6e1f58,
		4px 1px 0 #6e1f58,
		5px 2px 0px #6e1f58,
		6px 3px 0 #6e1f58,
		7px 4px 0 #6e1f58,
		10px 10px 4px #dac249;
}
h1:after,
h1:before {/*カスタムデータ属性の中身を取り出して重ねる。値は表示されているテキストと同じにしておく*/
	content: attr(data-heading);
	position: absolute;
	overflow: hidden;
	left: 0;
	width: 100%;
	top: 0;
	z-index: 5;
}
h1:before {/*影を作って高さを2/3にしておく*/
	text-shadow: 
		-1px -1px 0 #9e132c,
		1px -1px 0 #9e132c,
		-1px 1px 0 #9e132c,
		1px 1px 0 #9e132c,
		1px 0px 0px #f5b10b,
		0px 1px 0px #f5b10b,
		2px 1px 0px #f5b10b,
		1px 2px 0px #f5b10b,
		3px 2px 0px #f5b10b,
		2px 3px 0px #f5b10b,
		4px 3px 0px #f5b10b,
		3px 4px 0px #f5b10b,
		5px 4px 0px #f5b10b,
		3px 5px 0px #9e132c,
		6px 5px 0px #9e132c,
		-1px 2px 0 black,
		0 3px 0 #9e132c,
		1px 4px 0 #9e132c,
		2px 5px 0px #9e132c,
		2px -1px 0 #9e132c,
		3px 0 0 #2f3e9c,
		4px 1px 0 #9e132c,
		5px 2px 0px #9e132c,
		6px 3px 0 #9e132c,
		7px 4px 0 #9e132c,
		10px 10px 4px rgba(106, 241, 119, 0.8);
	color: #65f283;
	height: 66%;
}
h1:after {/*同様に高さを調整して縦に3分割されているように見せる*/
	height: 33%;
	color: #4ad9db;
	text-shadow:
		-1px -1px 0 #2f3e9c,
		1px -1px 0 #2f3e9c,
		-1px 1px 0 #2f3e9c,
		1px 1px 0 #2f3e9c,
		1px 0px 0px #f98ca4,
		0px 1px 0px #f98ca4,
		2px 1px 0px #f98ca4,
		1px 2px 0px #f98ca4,
		3px 2px 0px #f98ca4,
		2px 3px 0px #f98ca4,
		4px 3px 0px #f98ca4,
		3px 4px 0px #f98ca4,
		5px 4px 0px #f98ca4,
		3px 5px 0px #2f3e9c,
		6px 5px 0px #2f3e9c,
		-1px 2px 0 black,
		0 3px 0 #2f3e9c,
		1px 4px 0 #2f3e9c,
		2px 5px 0px #2f3e9c,
		2px -1px 0 #2f3e9c,
		3px 0 0 #2f3e9c,
		4px 1px 0 #2f3e9c,
		5px 2px 0px #2f3e9c,
		6px 3px 0 #2f3e9c,
		7px 4px 0 #2f3e9c;
}

html

<h1 data-heading="かちびと.net">かちびと.net</h1>

via

Single element, multi coloured 3d text effect