text-shadow
Drop Shadow
selecter {
text-shadow: 2px 2px 1px rgba(0,0,0,0.4);
}
Blur
selecter {
color: darkred;
text-shadow: 0px 0px 3px red;
}
Grow
selecter {
background: #000;
color: #fd2;
text-shadow:
0px 0px 3px #fd2,
0px 0px 5px #fd2;
}
Bevel
selecter {
background: #ddd /* 淡色 */;
text-shadow: 1px 1px 0px rgba(255,255,255,0.9) /* ハイライト */ ;
}
Emboss
selecter {
background: #ddd /* 淡色 */;
color: #666;
text-shadow:
-1px -1px 0px #eee /* 左上ハイライト */,
1px 1px 0px #222 /* 右下陰部分 */;
}
Color Drift(※版ズレ的)
selecter {
text-shadow:
-2px -1px 0px rgba(255,255,0,0.66),
-2px 1px 0px rgba(255,0,255,0.66),
0px 3px 0px rgba(0,255,255,0.66);
color:rgba(0, 0, 0, 0.9);
}
Decoration
selecter {
text-shadow:
1px 1px 0px #fff /* 背景と同色 */ ,
2px 2px 1px #000;
}
Crohn
selecter {
text-shadow:
0px 1em 3px rgba(0,0,0,0.4),
0px 2em 3px rgba(0,0,0,0.2);
margin-bottom: 2em /* 影の配置部分を空ける */;
}
Reflect
/* 番外 ※text-shadow不使用 */
selecter { line-height:1; }
selecter:after{
content: "Reflect";
display: block;
-webkit-transform: scale(1,-1) skew(-45deg) translate(0.4em);
-moz-transform: scale(1,-1) skew(-45deg) translate(0.4em);
-o-transform: scale(1,-1) skew(-45deg) translate(0.4em);
transform: scale(1,-1) skew(-45deg) translate(0.4em);
color: rgba(0,0,0,0.2);
}