CSSでテキストのデザイン修飾
content:attr(title);
-webkit-mask-image
hello
hello
hello
hello
hello
view source
JavaScript
CSS
.decoration{
position:relative;
top:0;
left:0;
height:80px;
font-size:64px;
}
.decoration p,
.decoration p:before,
.decoration p:after{
display:block;
content:attr(title);
position:absolute;
top:0;
left:0;
}
/* blue */
p.blue {
color:#44c0fe;
text-shadow:0 -1px 0 rgba(255,255,255,0.6),0 1px 1px rgba(0,0,0,0.5);
}
p.blue:before {
color:#0036b4;
-webkit-mask-image:-webkit-linear-gradient(
-85deg,
rgba(0,0,0,0),
rgba(0,0,0,0) 40%,
rgba(0,0,0,1) 80%,
rgba(0,0,0,1)
);
-moz-mask-image:-moz-linear-gradient(
-85deg,
rgba(0,0,0,0),
rgba(0,0,0,0) 40%,
rgba(0,0,0,1) 80%,
rgba(0,0,0,1)
);
}
p.blue:after {
color:#d7edff;
-webkit-mask-image:-webkit-linear-gradient(
-85deg,
rgba(0,0,0,1),
rgba(0,0,0,1) 10%,
rgba(0,0,0,0.25) 48%,
rgba(0,0,0,0) 48%,
rgba(0,0,0,0)
);
-moz-mask-image:-moz-linear-gradient(
-85deg,
rgba(0,0,0,1),
rgba(0,0,0,1) 10%,
rgba(0,0,0,0.25) 48%,
rgba(0,0,0,0) 48%,
rgba(0,0,0,0)
);
}
/* rainbow */
p.rainbow {
color:#fff100;
text-shadow:0 1px 0 rgba(255,255,255,1),0 -1px 0 rgba(0,0,0,0.4);
}
p.rainbow:before {
color:#e4007f;
-webkit-mask-image:-webkit-linear-gradient(
45deg,
rgba(0,0,0,0.5),
rgba(0,0,0,0.5) 15%,
rgba(0,0,0,0) 25%,
rgba(0,0,0,0) 35%,
rgba(0,0,0,0) 50%,
rgba(0,0,0,0.5) 60%,
rgba(0,0,0,1) 75%,
rgba(0,0,0,1) 85%,
rgba(0,0,0,1)
);
}
p.rainbow:after {
color:#00a0e9;
-webkit-mask-image:-webkit-linear-gradient(
45deg,
rgba(0,0,0,0),
rgba(0,0,0,0) 15%,
rgba(0,0,0,0) 25%,
rgba(0,0,0,0) 35%,
rgba(0,0,0,0.5) 50%,
rgba(0,0,0,0.8) 60%,
rgba(0,0,0,0.5) 75%,
rgba(0,0,0,0) 85%,
rgba(0,0,0,0)
);
}
/* gold */
p.gold {
color:#755d41;
text-shadow:0 2px 0 #755d41,0 2px 1px rgba(0,0,0,0.8);
}
p.gold:before {
color:#b6a57a;
-webkit-mask-image:-webkit-linear-gradient(
top,
rgba(0,0,0,0),
rgba(0,0,0,1) 40%,
rgba(0,0,0,0) 90%,
rgba(0,0,0,0)
);
}
p.gold:after {
color:#fff;
-webkit-mask-image:-webkit-linear-gradient(
top,
rgba(0,0,0,0),
rgba(0,0,0,0) 20%,
rgba(0,0,0,0.2) 36%,
rgba(0,0,0,0.5) 40%,
rgba(0,0,0,0.2) 44%,
rgba(0,0,0,0) 60%,
rgba(0,0,0,0)
);
}
p.stroke{
color:#999999;
-webkit-text-fill-color: #FFDB80;
-webkit-text-stroke: #E09F00 2px;
text-fill-color: #FFDB80;
text-stroke: #E09F00 2px;
}
p.shadow-stroke{
color:#999999;
text-shadow:
2px 2px 0 #000,
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}
HTML
ページのソースを表示 : Ctrl+U , DevTools : F12
view-source:https://hi0a.com/demo/-css/css3-text-decoraton/
ABOUT
hi0a.com 「ひまアプリ」は無料で遊べるミニゲームや便利ツールを公開しています。
プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。
必要な機能の関数をコピペ利用したり勉強に活用できます。
プログラムの動作サンプル結果は画面上部に出力表示されています。
環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。
画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。
動く便利なものが好きなだけで技術自体に興味はないのでコードは汚いです。
途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。