UserCSS:ページタイトル
変数定義
code:style.css
:root {
--main-color: DarkGray; /* 主調色 */
--assort-color: White; /* 従属色 */
--base-color: WhiteSmoke; /* 背景色 */
--accent-color: BlueViolet; /* 強調色 */
/* 7 ページタイトルのアイキャッチ */
}
code:stylexx.css
.editor .line-title .text {
font-size: 26px;
/* line-height: 1.5; /* */
/* letter-spacing: 0.04em; /* */
font-weight: bold;
border-bottom: solid 2px var(--main-color);
padding-left: 52px; /* */
/* padding-left: 28px; /* */
/* padding-top: 4px; /* */
/* padding-bottom: 5px; /* */
/* margin-bottom: 50px;*/
text-shadow: 1px 1px 0px var(--assort-color), 2px 2px 0px var(--accent-color);
}
code:stylexx.css
.editor .line-title .text {
font-size: 24px;
font-weight: bold; /* */
/* border-bottom: solid 2px var(--text-color, #CCC); /* */ padding-left: 52px; /* */
text-shadow: 1px 1px 0px var(--assort-color, #EEE), 1px -1px 0px var(--assort-color, #EEE), -1px 1px 0px var(--assort-color, #EEE), -1px -1px 0px var(--assort-color, #EEE), 2px 2px 2px var(--accent-color, #CCC); }
縁取り + 影付き文字
code:stylexx.css
.editor .line-title .text {
font-size: 24px;
font-weight: bold;
border-bottom: solid 2px var(--text-color, #CCC); padding-left: 52px; /* */
text-shadow: 1px 1px 0px var(--assort-color, #EEE), 1px -1px 0px var(--assort-color, #EEE), -1px 1px 0px var(--assort-color, #EEE), -1px -1px 0px var(--assort-color, #EEE), 2px 2px 0px var(--main-color, #CCC); }
砂文字
code:stylexx.css
.editor .line-title .text {
font-size: 24px;
font-weight: bold; /* */
/* border-bottom: solid 2px var(--text-color, #CCC); /* */ padding-left: 52px; /* */
/* text-shadow: 0 0 27px var(--accent-color, red); /* */
text-shadow: 0 0 27px var(--main-color, red); /* */
}
縁取り + 砂文字
code:stylexx.css
.editor .line-title .text {
font-size: 24px;
font-weight: bold;
border-bottom: solid 2px var(--text-color, #CCC); padding-left: 52px; /* */
text-shadow: 1px 1px 0px var(--assort-color, #EEE), 1px -1px 0px var(--assort-color, #EEE), -1px 1px 0px var(--assort-color, #EEE), -1px -1px 0px var(--assort-color, #EEE), 0px 0px 27px var(--main-color, #CCC); }
code:stylexx.css
.editor .line-title::before {
content: ''; /* */
/* content: '😃'; /* */
/*content: '💖'; /* */
/* content: var(--eye-chacher); /* */
display: block;
/*display: inline-block;*/
/*display: inline;*/
width: 1em;
height: 1em;
padding: 25px; /* */
/* width: 26px; /* */
/* height: 26px; /* */
/* padding: 20px;*/
position: absolute; /* */
/* position: right bottom; */
background-image: var(--eye-chacher); /* */
/* background-size: cover; /* */
background-size: contain;
background-repeat: no-repeat; /* */
/* border-style: solid; border-color: red; /* */
border-radius: 4px;
}
code:style.css
.editor .line-title::after {
content: ''; /* */
display: block;
width: 1em;
height: 1em;
padding: 25px; /* */
position: absolute; /* */
background-image: var(--eye-chacher); /* */
background-size: contain;
background-repeat: no-repeat; /* */
border-radius: 4px;
}
code:stylexx.css
.editor .line-title::before {
content: '😆';
font-size: 26px;
display: block;
/*display: inline-block;*/
/*display: inline;*/
width: 26px;
height: 26px;
/*padding: 26x;*/
position: absolute;
/* position: right bottom;*/
/*position: left bottom;*/
}
code:style.css
.editor .line-title .text {
font-size: 24px;
font-weight: bold;
background: linear-gradient(315deg,
red,
orange,
yellow,
green,
aqua,
blue,
purple,
red
);
-webkit-background-clip: text; /* */
-webkit-text-fill-color: transparent; /* */
background-clip: text;
color: transparent;
display:inline-block;
}
code:stylexx.css
.editor .line-title::before {
content: '\f02d';
font-family: FontAwesome;
font-size: 26px;
color: var(--main-color);
display: block;
width: 26px;
height: 26px;
position: absolute;
}
https://img.shields.io/badge/UserCSS-ページタイトル-1572B6.svg?logo=css3&style=for-the-badge
UserCSS.icon
;){kind=link}