Result
テキストを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>
